Mozilla Hacks

盒子模型高亮显示，Web 控制台改进，Firefox OS HUD 等等 - Firefox 开发者工具第 30 集

Avatar photo 由 Brian Grinstead，Robert Nyman [荣誉编辑]

发布日期 2014 年 3 月 25 日 在 开发者工具 和 特色文章

Firefox 30 刚刚升级到 Aurora 发布频道，所以让我们看看在这个版本中最重要的 DevTools 变化。

检查器

我们最需要的功能之一是突出显示页面上元素的盒子模型区域。我们很高兴地宣布，此功能已在 Firefox 30 中上线。一个很棒的特性是，盒子模型高亮显示的颜色比以前更清晰地匹配检查器右窗格中找到的盒子模型图。

查看 检查器文档 了解更多关于新功能的信息，或者只是查看下面的截图和简短视频。

Inspector box model highlighter

CSS 规则视图中有一个新的字体系列工具提示。将鼠标悬停在字体系列值上以查看字体的内联预览。（开发笔记）

Inspector font family preview

Web 控制台

Web 控制台有一些重大改进，以帮助查看和导航输出。

  • 对控制台输出中的所有 JS 对象和函数进行更好的高亮显示 (开发笔记)
  • 从控制台高亮显示并跳转到节点 (开发笔记)
  • 我们添加了对 console.count() 的支持 (开发笔记）。

Sample console output

Highlight and jump to nodes from console

在控制台中运行 cd() 命令会在 iframe 之间切换范围。在 cd 命令文档 中了解更多信息。 (开发笔记)

Console cd() command

您可以从 Mihai 了解有关 Web 控制台正在进行的更改。他还一直在 记录扩展作者的 Web 控制台 API。

Firefox OS

网络监控器现在可以与 Firefox OS 一起使用。 (开发笔记)

Firefox OS 开发者 HUD 中现在有内存跟踪 (开发笔记) 和卡顿跟踪 (开发笔记)。您可以在 Paul 的 Firefox OS: 跟踪重绘和事件循环滞后 中了解有关卡顿（又称“事件循环滞后”）的更多信息。

Firefox OS Developer HUD

网络监控器

网络监控器有一个新的外观，以及一些新功能。

  • 网络时间轴的设计已更新，这实际上提高了面板上的滚动性能。 (开发笔记)
  • 将鼠标悬停在具有图像响应的请求上现在会显示一个带有图像的弹出窗口。 (开发笔记)
  • 具有图像响应的网络请求现在会在文件名附近显示一个缩略图。 (开发笔记)

Network Monitor Timeline UI

具有类似 JSON 的响应的网络请求将显示对象预览，即使响应类型为纯文本也是如此。 (开发笔记)

JSON Response in Network Monitor

工具箱

控制台快捷键 (cmd+alt+k 或 ctrl+shift+k) 现在有新行为。它现在始终将焦点设置在 Web 控制台的输入行上，如果需要则打开工具箱，但从不关闭它。有关此更改的更多详细信息，请访问 robcee 的博客。 (开发笔记)

为了节省顶部工具栏的空间，现在可以选择隐藏命令按钮，如 Scratchpad。现在默认情况下启用的唯一按钮是检查元素、拆分控制台和响应模式。有关此更改的更多信息，请访问 devtools 邮件列表。 (开发笔记)。要启用 Scratchpad、Paint Flashing 或 Tilt，只需单击选项面板中的复选框即可。

Enabling Command Buttons on Toolbar

我们要特别感谢所有 46 位为 DevTools 贡献补丁的人！以下是 Firefox 30 已解决的所有 DevTools 错误列表。

您是否有反馈意见、错误报告、功能请求或问题？与往常一样，您可以在此处发表评论，或通过 @FirefoxDevTools 与团队联系。

关于 Brian Grinstead

更多由 Brian Grinstead 撰写的文章...

关于 Robert Nyman [荣誉编辑]

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

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

50 条评论

  1. Ethan

    这一切都太棒了，伙计们。非常感谢您的更新，以及所有人的辛勤工作！

    有一个问题：是否可以创建新的选择器（以及编辑现有的选择器）？样式编辑器很棒，但感觉与检查工作流程有点脱节。

    再次感谢！喜欢所有这些活动。

    2014 年 3 月 25 日 09:44

    1. Patrick

      是的，这绝对是我们的目标。虽然我不知道是否有任何现有错误报告，但我们的目标是同步检查器的 CSS 规则视图和样式编辑器，并以各种方式进行同步。

      2014 年 3 月 25 日 09:48

      1. Brian Grinstead

        我们确实为此打开了一个错误报告：https://bugzilla.mozilla.org/show_bug.cgi?id=966896。确保规则视图和样式编辑器同步是第一步，但这需要添加一个 UI 来实现。

        2014 年 3 月 25 日 10:33

      2. Luke

        我之前做过一些调整，用于右键单击新建规则功能：https://addons.mozilla.org/en-US/firefox/addon/devtools-tweaks/

        但它添加的右键单击新建规则功能与在样式编辑器选项卡中添加新样式相同。

        直接从检查器编辑 CSS 选择器将很棒 :)

        2014 年 3 月 26 日 17:45

    2. Robert Nyman [编辑]

      感谢您的赞赏，Ethan - 您的认可对我们意义重大！

      2014 年 3 月 25 日 10:27

  2. Hervé Renault (@HerveRenault)

    太好了！谢谢您，Mozilla。
    我几天前用法语写了一篇关于高亮显示功能的博客文章
    http://mozillazine-fr.org/bonne-nouvelle-pour-les-developpeurs-web-dans-firefox-nightly/

    2014 年 3 月 25 日 10:00

    1. Robert Nyman [编辑]

      感谢分享，Hervé！

      2014 年 3 月 25 日 10:27

  3. Jeff

    控制台命令行是否可以与脚本调试器集成？在单步执行代码时，手动在当前上下文中键入命令以测试和尝试操作非常有用。

    2014 年 3 月 25 日 10:08

    1. Brian Grinstead

      在断点停止时，控制台范围实际上确实会更新。所以，如果您按下 Esc 或单击拆分控制台按钮以将其显示在调试器旁边：https://mdn.org.cn/en-US/docs/Tools/Web_Console#The_split_console

      2014 年 3 月 25 日 10:11

  4. starwed

    有时候我会不小心把 console.log 命令写得太冗长，导致控制台有点卡住。你可以从调试选项卡停止执行，但当控制台卡住时，切换实际上需要相当长的时间！

    如果可以在每个面板中添加简单的暂停功能就好了。（也许已经存在？）

    2014 年 3 月 25 日 下午 10:23

    1. Brian Grinstead

      我认为没有办法从控制台面板暂停功能，但如果你能提供一些导致控制台卡住或其他性能问题的日志语句示例，我们很乐意查看。

      如果你能提供一个简单的测试用例来演示问题，你可以在开发者工具中的“控制台”组件中提交一个错误：https://bugzilla.mozilla.org/enter_bug.cgi?product=Firefox。

      2014 年 3 月 25 日 下午 11:31

  5. somedude

    我还是更喜欢 firebug…

    2014 年 3 月 25 日 下午 12:27

    1. Robert Nyman [编辑]

      感谢您的评论。如果您能概述您在 Firebug 中喜欢但在开发者工具中缺少的功能，那将对我们有很大的帮助。

      2014 年 3 月 25 日 下午 12:40

  6. Nate

    用于框模型的这些颜色对于色盲的人来说真的很糟糕。我花了几秒钟来晃动头部，从不同的角度观看，才发现有不止两种颜色。

    2014 年 3 月 25 日 下午 12:46

    1. Brian Grinstead

      现在叠加在页面上的颜色具有 0.4 的透明度。您认为如果我们使叠加层稍微不透明一些，是否有帮助？基础颜色被选择为与其他开发者工具中使用的颜色匹配，以便人们能够熟悉它们。

      2014 年 3 月 25 日 下午 12:54

      1. Srap

        也许可以在颜色旁边添加一些图案，例如：填充是水平条纹，边距是垂直条纹，X 是点状等等。

        2014 年 3 月 26 日 上午 02:29

    2. Brian Grinstead

      好的，我正在处理一个错误，以提高页面上框模型区域的可见性：https://bugzilla.mozilla.org/show_bug.cgi?id=989053。如果您有任何反馈意见，请在那里评论。

      2014 年 4 月 2 日 上午 09:22

  7. Jaroslav Matura

    说实话，我不喜欢新的开发者工具的外观，尤其是颜色。新功能很棒，我非常喜欢它们，但它们的“外套”与当前稳定的开发者工具（FF v28）相比很丑。

    此外，我赞赏显示/隐藏某些按钮的选项，但如果能有一个选项将元素选择工具移回它所在的位置，那就太好了。我只是不喜欢将控件放在右边。感觉不太……对劲。

    2014 年 3 月 25 日 下午 16:15

    1. Brian Grinstead

      顺便说一下，如果您不喜欢浅色主题，您始终可以在选项面板中切换到深色主题。

      2014 年 3 月 25 日 下午 18:25

  8. Eric

    很棒的工作……在网络监视器中，我希望看到一种快速查看使用 HTTPS 加载/未加载资源的方法（也许是一个挂锁？……这在调试 HTTPS 错误时非常有用，例如，一些资源通过 HTTP 而不是 HTTPS 加载）。

    2014 年 3 月 25 日 下午 17:10

    1. Jeff Griffiths

      有趣的想法！我已经记录了这个错误来捕捉它，您可以随时关注：https://bugzilla.mozilla.org/show_bug.cgi?id=988121

      2014 年 3 月 26 日 上午 10:45

  9. Alex

    这些都是很棒的补充！非常感谢！

    只想报告一个小错误：在最新更新中，关闭开发者工具会将文档的 scrollTop 重置为 0，这有点让人讨厌……

    2014 年 3 月 25 日 下午 17:17

    1. Brian Grinstead

      谢谢！我已经提交了一个错误来解决这个问题：https://bugzilla.mozilla.org/show_bug.cgi?id=988102

      2014 年 3 月 25 日 下午 18:16

  10. Mike

    感谢所有改进：)

    2014 年 3 月 25 日 下午 20:05

  11. Luke Michaels

    你们做的很棒，谢谢 :-)

    2014 年 3 月 25 日 下午 22:46

  12. mork

    框模型的突出显示是我在 Chrome 中进行 CSS 工作的原因，但现在我可以在 Nightly 中完成所有工作。感谢 Mozilla。:)

    2014 年 3 月 26 日 上午 04:12

  13. Niclas

    仍然困扰我的一件事是网络请求视图的大小。它仍然限制在固定的最大宽度吗？有时我需要检查请求头甚至响应主体，但它永远无法适应微小的视图。

    2014 年 3 月 26 日 上午 07:57

    1. Brian Grinstead

      实际上，这个问题也在这个版本中得到修复，错误编号：https://bugzilla.mozilla.org/show_bug.cgi?id=899727。所以如果你下载 Aurora，应该不再有最大宽度了。

      2014 年 3 月 26 日 上午 08:10

  14. Mick

    这绝对是无用的。Firefox 团队失去了与现实的联系。

    检查器、网络监视器、浏览器代码中的工具箱——地球上谁需要它？不是用户，不。只有开发者，你会回答。开发者会将 FireBug 改成那个检查器吗？不可能。那为什么要浪费时间呢？为什么要膨胀代码？为什么要让已经缓慢的浏览器变得更慢？

    Firefox OS——伙计，回到地球吧。你关闭了 Firefox for Metro，因为只有 1000 名用户在全球范围内“每天”测试它（注意：不是“使用”，只是“测试”）。而你正在谈论“bla-bla 移动操作系统”，其市场份额与 0% 究竟有多大差异？

    回到你的用户身边吧。回答用户在“Chrome vs. FireFox”主题下提出的问题#1——“什么时候我们才能看到每个标签都在单独的进程中”。

    除非你真正“面对”你的用户，否则 FireFox 将仍然是“过去那件不错的东西”。

    PS. 很好奇，“让 FireFox 落后于 Chrome”是否是 Google-Mozilla 赞助的主要部分？

    2014 年 3 月 28 日 上午 09:56

    1. Jeff Griffiths

      我将回答你与这篇文章相关的实际问题，对于其他问题我没有任何评论。

      * 我们非常小心，不会在开发者打开工具箱之前加载任何工具代码，任何不符合这种情况的情况都被视为错误。你认为内置工具对普通用户不利，这是基于一些错误的假设。

      * 多进程 Firefox 正在被重新积极开发（它被搁置了一段时间），并且可以在 nightly 中测试。目前尚不清楚我们何时会发布它，因为需要解决一些问题，例如插件兼容性，但安全性和性能优势似乎值得付出。

      * 我们专门询问过 Firebug 用户，为什么他们不使用我们的工具，这个版本是我们过去一年为弥补这些差距而进行的许多努力的结晶。到目前为止，我还没有看到很多不切换的原因（也许是扩展程序，但我们也在努力解决这个问题），但我非常乐意听取用户提出的仍然存在差距的建议或错误。

      如果你有任何其他（希望是建设性的）反馈，请告诉我。

      2014 年 3 月 28 日 上午 10:22

      1. Mick

        感谢 Jeff，感谢你的跟进。

        很高兴你正在解决按需加载代码膨胀内存的问题。我确实尊重这一点。

        不要误会我的意思——我仍然认为浏览器代码中的开发者工具是一个错误的想法，浪费了你们的资源，因为更关键的变化需要更高的优先级。

        当我得知 FireFox 中出现了这种工具时，我感到很震惊，这对我来说非常明显，这是一个错误的方向。开发者使用 FireBug。你想在这场竞争中分散你的精力吗？

        我确实尊重你的工作——它令人印象深刻。但这只是开发者使用 FireBug 的工作的影子。

        如果你想超越竞争对手浏览器的开发者工具，那就为 FireBug 做贡献吧。它已经优于它们。

        PS. 关于你的一点琐事——当一位 IT 人员向妈妈和奶奶推荐浏览器时，她们使用的是旧的标准电脑，他会安装哪一个？

        PPS. 我现在是 FireFox 用户，但这不是因为它比 Chrome 快。

        很抱歉破坏你的心情，但我真的希望你一切顺利，我希望你直面真相。

        此致，
        Mick

        2014 年 3 月 29 日 下午 13:45

        1. Robert Nyman [编辑]

          感谢你的反馈。关于 Firebug 和开发者工具的关系，我们在 Firefox 开发者工具和 Firebug 中对此进行了更详细的阐述。

          简而言之，我们一直在仔细探索和评估不同的选择，并决定这是最优和最有效的方式，可以满足大多数开发者的需求。

          我认为在功能和支持方面，另一个需要考虑的重要因素是，这不是一个非此即彼的决定——仅仅因为选择了一种功能/产品（例如，开发者工具），并不意味着不会投入其他领域（例如，网络浏览器性能）。

          我们同时开展了大量工作，我们正在尽最大努力使 Firefox 成为更好的产品，无论是对开发者还是对用户。

          感谢你使用 Firefox，希望我们能够继续改进它，以满足你的需求。

          2014 年 3 月 31 日 上午 02:35

        2. Jeff Griffiths

          你提到：“我确实尊重你的工作——它令人印象深刻。但这只是开发者使用 FireBug 的工作的影子。”

          你能对此更具体一些吗？

          2014 年 3 月 31 日 上午 09:25

  15. Hervé Renault

    “每个标签都在单独的进程中”？作为用户，我不确定我是否希望看到 Firefox 像 Chrome 一样消耗那么多的内存……

    2014 年 3 月 28 日 上午 10:19

    1. Jeff Griffiths

      事实上，我认为最初的实现是每个窗口一个进程，Firefox 的特权代码也位于一个单独的父进程中。我们显然非常关注内存使用问题（例如，Memshrink 项目在过去几年中取得了惊人的进步，我们希望保持我们以精简著称的声誉）。

      2014 年 3 月 28 日 上午 10:24

      1. Hervé Renault

        感谢 Jeff。我喜欢精简的恐龙 ;-)

        2014 年 3 月 28 日 上午 10:27

  16. goliatone

    太棒了！我开始用 FF 开发主要是因为 FireBug，然后一直把它作为我的主浏览器。当 FF 进入快速发布周期时，我使用的很多扩展程序都坏了，我整体的体验质量也下降了——性能似乎很差。
    与此同时，Chrome 对其开发工具进行了改进，性能也更好。我做了切换……
    目前 Chrome 的性能让我感到烦躁，我对 Chrome 的开发工具也不完全满意。FireFox 的开发工具几乎已经达到让我准备切换回来的程度了 :)
    感谢你们的辛勤工作！

    2014 年 3 月 30 日 下午 8:18

    1. Robert Nyman [编辑]

      感谢您的赞赏！

      2014 年 3 月 31 日 上午 2:37

  17. Jeff

    作为一名长期使用 firebug 的用户，我有几点评论。
    1 - 页面加载后，整个屏幕会闪烁蓝色，因为 Inspector 突出显示了“body”。这非常令人讨厌。我知道这有点小题大做，但几乎是不可接受的。
    2 - 当工具停靠在右侧时，元素选择器应该在左侧。它是按下次数最多的按钮。
    3 - 盒模型显示不错，但如果您可以直接在那里进行更改会更好。也就是说，将光标放在顶部边距数字中，然后输入新值，或使用向上/向下箭头进行更改。
    4 - 在盒模型中，当您选择外部项目时，如果它能显示总宽度（即宽度 + 填充 + 边距）作为一个快速参考，那就太酷了。
    5 - 我花了很长时间才在调试器中找到“内联 JavaScript”。由于内联脚本只是 URL，因此每次都会排序到不同的位置。如果它始终位于顶部，将非常方便。

    除此之外，这些工具很棒。这是我第一次考虑放弃 firebug，这非常重要！

    谢谢！

    2014 年 3 月 31 日 上午 8:19

    1. Jeff

      我忘记了一个。
      6 - 在 Inspector 的规则部分，更改值时，使用箭头键循环遍历可能的选项会非常有用。例如，对于 display:，在 inline、inline-block、block 等之间循环，而无需输入每个值。firebug 实现了这一点，非常有用。

      谢谢！

      2014 年 3 月 31 日 上午 9:04

      1. Jeff Griffiths

        这是非常宝贵的反馈，我非常感谢！

        2014 年 3 月 31 日 上午 9:26

    2. Dane MacMillan

      嗨，Jeff

      几周前我为 #1 提交了一个错误报告。

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

      2014 年 4 月 1 日 上午 7:57

      1. Jeff Griffiths

        太好了，谢谢！

        2014 年 4 月 1 日 下午 1:25

  18. Carolina

    很棒的文章，确实，有助于查看和导航输出的 Web 控制台改进很重要。之前的突出显示很难识别和查看。控制台的支持也非常出色。

    2014 年 4 月 1 日 下午 5:15

  19. Tim

    很棒的升级！现在终于开始使用这些开发工具了，而不是 firefug。
    仍然有一些小抱怨。不知道这里是否合适，但无论如何我都要发布它们。

    能否让某些 CSS 规则的“展开”箭头可选？现在，例如，填充、边距和背景前面总是有一些小的灰色箭头，用于展开字段并显示跨多个规则的所有选项。

    我个人永远不会使用它，我认为很多人也不会使用它。它实际上非常烦人，因为我认为它只会使界面杂乱无章。您可以在工具箱选项屏幕中添加删除这些箭头的选项吗？

    另外，我认为规则的行高可以至少减少 2 或 3 像素。这样会创建更好的概述。也许这也应该是可调节的？

    2014 年 4 月 2 日 上午 11:47

  20. aheu

    不错！
    上帝！但是，我是一个使用屏幕阅读器的盲人 Web 程序员。Firefox 开发工具无法访问 Web 控制台输出区域等。我希望 Firefox 能够更好地使用屏幕阅读器来读取开发工具。谢谢！

    2014 年 4 月 2 日 下午 5:54

    1. Mihai Sucan

      我们收到了几份关于开发工具的无障碍问题方面的错误报告。我们会尽快修复这些错误。感谢您测试和报告问题！

      2014 年 4 月 3 日 上午 4:39

  21. opo

    不知道为什么或如何，我的 Firefox 开发工具上的字体如此之小。我找不到应该从哪里设置正常值。现在它们就像 4-5 像素，使用记事本工作变得很头疼。
    谢谢
    （我使用 Linux (manjaro + xfce)，如果这有任何关联）

    2014 年 4 月 6 日 上午 7:44

    1. Mihai Sucan

      听起来像是一个已知的错误。请参见 https://bugzilla.mozilla.org/show_bug.cgi?id=760825

      2014 年 4 月 7 日 上午 8:57

  22. Hubert

    各位，如果可以复制 Network / Response 和 Network / Params 的内容就好了。只需右键单击并选择“全部复制”即可。期待您的回复，也许您可以将其添加到 nightly 版本中——我会立即下载（这是第一次），它对我来说非常重要/有用。现在我只能截屏或手动重新输入 :(

    2014 年 4 月 22 日 上午 3:06

本文的评论已关闭。