开发者版 41:在标签页中查看源代码、截图元素、HAR 文件等

几周前,我们介绍了 新的性能工具,我们还谈到了 Firefox Dev Tools 团队如何花费大量时间专注于用户反馈以及我们所谓的“完善”错误 - 通过 我们的 UserVoice 反馈渠道Bugzilla 报告的错误。尽管 Firefox 41 对我们来说是一个很短的发布周期,但这种对用户反馈的关注继续收到回报——我们社区一直要求的几个新功能及时发布。这里有一个更详细的介绍

截图检查器中选定的节点

新贡献者 Léon McGregor 实现了一个有趣的建议,该建议发布在 UserVoice 上。这个功能已经可以通过 gcli 的“screenshot”命令使用很长时间了,但作为上下文菜单项,它更易于发现和使用。创建截图后,Firefox 会将其复制到您配置的下载目录中。

Create a screenshot of the currently selected element.

创建当前选中元素的截图。

在标签页中查看源代码

从 Firefox 41 开始,当您右键单击并选择“查看页面源代码”时,html 源代码视图将在标签页中打开,而不是在新窗口中打开。这是一个非常受欢迎的请求,我们本来可以更早地发布它,但最初看起来很简单的一个改变实际上非常复杂:请参见下面链接的错误以了解所有细节。重要的是,我们还确保“查看页面源代码”提供您从 Firefox 缓存中获取的页面源代码——我们不会获取新版本。

'View source' always opens in a tab now.

查看页面源代码现在始终在标签页中打开。

添加规则按钮

能够在您工作时将新规则添加到检查器中非常方便,这是 Firebug 中的一个功能,用户已经要求了很长时间。在本轮循环中,我们花了一些时间来完善我们的实现,并除了上下文菜单命令之外,还提供了 UI 按钮的便利性。

We've added a button to the inspector so you can quickly add a new css rule.

我们在检查器中添加了一个按钮,这样您就可以快速添加新的 css 规则。

“复制为 HAR”和“全部保存为 HAR”

Firebug 中的另一个功能特别受 Selenium 用户欢迎,就是能够为当前页面导出 HAR 存档

You can now export HAR archives directly from the network monitor.

您现在可以从网络监视器直接导出 HAR 存档。

其他值得注意的更改

自 6 月 1 日以来,Firefox 中已修复了 140 个开发者工具错误。代表团队,我要感谢所有报告错误、测试补丁并花费大量时间改进 Firefox 开发者版的人,尤其是修复错误的贡献者:edoardo.putti、fayolle-florent、15electronicmotor、veeti.paananen、sr71pav、sjakthol、ntim、MattN、lemcgregor3 和 indiasuny000。谢谢!

立即下载 Firefox 开发者版 41。让我们知道您的想法以及您希望在未来版本中看到 哪些功能。我们会认真倾听。

关于 Jeff Griffiths

Jeff 是 Firefox 开发者工具的产品经理,偶尔也是开源 Web 黑客,总部位于加拿大不列颠哥伦比亚省温哥华。

更多由 Jeff Griffiths 撰写的文章…


10 条评论

  1. Jesus Perales

    哇!开发者工具适合所有人!

    2015 年 7 月 8 日 下午 2:31

  2. Adrian@Dotcomsecurity

    是啊,很棒!谢谢!

    2015 年 7 月 8 日 下午 3:09

  3. Ivan

    太棒了... :)
    我特别喜欢“节点截图”功能!

    有一个问题:当我打开 (*.js|*.css) 文件时,源代码没有高亮显示,这是有原因吗?

    我想报告一个错误,但这个功能太基本了,以至于我认为 Firefox 在 40 版本之前(是的,是 40 版本)没有实现它是有充分理由的。

    最奇怪的是:它在包含 css 和 javascript 内联的 html 中可以正常工作,在我看来,这更难实现...

    顺便说一句,感谢你们的辛勤工作...

    2015 年 7 月 9 日 上午 5:34

    1. Jeff Griffiths

      您能更具体地说明您看到哪些源代码没有高亮显示吗?在我看来,各种工具(检查器、调试器、样式编辑器、网络监视器)中的各种资源(html、css、js)都有高亮显示。

      2015 年 7 月 9 日 上午 11:53

      1. Ivan

        嗨 Jeff,

        我指的是打开(就像网页一样)一个 js 文件。

        例如
        打开 https://2r4s9p1yi1fa2jd7j43zph8r-wpengine.netdna-ssl.com/wp-includes/js/jquery/jquery.js?ver=1.11.2 URL。

        该文件在浏览器中没有高亮显示(甚至在“view-source:https://2r4s9p1yi1fa2jd7j43zph8r-wpengine.netdna-ssl.com/wp-includes/js/jquery/jquery.js?ver=1.11.2”中也没有)...

        在页面信息中显示“application/x-javascript”(我使用代理,有时会更改类型)...

        2015 年 7 月 10 日 上午 5:08

        1. Jeff Griffiths

          没错,查看源代码不会(也从未)对这些文件进行语法高亮显示。我已记录了一个错误来跟踪这个问题

          https://bugzilla.mozilla.org/show_bug.cgi?id=1183344

          2015 年 7 月 13 日 下午 2:29

          1. Ivan

            谢谢 Jeff。

            我会将该链接收藏起来;)

            2015 年 7 月 13 日 下午 7:18

    2. Nick Fitzgerald

      对于非常大的文件,我们会禁用语法高亮显示,因为编辑器的性能会随着这些文件而下降。

      2015 年 7 月 9 日 下午 9:01

  4. Toby

    似乎新的查看源代码行为会覆盖任何外部编辑器设置?我更喜欢在 ST3 中打开它,但我发现切换 about:config 中的 view_source.tab 会导致它在一个新窗口打开,而不是在外部编辑器中打开,即使我设置了 view_source.editor.external=true。

    2015 年 7 月 14 日 中午 12:40

    1. Toby

      我看到这个问题至少被记录了:https://bugzilla.mozilla.org/show_bug.cgi?id=1165599

      2015 年 7 月 15 日 下午 1:22

本文的评论已关闭。