FireFox 附加组件.docVIP

附加组件安装分为两种方式 1 工具 附加组件 获取附加组件 2或者浏览全部组件 然后进入火狐附加组件的网页 进行下载安装。 WEB　Developer　 首先添加上这个组件　然后打开 从右向左讲 １选项 可以通过选项对该组件进行一些常规的设置，具体设置看需求 ２查看源代码 可以查看网页源代码 这是火狐浏览器的特殊功能，你可以选中网页部分内容，右键，便可查看选中部分的源代码 你可以看到，最下面的设定查看源代码的应用程序　点击后　便进入选项　 通过这个可以设定查看源代码时，你所使用的程序。 ３工具 工具里的选项都是验证各部分代码的，验证代码有助于把网站做得更规范。 4窗口大小 在窗口大小里的，自定义大小，可以方便校验，网站在不同的装置上显示的效果。 5标示 标示就是把页面中相同的元素标出来。 这张是标示区块层后的结果 自定义标示元素，如下 点击自定义后弹出上面的对话框，在元素栏里输入你想标示的元素，后面可以选者让他们以什么颜色的颜色框标出。 6其他功能 可以在属性栏里加入水平或者垂直参考线，同时可以改变参考线的颜色。对开发网页很有帮助 显示标尺 显示标尺，可以用标尺量一下啊网站板块的大小（宽高的像素，如图。）对开发网页很有帮助。 编辑HTML 编辑HTML时，可以看到网页下面会出现代码，可以用来编辑HTML，这种编辑虽然会在网页上显示编辑后的效果，但不会改变网页。 模拟小屏幕画面 模拟小屏幕画面，是选择后网页模拟在手持终端设备（手机）上显示的结果。（前提是你的手机对CSS支持的比较好） 否者的话，就类似这样： 模拟手机不支持CSS时显示的结果。 7网页信息 显示锚点，锚点（？） 显示区块大小，区块（？） 显示DIV顺序，可以看出图上DIV后面都有表示顺序的数字。 显示ID　Class　信息 显示 链接细节 其他的，网页信息里面还有很多显示功能，对开发网页有很大帮助。具体每个都代表什么意思，有什么用，做的时候体会吧！ 8图片 图片里面的功能，如禁用所有图片，动态图片 和 显示图片大小，都很容易理解，开发网页时，会有很多图片的问题，这个很有帮助。 9表单 表单，没什么好说的，表单细节，表单信息。 这是一个很好用，很常用的功能 查看CSS可以看整个网页页面内的CSS，可以把他们同时下载下来，进行研究。 查看样式信息，可以在上面的属性栏里看到你鼠标所指模块的样式信息。 禁用样式，可以禁用各种样式，用来对网页中的CSS进行研究。 10 最后两个没什么说的，都是用来研究网页代码构造的 。WEB　Developer　到此基本介绍完毕。 CSSViewer 这是一款清楚观看网页元素样式的软件。 未打开之前打开之后 当你打开CSSViewer之后，你把鼠标移动到网页元素上，就会看到网页各个元素的样式 简单而强大 Firebug 这是一款用于JavaScript代码调试的插件Firebug 其实Firebug中拥有了一些WEB Developer的功能 当你选中HTML时，便可以清晰的看到网页上HTML的结构 每个结构都清晰可见。 你可以在这里直接编辑代码，但是当你关闭Firebug时，效果自动回复。 点击查看页面中的元素 例如：上面，当你选择 查看 HTML 你的鼠标移动到页面上某个元素如：“哲理美文” Firebug 上就会相应的显示出该元素的HTML结构 后面还会相应的显示出它的样式 接下来讲，这款插件最主要的功能： 对JavaScript代码的调试。首先编辑一段JavaScript代码： 这是一个弹出框的代码 然后我们故意将这段JavaScript脚本语言编辑出一个错误 这样当我们重新载入页面时，Firebug就会检查到一个错误 当我们点击16行，它会自动跳到错误的地方 我们就可以修改了 如上图，17行前面的断点，它的作用是当你加上断点时，他将只对断点之前的代码进行打印，断电后的不打印 这个是断续的按钮，当你点击这个按钮时，他会执行断点下面的代码 以上三个分别是 单步进入 单步跳过 单步退出 的按钮。 通过以上几个按钮我们可以看到程序每一步的执行过程，对我们分析页面、查找页面中的BUG很有帮助。