Firebug调试工具.docx

Firebug调试工具.docx

《Firebug调试工具.docx》由会员分享，可在线阅读，更多相关《Firebug调试工具.docx（14页珍藏版）》请在冰豆网上搜索。

Firebug调试工具

Firebug调试工具的安装

1、下载Firefore浏览器

在

2、安装Firefore浏览器

Firebug插件虽然功能强大，但是它已经和Firefox浏览器无缝地结合在一起，使用简单直观。

由于正常的情况下是在线安装，因此在离线安装时会出现下面的错误，不需要管它。

3、Firebug插件的主要功能

　Firebug是网页浏览器MozillaFirefox下的一款开发类插件，现属于Firefox的五星级强力推荐插件之一。

它集HTML查看和编辑、Javascript控制台、网络状况监视器于一体，是开发JavaScript、CSS、HTML和Ajax的得力助手。

Firebug也是一个除错工具。

用户可以利用它除错、编辑、甚至删改任何网站的CSS、HTML、DOM以及JavaScript代码。

4、在Firefox内在线下载和安装Firebug插件

（1）打开显示“菜单栏”

（2）搜索Firebug附加软件的URL地址

Firebug是与Firefox集成的，所以我们首先要安装的事Firefox浏览器。

安装好浏览器后，打开浏览器，选择菜单栏上的“工具”菜单，选择“附加组件”，在弹出窗口中点击左上角的“获取附加组件”链接。

在打开的页面的search输入框中输入“firebug”。

等搜索结果出来后点击Firbug链接进入Firebug的下载安装页面。

安装完毕后重新启动FireFox浏览器。

5、下载软件再离线安装Firebug

（1）https:

//addons.mozilla.org/en-US/firefox/addon/firebug/

（2）安装Firebug插件

由于下载的是*.xpi格式的文件，在Windows系统中必须要由Firefox浏览器软件打开和安装它。

因此，可以将该*.xpi格式的文件与Firefox浏览器关联（选择打开方式为firefox软件）。

或者启动Firefox浏览器后，再直接把*.xpi格式的文件拖到Firefox浏览器中就可以。

点击“立即安装”按钮，将开始安装Firebug插件。

6、启动Firebug插件

（1）在当前页面窗口中启动Firebug插件

在安装好Firebug插件之后，先用Firefox浏览器打开需要测试的页面，然后点击工具菜单中的相关子菜单项目或使用快捷键F12可以启动Firebug插件，它会将当前页面分成上下两个框架，如下图所示。

页面窗口被分成了两部分，上半部分是浏览的页面，下半部分则是Firebug的控制窗口。

如果不喜欢这样，可以按CTRL+F12或在前面操作后单击右上角的上箭头按钮，弹出一个新窗口作为Firebug的控制窗口。

（2）在独立的窗口中启动Firebug插件——按Ctrl+F12组合键

7、Firebug窗口主要有功能区和信息区

选择功能区第二行的不同标签，信息区的显示会有不同，Options的选项也会不同，搜索框的搜索方式也会不同。

（1）控制台（Console）

单击功能区第二栏的“Console”标签可切换到控制台。

控制台的作用是显示各种错误信息（可在Options里定义），显示脚本代码中内嵌的控制台调试信息，通过命令行对脚本进行调试，通过单击Profile对脚本进行性能测试。

控制台能够显示当前页面中的javascript错误以及警告，并提示出错的文件和行号，方便调试，这些错误提示比起浏览器本身提供的错误提示更加详细且具有参考价值。

而且在调试Ajax应用的时候也是特别有用，你能够在控制台里看到每一个XMLHttpRequests请求post出去的参数、URL，http头以及回馈的内容，原本似乎在幕后黑匣子里运作的程序被清清楚楚地展示在你面前。

（2）HTML代码查看器可以查看和修改HTML

首先你看到的是已经经过格式化的HTML代码，它有清晰的层次，你能够方便地分辨出每一个标签之间的从属并行关系，标签的折叠功能能够帮助你集中精力分析代码。

源代码上方还标记出了DOM的层次。

可以在HTML查看器中直接修改HTML源代码，并在浏览器中第一时间看到修改后的效果。

有时候页面中的javascript会根据用户的动作如鼠标的onmouseover来动态改变一些HTML元素的样式表或背景色，HTML查看器会将页面上改变的内容也抓下来，并以黄色高亮标记，让网页的暗箱操作彻底成为历史。

（3）CSS调试

Firebug的CSS调试器是专为网页设计师们量身定做的，Firebug的CSS查看器不仅自下向上列出每一个CSS样式表的从属继承关系，还列出了每一个样式在哪个样式文件中定义。

可以在这个查看器中直接添加、修改、删除一些CSS样式表属性，并在当前页面中直接看到修改后的结果。

可以在CSS调试器中选中一个样式表属性，然后用上下方向键来改变它的值，它会把可能的值一个个遍历显示出。

（4）视化的CSS尺标

可以利用Firebug来查看页面中某一区块的CSS样式表，如果进一步展开右侧Layouttab的话，它会以标尺的形式将当前区块占用的面积清楚地标识出来，精确到象素。

能够在这个可视化的界面中直接修改各象素的值，页面上区块的位置就会随改动而变化。

在页面中某些元素出现错位或者面积超出预料值时，该功能能够提供有效的帮助，从而可以籍此分析offset、margin、padding、size之间的关系，从而找出解决问题的办法。

（5）Javascript调试器

javascript脚本调试器提供单步调试、设置断点、变量查看窗口等功能，可以通过面板上的Profile来统计每段脚本运行的时间，查看到底是哪些语句执行时间过长，一步步排除问题。

（6）DOM查看器

DOM（DocumentObjectModel）中包含有大量的Object以及函数、事件，使用Firebug的DOM查看器却能方便地浏览DOM的内部结构，帮助你快速定位DOM对象。

双击一个DOM对象，就能够编辑它的变量或值，编辑的同时，你可能会发现它还有自动完成功能，当你输入document.get之后，按下tab键就能补齐为document.getElementById，非常方便。

如果你认为补齐得不够理想，按下shift+tab又会恢复原状。

用了Firebug的DOM查看器，你的javascript从此找到了驱使的对象，Web开发也许就成了一件乐事。

（7）网络状况监视器

网络状况监视器能能将页面中的CSS、javascript以及网页中引用的图片载入所消耗的时间以矩状图呈现出来，进而对网页进行调优。

网络监视器还有一些其它细节功能，比如预览图片，查看每一个外部文件甚至是xmlHttpRequests请求的http头等等。

8、调试JavaScript程序

（1）设置或取消断点——点击某个代码行的左边框

（2）熟悉调试中的常用按钮

（3）正常执行页面中的JavaScript程序，Firebug将在断点处自动停下

在右边窗口内将显示出所跟踪的各种状态信息。

9、从断点处继续执行程序

10、Firebug中的JavaScript分析

导航到Console选项卡，单击Profile按钮。

现在可以与页面中各种启用JavaScript/Ajax的特性交互，Firebug将计时。

InternetExplorerDeveloperTools

　　InternetExplorer®8也有一组DeveloperTools。

单击F12启动Developer

Tools窗口。

InternetExplorer的工具提供一组与Firebug相似的特性，而它提供了一个更强大的测试

JavaScript函数性能的分析器。

在DeveloperTools中，单击Profiler选项卡并单击Start

Profiling按钮开始分析应用程序。

让应用程序执行想要测试的函数然后单击StopProfiling生成报告。

1、控制台输出信息

console.log（'Thisislogmessage'）;

console.debug（'Thisisdebugmessage'）;

console.error（'Thisiserrormessage'）;

console.info（'Thisisinfomessage'）;

console.warn（'Thisiswarningmessage'）;