你可能已经听说过我们对统一 Firefox 的本地开发人员工具(DevTools)和 Firebug 的努力。我们一直在努力地将的所有最喜欢的 Firebug 功能添加到本地 DevTools 中,使他们多进程兼容,并且可用于远程调试(即e10s兼容)。我们一直也在努力实现简单和顺利从 Firebug 过渡到 DevTools。是的,正如我们前面所提到的,我们专注于为开发者提供一个伟大的开发工具!
那么,让我们来看看现在得状况。
新一代的 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 数据的信封图标。点击图标能打开详细的信息。
PixelPerfect 扩展PixePerfect 是一个 Firefox 扩展,它允许Web开发人员和设计人员能够轻松地在页面上覆盖半透明层(图像)。这些层可用于每个页面和每个层之间的比较。
有一个 PixelPerfect 的开始按钮,允许快速使用该功能。
这是最终的 Pixel Perfect 的用户界面,您可以通过点击上面的按钮打开。
HAR 导出支持从网络面板导出HAR(HTTP Archive format)数据,现在是一个内置的功能,并且您无需为它安装扩展。所有你需要做的是选择网络面板(如果需要的话就重新加载页面),并使用两个上下文菜单操作:
复制所有作为HAR:将收集的数据复制到剪贴板。
保存所有作为HAR:将收集的数据导出到一个文件中。
从网络面板导出的数据往往是自动的(例如:使用 Selenium 测试Web应用程序时)。如果您想为每一个加载页面自动创建一个HAR文件,你需要设置以下首选项(使用about:config中)设置为true:
devtools.netmonitor.har.enableAutoExportToFile