那么,让我们来看看现在得状况。

新一代的 Firebug 的紧张目标是帮助用户与本地 DevTools 一起事情时,有一种亲切的觉得。
这是 Firebug3(别号Firebug.next)出身的缘故原由。
Firebug3 不是另一个新的 DevTools,这是相称于建立在DevTools 之上的一个工具,它供应了一个新的主题,使 DevTools 看起来像 Firebug3。
同时还增加了一些附加的功能,更多的功能将一步一步添加到 DevTools 上。

如果你希望得到一些过去 Firebug 的功能,你该当期待他们在未来成为 DevTools 的一部分。

firebugphp前端看过来Firebug 与 DevTools 的集成 Vue.js

Firebug 3

看看下面的截图的 DevTools 和你安装的 Firebug3(first beta)。
这看起来是不是相同.

Firebug 3(别号Firebug.next),不通过AMO分配,以是你可能须要设置 xpinstall.signatures.required 首选项(通过about:config中)设置为false。

这是 Firebug 的主题移植到 DevTools 带来的一些用户界面和布局的上风。
还有显而易见的 Firebug 启动按钮在 Firefox 的工具栏中,它代表开拓者工具箱的入口。

看,Firebug 主题的选项涌如今当前活动页中。

进入你的得心应手的工具,过程是一样的:你可以按下启动按钮或F12键。

你可能会常常须要利用 DOM 面板检讨你的页面的文档工具模型。
原生目前还不支持,但是Firebug供应给你。

也支持在掌握台面板(很多次要求)XHR预览。

一些最盛行的扩展已在 DevTools 顶部重新实现。
这不仅使一些盛行的功能保持这,同时这些实现还供应了您如何可直接为 DevTools 做出新的扩展很好的例子。
Firebug 不须要运行这些扩展。

如果你是一个扩展开拓职员,你可能会感兴趣的一些例子,并链接到其他资源,帮助理解如何扩展DevTools。

让我们来看看我们可以用什么扩展。

FireQuery 扩展

FireQuery 是为 jQuery 开拓的一个建立在 Firefox 浏览器上 DevTools 顶部的 Firefox 插件。
Firebug 3没有包含进去,但从下面截图可以看出 Firebug 主题是支持这个的。

元素所和 jQuery 干系的数据显示在掌握台面板中的小信封图标里。
您可以通过点击图标来查看它。
还有一个jQuerify在掌握台面板工具栏按钮,你可以点击它,将 jQuery 装载到当前页面。

Inspector 面板也将显示元素的 jQuery 数据的信封图标。
点击图标能打开详细的信息。

见FireQuery主页。

下载附加的AMO。

考试测验一下这个在线测试页。

PixelPerfect 扩展

PixePerfect 是一个 Firefox 扩展,它许可Web开拓职员和设计职员能够轻松地在页面上覆盖半透明层(图像)。
这些层可用于每个页面和每个层之间的比较。

有一个 PixelPerfect 的开始按钮,许可快速利用该功能。

这是终极的 Pixel Perfect 的用户界面,您可以通过点击上面的按钮打开。

见PixelPerfet的主页。

下载来自AMO。

HAR 导出

支持从网络面板导出HAR(HTTP Archive format)数据,现在是一个内置的功能,并且您无需为它安装扩展。
所有你须要做的是选择网络面板(如果须要的话就重新加载页面),并利用两个高下文菜单操作:

复制所有作为HAR:将网络的数据复制到剪贴板。

保存所有作为HAR:将网络的数据导出到一个文件中。

从网络面板导出的数据每每是自动的(例如:利用 Selenium 测试Web运用程序时)。
如果您想为每一个加载页面自动创建一个HAR文件,你须要设置以下首选项(利用about:config中)设置为true:

devtools.netmonitor.har.enableAutoExportToFile

有些自动化系统须要得到的不仅仅是为每个页面创建的加载后的HAR文件,而须要的是有更大的灵巧性。
有时你须要将数据发送到远程做事器,网络和导出HAR两个特定的用户操作等,这便是为什么我们推出了一个大略的HARExportTrigger扩展,通过供应 HAR API 到网页内容提高自动化程度。
这使您随时可以利用小脚本触发HAR。

下面是从网络面板得到 HAR 数据的示例脚本:

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

见HAR导出触发主页

下载插件从AMO

利用在做事器上的 console. API

Firebug 的社区已经履行了许多扩展,许可开拓者利用console.在(HTTP)做事器端API,然后你就能看到在浏览器显示后台日志。
此功能现在在 Firefox 中原生支持且你不须要安装额外的扩展。

所有您须要做的是在掌握台面板启用做事器内部日志。

此功能支持现有协议(利用 Chrome Logger),发送日志的办法是通过HTTP头到客户端。
就彷佛通过页面 javascript 在掌握台面板输出日志一样。
有许多做事器端库,供应相应的做事器端 API 在各种措辞中(NodeJS,Ruby,Python,PHP,.NET,Java等)

下面是做事器端日志记录的一个例子:

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);

这里是做事器端日志看起来像在掌握台面板:

末了的话

正如我在文章开头提到的,我们正在努力统一本地火狐开拓职员工具(DevTools)和 Firebug,由于我们认为这是一种很棒的想法,为Web开拓职员供应强大的工具。
这里还有很多没有提到,但是该当会给你一个对新 Firebug 的大致印象。

请张贴反馈到 Firebug Group,感激。

Jan ‘Honza’ Odvarko

想看得更爽?点击阅读全文~