Firefox 开发者工具的新功能:第 24 集

最近发布了一些版本,并且 Firefox 24 的开发者工具中将包含大量新功能。Firefox 24 目前处于 alpha 频道 Firefox Aurora,将于 2013 年 9 月 17 日进入主发布频道。

这次发布将带来大量很棒的新功能。我在这里只介绍了一些亮点;要查看开发者工具所有新变化的完整列表,请查看 自上次发布以来修复的错误的完整列表

控制台清理

一个经常被要求的功能,现在当您刷新页面时,控制台将清除所有现有日志。如果您需要日志在重新加载时保留,请放心:此行为可以在选项面板中切换。这样可以减少混乱!

用户还报告“清除”按钮令人困惑。由于按钮紧邻过滤搜索框,因此不清楚它是清除日志还是过滤文本。我们已经移动了它,这样就不会再出现这种情况了!

New position of the clear button

源映射技巧

源映射现在默认启用。如果您需要调试由您的工具或编译器生成的 JavaScript 而不是原始源代码,您仍然可以在调试器选项中打开和关闭它们。

此外,由于 Internet Explorer 中存在问题,源映射规范已更新,以便您使用 //#
sourceMappingURL=...
将源映射链接到其脚本,而不是过时的 //@ sourceMappingURL=...。我们仍然会尊重旧样式,但会警告您它已过时。 这是更改原因的摘要

最后,如果存在,我们将从其源映射的 sourcesContent 属性加载源映射源的文本。此属性已添加到源映射中以启用动态源映射创建,并将您的源代码捆绑到源映射中,这样您就不需要在服务器上处理额外的文件。

调试器开发

冻结的、密封的和不可扩展的对象现在在调试器的变量视图中以视觉方式区分。

Frozen, sealed, and non-extensible objects

此外,在调试器中从堆栈帧中步出时,您现在将在变量视图中看到返回值或抛出的异常(取决于您退出帧的原因),分别标记为 <return><exception>

A stack frame's return value

A stack frame's exception

无 JavaScript 的乐趣

需要查看您的网页在禁用 JavaScript 时如何优雅地降级吗?转到选项面板,您可以快速为当前选项卡禁用 JavaScript。这将持续到您关闭选项卡或开发者工具为止。

网络监控魔法

您现在可以在网络监控器中按请求类型进行过滤。只想查看样式表的请求?或者可能只想查看 XHR?我们满足您的需求。最重要的是,现在底部列出了请求总数、文件大小和响应时间,这些数据会根据您的过滤器进行更新,因此您可以看到每次页面加载时请求了多少 KB(甚至 MB)的图像。

Filtering only images

分析器小贴士

您现在可以通过 Web 应用程序代码库中的 console.profile() 控制分析器以启动新分析,并通过 console.profileEnd() 结束分析。无需再修剪样本范围,从代码中的所需位置开始和停止分析!

本集到此结束。继续为免费网络进行开发!

关于 Nick Fitzgerald

我喜欢计算、自行车、嘻哈、书籍和绘图仪。我的代词是 he/him。

更多 Nick Fitzgerald 的文章…

关于 Robert Nyman [荣誉编辑]

Mozilla Hacks 的技术布道者和编辑。发表演讲和博客,内容涵盖 HTML5、JavaScript 和开放网络。Robert 是 HTML5 和开放网络的坚定支持者,自 1999 年以来一直从事 Web 前端开发工作——在瑞典和纽约市。他经常在 http://robertnyman.com 上发表博客,喜欢旅行和结识新朋友。

更多 Robert Nyman [荣誉编辑] 的文章…


11 条评论

  1. Skoua

    我不知道这是不是您的目标,但我期待着不再需要打开 Firebug 的那一天,因为它真的比这些新的开发者工具慢很多。

    感谢您的辛勤工作!

    2013 年 7 月 1 日 下午 2:56

    1. Nick Fitzgerald

      您缺少哪些功能?

      帮助我们帮助您:https://bugzilla.mozilla.org/enter_bug.cgi?product=Firefox&component=Developer%20Tools

      或自己动手:https://wiki.mozilla.org/DevTools/GetInvolved

      :)

      2013 年 7 月 1 日 下午 4:10

    2. Simon Lindholm

      幸运的是,Firebug 也变得更快了。

      1.12 不会为控制台面板激活调试器(使 Firebug 在禁用脚本面板的情况下大部分时间都很快):http://code.google.com/p/fbug/issues/detail?id=4978
      2.0 将切换到 Firefox 开发者工具使用的相同调试器 API:http://code.google.com/p/fbug/issues/detail?id=5421
      HTML 面板在 1.12 中切换到变异观察者:http://code.google.com/p/fbug/issues/detail?id=6177

      2013 年 7 月 1 日 下午 5:16

  2. yurnmehere

    是否可以跟踪 WebSockets?

    2013 年 7 月 1 日 下午 3:34

    1. Nick Fitzgerald

      有计划!

      请关注这里:https://bugzilla.mozilla.org/show_bug.cgi?id=885508

      2013 年 7 月 1 日 下午 4:08

  3. Bob

    干得好,伙计们!

    在 Firefox 开发者工具中使用源映射是否有额外的技巧?

    我的 TypeScript 项目中添加了一个调试器;语句并生成了生产 JS 和映射文件。
    我已经在调试器配置菜单中选中了“显示原始源代码”项,但调试器仍然在遇到调试器;语句时进入 JS 文件。

    这在 Chrome 开发者工具中可以正常工作,因此文件应该存在。

    谢谢!
    Bob

    2013 年 7 月 2 日 上午 3:05

  4. Bob

    回复我之前的内容

    我想这和以下内容有关,
    https://bugzilla.mozilla.org/show_bug.cgi?id=870140

    2013 年 7 月 2 日 上午 4:35

    1. Nick Fitzgerald

      嗨,Bob!

      我认为这是一个我们还没有记录的新错误。您使用的是哪个版本?您是否愿意创建一个小型测试用例或重现步骤并提交错误?

      https://bugzilla.mozilla.org/enter_bug.cgi?product=Firefox&component=Developer%20Tools%3A%20Debugger

      谢谢!

      2013 年 7 月 2 日 上午 8:51

  5. Bob

    已完成,https://bugzilla.mozilla.org/show_bug.cgi?id=889492

    2013 年 7 月 2 日 上午 11:37

  6. Luke

    这些都是很棒的功能,但我一直在特别期待开发者工具 API 文档,或者这个答案中提到的突出显示 API
    http://stackoverflow.com/questions/17120754

    有了更多文档化的 API,我们可以希望看到一些那些方便的 Firebug 附加组件切换到 Firefox。

    感谢您在这些工具上取得的巨大进步,期待 23 和 24!

    2013 年 7 月 2 日 下午 8:55

  7. Bart

    非常棒的文章。我需要开始使用这个 FF 开发工具。谢谢

    2013 年 7 月 4 日 上午 3:18

本文的评论已关闭。