Firefox 23 开发者工具的新功能

又一个版本发布了,现在是时候来看看 Firefox 23(目前为 Aurora,我们的预发行版通道)中的开发者工具有什么新功能了。你可以从 Aurora 下载页面 下载它。Firefox 23 预计于 2013 年 8 月 6 日星期二正式发布。

第 XXIII 集是一个激动人心、令人惊叹的史诗般壮观景象,一定会让你感到高兴和娱乐。如果你想提前预览正在积极开发中的功能,可以试用 Nightly 版本。

网络监控器

工具箱里增加了一个新工具:网络监控器。它以经典的瀑布式时间线视图展示网站上的网络活动。这些数据自 Firefox 4 起就通过 Web 控制台提供,只是视觉效果不那么美观。

请在 Bugzilla 中的 开发者工具:Netmonitor 组件下提交 Bug 报告。

远程样式编辑器

在 Firefox 23 中,你现在可以通过远程连接在支持该功能的设备上编辑样式。对于希望通过远程协议实时测试和调试移动设备上的样式的应用开发者来说,这将是一个很大的帮助。

截至本文撰写时,远程样式编辑器应与 Firefox for Android 23 版本兼容,该版本也计划升级到 Aurora。我们正在努力 将样式编辑器 Actor 集成到 Firefox OS 模拟器中,并正在调查如何将它们移植到 Firefox OS 发布版。

选项面板

我们在工具栏中添加了一个齿轮菜单,其中包含一个选项面板,用于打开或关闭工具。随着我们添加更多功能,它将成为管理与开发者工具相关的首选项的重要场所。

目前,选项包括为工具打开浅色或深色主题以及启用 Chrome 调试功能。

对调试器协议的初步 SourceMap 支持

调试器对 SourceMap 的第一批支持已经到位,我们现在能够为您提供 SourceMapped 的 JS 文件以供调试。很快,断点的列支持也将到来,使您能够使用 SourceMap 调试压缩后的 JS 代码。

请关注 Nick Fitzgerald 在 Hacks 上发布的有关该功能的博客文章,它将解释其背后的魔法。

变量视图无处不在

我们的变量视图是一个改进后的对象检查器,是调试器的重要组成部分。自然地,我们希望将其置于所有地方。因此,Web 控制台和 Scratchpad 现在也拥有变量视图。使用 ESC 键将其关闭。

浏览器控制台

如果启用了 Chrome 调试功能,请查看浏览器控制台。它是古老的错误控制台的替代品,为您提供了一个 Chrome 上下文的命令行,用于对浏览器执行 JavaScript 代码。它非常棒,默认情况下将在 Firefox 24 中启用。

GCLI Appcache 命令

我们终于为尝试使用 App Cache 存储离线数据的开发者提供了一些东西。一个名为 appcache 的新命令,用于图形命令行。你可以在 Mike Ratcliffe 的 The Application Cache is no longer a Douchebag 文章中阅读相关信息。

调试器框架中的 Web 控制台

Web 控制台现在已完全远程化(自版本 18 起),现在它将使用调试器在断点处暂停时的当前框架。

多个暂停的调试器

你现在可以使用脚本调试器同时调试多个标签页。以前,当尝试在两个不同的标签页上使用调试器时,你会收到通知,要求你在另一个标签页上恢复调试器。现在,你可以根据需要调试任意数量的标签页。

但是,这种强大功能有一个注意事项。由于每个调试器创建的嵌套事件循环,你必须按照暂停时的顺序恢复每个标签页。谨慎调试,并始终携带一个大型堆栈。

你可以在表格形式的 修复的 Bug 列表中查看 Firefox 23 开发者工具修复

关于 Robert Nyman [名誉编辑]

Mozilla Hacks 技术布道师和编辑。发表演讲和撰写关于 HTML5、JavaScript 和开放网络的博客文章。Robert 是 HTML5 和开放网络的坚定支持者,自 1999 年以来一直从事 Web 前端开发工作,在瑞典和纽约市都有工作经验。他还定期在 http://robertnyman.com 上发表博客文章,喜欢旅行和结识新朋友。

更多来自 Robert Nyman [名誉编辑] 的文章…


24 条评论

  1. Ron

    多个暂停的调试器是否会在 24 版本中无需该注意事项就能正常工作?

    2013 年 5 月 21 日 凌晨 2:54

    1. Rob Campbell

      嗨 Ron,在 Firefox 实现真正的多进程标签页之前,这将是同时暂停多个标签页的必要条件。

      2013 年 5 月 21 日 上午 4:41

  2. André

    不知道是不是我的(Linux)设置问题,但在 Firefox 中使用开发工具非常卡顿,速度比 Chrome 慢很多。即使在性能不错的机器上也是如此。这总是让我在调试时回到 Chrome :(

    2013 年 5 月 21 日 上午 3:08

    1. Skatox

      我使用的是 Linux(Archlinux),我没有发现 Fx 开发者工具有任何延迟。

      2013 年 5 月 21 日 上午 6:29

    2. Daniel

      对于我来说,开发工具有时在 Windows 上会稍微慢一些。在我的 Xubuntu 上,Firefox 开发工具运行得跟其他任何应用一样流畅。

      2013 年 5 月 21 日 上午 6:51

  3. eric

    我希望有一天我能卸载 Firebug,只使用开发工具。

    2013 年 5 月 21 日 下午 5:56

    1. Luke

      Firefox 开发工具缺少哪些功能?

      2013 年 6 月 10 日 下午 11:37

  4. Skatox

    棒极了!这些是我一直使用 Firebug 的原因,现在我可以使用 Fx 开发者工具了 :)

    2013 年 5 月 21 日 上午 6:29

  5. leeoniya

    有没有办法禁用控制台在页面刷新之间保持持久性?自动持久性让我抓狂。另外,多行控制台是否在计划中?

    谢谢!

    2013 年 5 月 21 日 上午 8:22

  6. Doug

    太棒了!我们终于有东西可以超越 Chrome 开发者工具了!
    嘿,在网络标签页中,有没有办法清除连接以恢复到干净状态?
    谢谢

    2013 年 5 月 21 日 上午 10:52

    1. Rahly

      是的,这是我对网络监控器的唯一不满。能够清除它会让处理高 AJAX 量网站更容易。另外,我一直以为这些工具不应该取代 Firebug,但它似乎越来越添加更多 FB 功能,使其或多或少变得过时。

      2013 年 6 月 19 日 下午 3:49

  7. Thomas Andersen

    感谢你们做出了如此出色的工作!
    还有我的问题 ;)

    1. 请原谅我的急躁,但是我们如何使用 SourceMap?我看到有一个名为“devtools.debugger.source-maps-enabled”的配置属性,默认设置为 false。当我将其设置为 true 时,我在调试器标签页中没有看到任何变化。我是不是遗漏了什么?

    2. 开发者工具 API 什么时候会发布?
    根据以下内容:https://mdn.org.cn/en-US/docs/Tools/DevToolsAPIhttps://github.com/mozilla/mozilla-central/tree/master/browser/devtools/framework/test,我已经能够创建简单的扩展,并且希望了解更多信息。

    谢谢,
    Thomas

    2013 年 5 月 21 日 下午 11:55

    1. Rob Campbell

      嗨 Thomas,

      首先,请期待很快发布的关于如何使用 SourceMap 的博客文章。正如我在文章中提到的,这是“初步支持”,我们将逐步发布更多功能。最终,我们将能够在调试器中展示和调试压缩后的 JS 代码,前提是存在 SourceMap(甚至可能不需要)。

      我们现在正在内部使用开发者工具 API,它相当稳定。但是,我们正在进行一些工作来添加一个加载器,它将使我们能够更动态地执行某些操作。例如,从运行中的 Firefox 实例中重新加载开发者工具。我建议在下一个版本发布之前不要将任何附加组件构建在当前 API 上。

      我还希望在某个时候发布一个适用于开发者工具的正式附加组件 SDK 模块。

      感谢您的评论!

      2013 年 5 月 21 日 下午 5:42

      1. Luke

        使用 SourceMap 仅仅是指能够单步执行未压缩的代码吗?还是指能够从调试器中突出显示元素,而不是只能看到变量的属性?我一直在开发一个扩展程序,以添加我在开发者工具中缺失的功能(https://github.com/programmin1/DevTools-Tweaks),但这正是我一直无法添加的一个功能。我做了一些研究,似乎是可行的(http://stackoverflow.com/questions/17120754),我很想知道这个功能是否会出现在 23 或 24 版本中?

        2013 年 6 月 19 日 下午 7:52

  8. Aras

    太棒了!我对远程样式编辑器和控制台改进感到非常兴奋。我目前在 Ubuntu 上运行 Aurora 22,想知道是否有简单的方法升级到 Aurora 23?是否有可靠的 PPA 资源?

    2013 年 5 月 21 日 晚上 8:24

  9. Christopher Shankland

    嗨,Rob,

    我想知道将来是否有计划开发支持 WebSocket 的网络工具?或者也许是我现在使用的方式不对?

    干杯

    2013 年 5 月 22 日 上午 5:52

    1. Rob Campbell

      有。:)

      2013 年 5 月 22 日 上午 6:34

  10. Gaurav

    https://launchpad.net/~ubuntu-mozilla-daily/+archive/ppa

    2013 年 5 月 22 日 上午 5:59

  11. Oğuz Çelikdemir

    我不知道有人尝试在 Firefox 中调试 ExtJS 应用程序(正如你可能猜到的,一个大约 1 MB 的压缩 JavaScript 库,特别是针对企业客户)。与 Chrome 相比,调试性能非常糟糕。最糟糕的是任何断点都会导致浏览器崩溃!

    另一方面,为什么我们要使用第三方扩展来实现一些功能,例如在项目开发过程中自动刷新?我相信 Firefox 开发团队可以实现这些功能。

    2013 年 5 月 22 日 下午 11:21

  12. piotr_cz

    干得好,伙计们,我印象深刻。
    看到 Firefox 的发展状况我真的很高兴。

    有没有办法将调试栏移动到窗口的右侧或单独的窗口中?这对宽屏和双屏系统非常有用。

    2013 年 5 月 24 日 上午 0:46

    1. Rob Campbell

      嗨,Piotr,

      在工具箱的左上角,有停靠图标。带有垂直栏的那个用于右停靠。带有两个方块的那个用于单独的窗口模式。

      请查看:屏幕截图

      并非所有工具在侧边栏中都能很好地工作,我们需要稍微调整调试器才能在侧边栏中正常工作,但至少应该可用。

      感谢您的评论!

      2013 年 5 月 24 日 上午 3:42

  13. Mathew Porter

    远程样式编辑器听起来像一个很棒的功能,我稍后会尝试一下。

    2013 年 5 月 24 日 下午 3:28

  14. Usef

    看到开发者工具的快速发展真是太好了。

    我最希望看到的是更多用于设计工作的功能,尤其是颜色调整。

    目前,对于非简单的属性(例如线性渐变),在检查器中进行颜色调整非常困难,因为你需要使用箭头键在微小的文本框中导航才能找到颜色值。你需要反复使用箭头键,因为每次编辑时光标位置都会重置。

    如果有一个颜色拾取器,能够快速进行颜色调整(类似于 Chrome 开发者工具),并支持使用有用的调整方法(HSL/HSB,与 Chrome 开发者工具不同),那将非常棒。

    我还希望能够使用十六进制代码语法显示颜色,而不是 rgb(x, y, z),这样我就可以轻松地将结果复制粘贴回我的样式表。

    无论如何,感谢你们的辛勤工作。

    2013 年 6 月 6 日 下午 11:35

  15. Usef

    澄清一下:带有 HSL 的颜色拾取器可以让你例如降低饱和度,但仍然将结果以 rgb/十六进制颜色保存到样式表中。

    2013 年 6 月 6 日 下午 11:40

本文评论已关闭。