Firebug工具的介绍与安装

Firebug介绍

Firebug是网页浏览器 Mozilla Firefox 下的一款开发类插件，现属于Firefox的五星级强力推荐插件之一。它集HTML查看和编辑、Javascript控制台、网络状况监视器于一体，是开发JavaScript、CSS、HTML和Ajax的得力助手。Firebug如同一把精巧的瑞士军刀，从各个不同的角度剖析Web页面内部的细节层面，给Web开发者带来很大的便利。例如 Yahoo! 的网页速度优化建议工具 YSlow。

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

Firebug官方网址： https://www.getfirebug.com/

 

Firebug主要功能

网络监视器：Firebug的网络监视器能将页面中的CSS、javascript以及网页中引用的图片载入所消耗的时间以矩状图呈现出来。

Javascript调试器：这是一个很不错的javascript脚本调试器，占用空间不大，但是单步调试、设置断点、变量查看窗口一个不少。

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

DOM查看器：Firebug的DOM查看器却能方便地浏览DOM的内部结构，帮助你快速定位DOM对象。

查看和修改HTML、 CSS调试及CSS尺标

 

Firebug安装

安装完毕最新版火狐浏览器，例如Firefox-setup_20.0.1.4847.exe。

点击左上角firefox菜单，选择附加组件，如下图：

Firebug在线安装：

安装完毕最新版火狐浏览器，例如Firefox-setup_20.0.1.4847.exe。

点击左上角firefox菜单，选择附加组件，如下图：

之后在出现的搜索栏中输入“firebug”关键词，出现firebug搜索结果，点击安装后，重启浏览器即可完成安装过程。

Firebug离线安装

安装完毕最新版火狐浏览器，例如Firefox-setup_20.0.1.4847.exe。

在Firebug官方网站上，下载最新版的Firebug安装包。例如： firebug.xpi

打开火狐浏览器，将Firebug安装包拖动到火狐浏览器中。

点击“安装”后，重启浏览器。完成安装！

验证Firebug是否安装成功

安装后，再次打开火狐浏览器。在浏览器的右上角出现Firebug图标：

点击Firebug图标后，浏览器中出现如下界面：

使用Firebug对javascript调试：

打开Firebug界面后，调整到脚本界面：

启用脚本调试：

找到我们要调试的js代码或文件：

增加断点：在行标前，单击鼠标。

去掉断点：在行标前，再次单击。

进行单步调试：