FireBug(萤火虫)

Firebug（中文常叫萤火虫）是 Firefox 浏览器上一款经典的开源扩展，主要用来调试网页里的 HTML、CSS 和 JavaScript。它把代码查看、实时编辑、控制台输出、网络请求监控这些开发中常用的功能整合在一个面板里，对做前端或者需要排查页面问题的人来说很省事。除了 Firefox，它在 IE、Opera、Safari 等浏览器下也能使用。Firebug 从多个角度拆解 Web 页面的内部细节，让开发者能边浏览边改代码、边看效果，算是早期 Web 开发工具里比较完整的一套。

主要功能一览

1、 HTML 面板可以查看当前页面的源代码，并直接编辑，改动会实时反映到页面上

2、 CSS 面板列出页面用到的所有样式定义，双击就能修改，方便调整页面外观

3、 脚本面板相当于一个 JavaScript 调试器，支持单步执行、设置断点、查看变量，右侧监控区还能统计脚本运行时间

4、 DOM 面板用来查看页面 DOM 结构，自带搜索能快速定位节点，双击可改属性或值

5、 网络面板监控网页各组成元素的加载耗时，帮助找出拖慢速度的部分

6、 控制台显示网页错误信息，也能当命令行窗口用，配合概况子选项了解 JavaScript 执行情况

激活方式与快捷键

- Firebug 的激活跟随 URL，遵守同源策略：在不同选项卡打开同一来源的页面时它会自动开启，同一选项卡切换到不同来源的页面时它会自动关闭

- 开发者工具的激活基于标签页，打开后会一直保留，切换网站也不关闭，但切到别的标签页就会关掉

- 按 F12 可以打开 Firebug；想直接检查元素，用 Ctrl+Shift+C（Mac 上是 Cmd+Opt+C）

- 开发者工具共用这些快捷键，还提供分面板快捷键，比如网络监视器 Ctrl+Shift+Q（Mac 为 Cmd+Opt+Q）、Web 控制台 Ctrl+Shift+K（Mac 为 Cmd+Opt+K）、调试器 Ctrl+Shift+S（Mac 为 Cmd+Opt+S）

控制台相关特性

- Firebug 的 Web 控制台对应开发者工具的控制台面板，显示网页相关日志，也允许通过命令行执行 JavaScript 表达式，两者显示方式有差异

- 过滤日志消息有两种途径：选项菜单和工具栏上的过滤器按钮；开发者工具的控制台则把类似功能集中在工具栏的过滤器按钮里

- Firebug 的命令行 API 提供一些特殊功能，开发者工具的命令行有部分共同功能，也有各自独有的部分

- 控制台 API 让网页内部可以往控制台写日志，开发者工具共用同一套 API，所以 console.* 语句继续有效

- 想保留页面跳转或刷新之间记录的消息，在 Firebug 里点工具栏的 Persist 按钮；开发者工具里这个选项叫启用日志，放在“工具箱选项”面板中

- FirePHP 这类 Firebug 扩展能把服务器端消息记到 Firebug 控制台；该功能已通过 ChromeLogger 协议集成进开发者工具，不需要额外装扩展

- 命令历史在 Firebug 里通过命令行按钮调出，在开发者工具命令行中按上下方向键即可

安装步骤

1、 下载 Firebug 软件包，解压后双击打开安装文件

2、 解压需要用到压缩工具，推荐 WinRAR

3、 把解压得到的 .xpi 文件直接拖到 Firefox 浏览器界面中，稍等片刻，浏览器右上方出现 Firebug 图标就表示安装成功