转载

Firebug与DevTools整合

为了进一步提供更将强大的功能，Mazilla的工程师近期一直在努力进行原生Firefox开发者工具（ DevTools ）和 Firebug 的整合工作。Firebug团队的领袖Jan Honza Odvarko近日披露了该项目的进展情况。

作为网页浏览器 Mozilla Firefox下的一款开发类插件，Firebug集中了HTML查看和编辑、Javascript控制台、网络状况监视器等多种功能，是开发JavaScript、CSS、HTML和Ajax的有效工具。然而，Firebug之前一直不能和原生Firefox开发者工具（DevTools）结合起来。最近一段时间，Mazilla的工程师开始了把原生Firefox开发者工具（DevTools）和Firebug的整合工作。该项目努力把所有的Firebug特性移植到DevTools中，使得其兼容多进程，并支持远程调试。而且，项目努力保证从Firebug到DevTools的转变过程尽可能平缓和简单，不影响用户体验。接下来，本文就从 Firebug 3 以及新的插件入手介绍该项目进展。

Firebug 3

最新版的Firebug 3已经不是一个单独的工具，而是DevTools之上的一个外壳。它为DevTools提供了与之前版本Firebug相同的主题。用户可通过点击 Firebug Theme 选项打开主题。Firebug 3为DevTools带来了UI和布局上的好处，并提供了经典的Firebug开始按钮。用户通过开始按钮或者 F12 快捷键即可访问开发者工具箱。

而且，新版的Firebug继续提供DOM面板和Console面板，分别供用户审查页面的文档对象模型和预览XHR。

此外，整合后的工具还在DevTools之上重新实现了很多流行的扩展。这些扩展不仅保证了很多流行特性的使能，还为用户提供了创建新扩展的案例。

FireQuery扩展

FireQuery 是Firefox中、基于DevTools的jQuery开发插件。此插件并不需要Firebug 3，但是可以在Fierbug主题中使用。在其Console面板中，和 jQuery数据相关联的元素会显示一个小信封。开发者点击这些图标就可以审查相应数据。而且，用户还可以利用Console面板中的jQuerify按钮来加载jQuery到当前页面。此外，点击Inspector面板中的信封图标这可以显示相关细节。

目前，用户已经可以通过 AMO 下载该扩展，并通过在线的测试页面进行尝试。

PixelPerfect扩展

PixelPerfect 是一个允许网页开发人员和设计人员把很多半透明层覆盖在一个网页组件的Firefox扩展。这些层可以被用作页面和层之间的逐像素比较。用户可以通过Firefox中的Pixel Perfect开始按钮直接打开其UI界面，配置相关参数。目前，用户已经可以通过 AMO 下载该扩展。

导出HAR

支持从Network面板中导出 HAR 已经成为浏览器内置的特性。用户只需要选择Network面板，并依次执行Copy All As HAR和Save All As HAR即可。该过程一般可以自动化进行。而如果用户需要为每一个加载的页面创建一个HAR文件，只需要设置下列选项即可：

DevToolss.netmonitor.har.enableAutoExportToFile

为了提供更多的灵活性，Mozilla推出了 HARExportTrigger 扩展。该扩展支持利用脚本来完成HAR的导出工作。以下就是从Network面板中获取HAR数据的示例脚本。

var options = {   token: "test",   getData: true, };  HAR.triggerExport(options).then(result => {   console.log(result.data); });

目前，用户已经可以通过 AMO 下载该扩展。

在服务器上使用`console.*``API

Firebug社区开发了很多扩展来支持在服务器端使用 console.* API。这样，用户就可以在浏览器中查看后端的日志文件。目前，Firefox已经内置了该特性，无需安装其他任何扩展。用户只需要在Console面板中时能服务器列表中的Log选项即可。

该特性支持通过HTTP头发送日志到客户端的协议。如果这些日志是通过页面中的JavaScript产生，它们就可以显示在Console面板中。而且，有很多服务器端的库可以提供各种语言版本（NodeJS、Puby、Python、PHP、.NET和Java等）的服务器端API。

以下为服务器端记录日志的例子：

var chromelogger = require('chromelogger'); var http = require('http'); var server = http.createServer();  server.on('request', chromelogger.middleware); server.on('request', function(req, res) {   res.chrome.log('Hello from Node.js %s', process.version);   res.end(); });  server.listen(7357);

在Console面板中所看到的对应服务器端日志文件如下所示：

Firebug与DevTools整合

最后， Jan表示，Firebug和DevTools的合并工作已经取得一定的进展，但还有很多工作在进行。如果有用户任何意见和建议，可以直接联系 Firebug组。该消息一经发布便引来网友热烈讨论。有网友提出目前的工具还不支持Cookie编辑、浏览websocket帧等，希望下一步能够有所改善。而另有网友则坚持认为Firebug 2已经能够很好的处理调试相关的问题，对新工具表示一定的怀疑。此外，网友还对Chrome和Firefox的开发体验进行了比较，提出firefox支持更加快速、轻量的开发。

感谢徐川对本文的审校。

给InfoQ中文站投稿或者参与内容翻译工作，请邮件至editors@cn.infoq.com。也欢迎大家通过新浪微博（@InfoQ，@丁晓昀），微信（微信号： InfoQChina ）关注我们，并与我们的编辑和其他读者朋友交流（欢迎加入InfoQ读者交流群 Firebug与DevTools整合（已满），InfoQ读者交流群（#2））。