那么,让我们来看看现在得状况。
新一代的 Firebug 的紧张目标是帮助用户与本地 DevTools 一起事情时,有一种亲切的觉得。这是 Firebug3(别号Firebug.next)出身的缘故原由。Firebug3 不是另一个新的 DevTools,这是相称于建立在DevTools 之上的一个工具,它供应了一个新的主题,使 DevTools 看起来像 Firebug3。同时还增加了一些附加的功能,更多的功能将一步一步添加到 DevTools 上。
如果你希望得到一些过去 Firebug 的功能,你该当期待他们在未来成为 DevTools 的一部分。
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
想看得更爽?点击阅读全文~