CSS 源代码映射支持、网络性能分析等 - Firefox 开发者工具 第 29 集

Firefox 29 刚刚升级到 Aurora 发布渠道。这意味着现在是时候报告在这个版本中您将在开发者工具中看到的一些重大更改了。

更美观的工具

除了新功能外,我们一直在更新暗色和亮色主题的外观。亮色主题已完全重新设计,并且两种主题在整个工具箱中都具有更一致的设计。您可以在 工具箱设置 中更改当前主题。 (开发笔记)

网络监视器

网络监视器现在会显示浏览器加载页面不同部分所需的时间。这将有助于测量应用程序的网络性能,无论是在首次运行还是在缓存预热的情况下。 (开发笔记)

要打开性能分析工具,请单击网络面板中的秒表图标。有关更多信息,请观看下面的屏幕截图或 在 MDN 上阅读更多内容

您现在可以将图像请求复制为 Data URI。只需右键单击图像请求,从上下文菜单中选择该项,Data URI 就会出现在您的剪贴板中。 (开发笔记)

检查器

我们 更新了检查器高亮显示行为,以使高亮显示功能更符合其他工具。 (开发笔记)

CSS 变换预览工具提示已添加到 CSS 规则视图中。现在,如果您将鼠标悬停在 CSS 变换上,您将获得一个带有变换可视化的工具提示。获取 Firefox Nightly 或 Aurora 的下载版本,并在一些 实况 CSS 变换示例 上试用。 (开发笔记)

CSS 规则视图现在支持一次粘贴多个 CSS 声明,例如 background: #ccc; color: red(开发笔记)

就像在网络面板中一样,您现在可以将 <img> 元素复制为 Data URI。 (开发笔记)

样式编辑器

CSS 源代码映射支持已添加到样式编辑器中。 (开发笔记),并且 CSS 属性和值现在将在样式编辑器中自动完成。 (开发笔记)

想了解更多?我们发布了一篇关于 在 DevTools 中使用源代码映射实时编辑 Sass 和 Less 的文章。

调试器

我们在调试器中添加了一个经典的调用堆栈列表,位于源代码列表旁边。 (开发笔记)

调试器中有一个新的“启用/禁用所有断点”按钮。这将一次切换所有现有断点的活动状态,以允许快速在正常使用和调试之间切换。 (开发笔记)

您现在可以从调试器中突出显示和检查 DOM 节点。如果您将鼠标悬停在变量列表中的 DOM 节点上,它将在页面上突出显示,如果您单击检查图标,该节点将在检查器选项卡中打开。此功能也可在控制台输出中使用。 (开发笔记)

漂亮打印现在保留代码注释。我们正在使用开源 pretty-fast 美化器,因此它应该相当快。如果不是,请务必告知我们。 (开发笔记)

控制台

console.trace 改进。调用堆栈与其他输出内联显示,并包含指向调试器中每行的链接。 (开发笔记)

我们还改进了控制台对象输出,以根据对象类型显示更多信息。 (开发笔记)

代码编辑器

代码编辑器可以在整个工具中看到,例如在 Scratchpad、样式编辑器和调试器中。以下是在此版本中您将看到的一些更新

  • 编辑器中的代码折叠。 (开发笔记)
  • Emacs 和 VIM 键绑定现在可在代码编辑器中使用。要启用它们,请打开 about:config,并将“devtools.editor.keymap”设置为“vim”或“emacs”,然后重新启动 DevTools。 (开发笔记)
  • ES6 语法高亮支持 (开发笔记)

衷心感谢所有为本版本贡献 DevTools 的人(43 人)!这是一个 针对 Firefox 29 解决的所有 DevTools 错误列表

您有反馈、错误报告、功能请求或问题吗?像往常一样,您可以在此处评论或通过 @FirefoxDevTools 与团队联系。

关于 Brian Grinstead

更多 Brian Grinstead 的文章...

关于 Robert Nyman [荣誉编辑]

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

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


38 条评论

  1. Mindaugas J.

    这个列表看起来非常令人印象深刻。尤其是调试器/控制台。很棒的工作。我一定会尽快测试一下。

    2014 年 2 月 11 日 下午 10:18

  2. Stefan B

    相当相当相当不错!

    2014 年 2 月 11 日 下午 10:54

  3. Tin Aung Lin

    这太棒了,太可爱了。向更美好、更具功能性和美感的世界迈进。
    使用 Firefox DevTools 不会像以前那样痛苦了。

    谢谢
    Tin Aung Lin

    2014 年 2 月 11 日 下午 11:24

  4. Thomas

    很棒的更新!

    有一点,
    预热缓存和空缓存中资源的顺序是否应该相同?通常它们并不相同。

    谢谢!

    2014 年 2 月 11 日 下午 11:42

    1. Victor Porof

      不,它们按总请求大小排序。

      2014 年 2 月 11 日 下午 11:49

  5. tarsolya

    在所有源代码中搜索?:)

    2014 年 2 月 11 日 下午 12:38

    1. tarsolya

      取消,找到了 :) 我怎么会错过它。

      2014 年 2 月 11 日 下午 12:42

      1. Brian Grinstead

        没问题 :). 为了其他人的参考,调试器中搜索源代码时的过滤器快捷键列表在此处提供:https://mdn.org.cn/en-US/docs/Tools/Debugger#Script_filter。要搜索所有源代码,您可以使用“!”字符开始搜索。

        2014 年 2 月 11 日 下午 12:51

  6. al3xa

    如果可以从控制台/Scratchpad 检查 DOM 元素就好了。更不用说期待已久的 Scratchpad 中的代码补全了。但是它很棒!变换预览和 Emacs 绑定 - 太棒了!!!

    2014 年 2 月 11 日 下午 16:47

    1. Brian Grinstead

      谢谢!我们为从控制台悬停/检查 DOM 元素开了一个错误:https://bugzilla.mozilla.org/show_bug.cgi?id=757866。我会查看 Scratchpad - 我想它现在应该可以实现,因为 https://bugzilla.mozilla.org/show_bug.cgi?id=952277 已经合并,因为它使用与调试器相同的组件来显示对象。

      2014 年 2 月 11 日 下午 20:16

      1. al3xa

        太棒了,感谢您的反馈!我会密切关注此事。

        2014 年 2 月 12 日 上午 00:47

      2. robcee

        Brandon Benvie 正在将 tern.js 集成到 Scratchpad 中以实现代码补全。还不确定他是在解决错误还是还没有。

        2014 年 2 月 12 日 上午 09:58

    2. Mike Ratcliffe

      您可以做的是使用检查器检查一个节点,然后在 Scratchpad 或 Web 控制台中使用 $0 引用该节点。

      2014 年 2 月 12 日 上午 03:18

  7. keripix

    哦,不,Firefox 29 离我们还很遥远。

    2014 年 2 月 12 日 上午 01:37

    1. Brian Grinstead

      是的,但如果您获取 Aurora 的副本 (https://www.mozilla.org/en-US/firefox/aurora/) 或 Nightly (http://nightly.mozilla.org/),那么您现在就可以开始使用这些更新的工具了。

      2014 年 2 月 12 日 上午 05:56

  8. Matěj Cepl

    仍然希望有一种方法可以调查当前资源(应用程序缓存、localStorage、indexedDB)。我不使用 Chrome 做任何事情,但这是我的最后诱惑。

    2014年2月12日 上午7:00

    1. Brian Grinstead

      是的,这是非常必要的,目前正在进行中。您可以在这里跟踪进度:https://bugzilla.mozilla.org/show_bug.cgi?id=926449

      2014年2月12日 上午8:59

  9. Fernando

    你好!

    如何像 Chrome 一样,明确显示调用 `console.log`(或在控制台中显示任何其他消息)的脚本,并支持 Source Maps?我认为这对大多数前端开发人员来说将非常有用。

    也许只针对下一个 Firefox 版本,但这也会很好。=)

    谢谢

    2014年2月12日 上午10:20

    1. Brian Grinstead

      在记录的消息旁边有一个链接,其中包含指向调用 console.log 的文件和行的链接。此功能尚未添加对 Source Map 的支持,但可以在以下位置跟踪进度:https://bugzilla.mozilla.org/show_bug.cgi?id=952127

      2014年2月12日 上午10:40

      1. Fernando

        哇,谢谢!

        看起来我建议的内容在以下问题中:https://bugzilla.mozilla.org/show_bug.cgi?id=670002,而且看起来最近没有更新 :/

        但是没关系。无论如何,感谢您的回复!=)

        2014年2月12日 下午5:02

  10. Mike

    喜欢 FF 开发工具改进的速度。有没有可能在某个时候实现 https://bugzilla.mozilla.org/show_bug.cgi?id=962491(或类似的东西)?这将使调试由 JS 事件添加的 CSS 变得容易得多。

    2014年2月12日 下午1:04

    1. Brian Grinstead

      感谢您的反馈!我在错误报告中回复了,以便我们可以在那里进行更多讨论。

      2014年2月12日 下午4:56

  11. Nitij

    看起来很酷!..!!

    2014年2月12日 下午10:46

  12. Christian

    当我获得 Aurora 或 Beta 版 Firefox 时,它们会覆盖我当前的 Firefox 版本,因此我只可以使用一个版本。我不是 Chrome 的忠实粉丝,但至少使用 Chrome,我可以下载并使用 Chrome Canary,并且仍然可以单独使用当前版本的 Chrome。或者也许这个问题自从我上次检查以来已经在 Firefox 中得到解决?

    2014年2月13日 上午1:44

    1. Victor Porof

      您当然可以在同一时间使用不同的 Firefox 版本。看看这个:https://mdn.org.cn/en-US/docs/Mozilla/Multiple_Firefox_Profiles

      2014年2月13日 上午2:45

  13. Ivan Dejanovic

    我必须诚实地说,在过去两年中,您在开发工具方面取得了很大进展。我注意到了一些问题,我不知道您是否在您的问题跟踪器中记录了这些问题。

    如果我尝试执行跨域 AJAX 请求,我通常会因为打字错误而犯错,Chrome 会在控制台中打印清晰的错误消息。Firefox 只是忽略了我的尝试,我没有收到任何反馈。

    如果我的脚本中存在错误,导致在页面初始化时抛出异常,Chrome 会让我打开有问题的脚本,设置断点并找出问题所在。Firefox 不会在调试器面板中显示有问题的脚本。有时,即使是正常的脚本也不会显示在调试器中。

    如果我把开发工具窗口缩窄,有时是必要的,控制台、检查器、调试器只剩下图标,但如果窗口真的太窄,图标就会从右边的窗口“掉下来”。因此我无法访问所有选项。在小屏幕上工作时,有时使用较窄的开发工具窗口会很不错。

    请修复这些问题,尤其是前两个,如果您可以修复的话。我认为有时不得不求助于 Chrome 来解决问题是件很可惜的事情。

    继续努力,做好工作。

    2014年2月13日 上午7:14

  14. Omega

    是的!发光的冰棍消失了!新的高亮行为非常方便。

    2014年2月13日 上午11:44

  15. toupeira

    很棒的改进!开发工具已经足够成熟,我现在对它们感到满意,终于可以移除 Firebug 了。

    不过还有一些小问题

    – 在 Linux 上,等宽字体大小仍然太小,我通过将“.devtools-monospace { font-size: 100% !important; }”添加到 userChrome.css 来解决这个问题,为什么这不是默认值?

    – 控制台中的对象检查器仍然无法关闭,除非关闭并重新打开控制台

    – 控制台中无法使用对象字面量。例如,“{}”返回“undefined”,“{ foo: ‘bar’ }”返回“bar”,“{ foo: ‘foo’, bar: ‘bar’ }”引发语法错误

    – Vim 键绑定与一些开发工具键冲突,例如,在检查器中编辑 HTML 时,Escape 会退出 HTML 编辑模式而不是 Vim 的插入模式,并且 Ctrl+] 在面板之间切换的快捷键会被样式编辑器吞噬

    2014年2月13日 下午12:48

    1. Brian Grinstead

      关于 Linux 上的字体大小,已经对此进行了讨论(听起来有些人有不同的结果,尤其是如果他们更改了系统范围的默认值):https://bugzilla.mozilla.org/show_bug.cgi?id=900173。您介意在其中添加评论,提供有关您所见内容和字体设置的更多信息吗?我可以再看看。

      2014年2月13日 下午1:01

    2. Brian Grinstead

      您可以使用 Escape 关闭控制台中的对象检查器,但这确实可以更加明显。

      关于对象字面量输出与预期不符,我已经提交了 https://bugzilla.mozilla.org/show_bug.cgi?id=972530

      对于 Vim 键绑定导致的副作用,我已经提交了:https://bugzilla.mozilla.org/show_bug.cgi?id=972534

      2014年2月13日 下午1:16

  16. Tiago Celestino

    我回来了 Firefox :)

    2014年2月15日 上午8:23

  17. Tanima

    很高兴看到您在 Mozilla 开发工具方面取得了令人印象深刻的进展。有时我会遇到一些问题,无法浏览所有网站。显示为浏览器无法加载此网站。我不明白这个问题。

    2014年2月16日 上午4:10

  18. Tanima

    我遇到了相同的问题,有没有可能在某个时候实现 https://bugzilla.mozilla.org/show_bug.cgi?id=962491(或类似的东西)?这将使调试由 JS 事件添加的 CSS 变得容易得多。

    2014年2月16日 上午4:13

  19. Hochzeitsfotograf

    感谢您关于不同 Firefox 版本的提示!很棒!

    2014年2月19日 下午12:46

  20. Cezary Tomczyk

    是否有计划为调试器实现“事件”?目前没有办法查看哪些类型的事件附加到指定的 DOM 元素。

    2014年2月24日 下午1:31

    1. Brian Grinstead

      如果我理解正确,这正在标记视图中进行开发:https://bugzilla.mozilla.org/show_bug.cgi?id=736078。WIP 看起来像这样:http://i.imgur.com/VZcbCX1.png

      2014年2月24日 下午1:36

      1. Cezary Tomczyk

        嗯,两年了,状态还是“已分配”,优先级为 P3 :-( 我以为这应该是 P1,因为大多数开发人员每天都在玩弄事件。

        顺便说一句,我个人认为这里颜色太多了。只是分散注意力。也许当事件名称上的蓝色和灰色背景被移除时,它会更好。

        2014年2月24日 下午1:52

  21. Jose

    做得好,而且视觉效果很棒。在某些功能方面仍然落后于 Firebug,比如 DOM 属性探索和动态加载的 JavaScript 文件的调试,这些功能对于复杂的 Web 应用程序来说是绝对必要的,但它正在以良好的速度和风格发展;)

    2014年2月27日 上午10:33

本文的评论已关闭。