Mozilla Hacks

DevTools：你需要知道的一切

头像照片 作者：Patrick Brosset

发表于 2017 年 1 月 31 日 分类于 开发者工具 和 精选文章

年末总是非常忙碌，所以我们想最后回顾一下 2016 年的最后几个月。

去年 Firefox DevTools 发生了很多变化，尤其是在年底。我们重构了一些工具的努力开始取得成效，我们推出了一些很棒的重新设计，这些设计应该能使 Web 开发者的工作更轻松。

闪亮的新工具

我们发布了一个全新的 CSS 网格检查工具，这是首创（感谢 gabrielluong、helenvholmes 和 jensimmons）。

我们还发布了一个全新的、重新设计的控制台面板。目前它只在 Nightly 中启用，但它很快就会在所有地方启用。

我们投入了大量精力来创建 Reps，这些可重复使用的组件负责在控制台中显示各种输出。这很棒，因为这些 reps 是可共享的组件，我们已经开始在许多其他 DevTools 中使用它们。

感谢许多人，尤其是贡献者 nicolaschevobbe、bgrins、Honza、linclark 和其他人。

Screenshot of the new front-end for the web console panel in firefox

2016 年也是我们发布 全新的调试器前端 的一年！这是我们值得骄傲的成就，它为 2017 年更多精彩的工具发布奠定了基础。

我个人对我们在将这个项目迁移到 GitHub 后所产生的影响感到非常兴奋。2017 年初将是一个有趣的时期，我们可以尝试将更多代码迁移到 GitHub。我已经确信，在现阶段，这是我们应该做的事情，而我们应该感谢调试器项目让我们做到了这一点。

感谢 jasonlaster、jlongster、clarkbw 和 调试器 GitHub 社区，他们一直很棒。

Animation showing the new debugger front-end in action in Firefox.

好像这还不够让人印象深刻，我们还在 2016 年 11 月发布了 全新的、完全重新设计的 RDM（响应式设计模式）。

响应式视图不仅外观和工作方式更好，RDM 还带来了主要的全新功能，如网络限速等。感谢 jryans、zer0、gabrielluong。

没有 XUL。只有 Web。

2016 年是团队积极从工具中删除非标准 XUL 标记和 Firefox 独有的特权 JavaScript 的一年。事实上，我们能够在年底将检查器面板加载到正常的浏览器标签页中，这意味着检查器现在完全使用 HTML 和 Web API 构建。

感谢 bgrins、juliandescottes、tromey 的出色工作。

团队甚至还建立了一个 基于 npm 的本地开发工作流程，这样你就可以构建检查器，在浏览器标签页中打开它，进行更改，然后只需重新加载页面就可以在浏览器中看到更改！

接下来是网络面板，感谢 Honza、rickychien、steveck、gasolin 和贡献者 jsnajdr 的辛勤工作，该面板已经几乎完全 清除了 XUL 标记，并迁移到了 React！我们现在拥有一个新的、更现代的代码库，我相信人们会很乐意使用它。

说到 XUL 的终结，tatumcreative 通过 使用 HTML 和 React 重写工具箱选项卡 消除了大量旧代码。

检查器焕然一新

我们投入了大量精力来修复“纸割”错误 - 你知道的，那些让人讨厌的小（或不那么小）的烦恼，会让人难以使用我们的 UI。

非常感谢 ochameau 让检查器 速度更快，更 稳定，还要感谢 mikeratcliffe 修复了 检查器事件工具提示 的许多错误。

在我介绍检查器的时候，让我提一下一些其他值得注意的新功能：现在支持 CSS 第 4 级颜色（感谢 jerry 和 tromey），现在有 关闭标签和打开标签之间的视觉提示（感谢 juliandescottes），文本节点已突出显示（再次感谢 juliandescottes），以及 内联布局中的空白字符 易于调试（感谢 我 😀）。

随机但很棒

我们的工具也对RTL (从右到左) 用户稍微更好了一点，感谢贡献者 tomer。

服务工作者的状态 现在在about:debugging中可见，感谢 juliandescottes。

动画工具可以显示缓动效果，感谢 daisuke 和 birtles。

我们还编写了比以往更多的 React 代码。我很高兴我们的 UI 正在向一种通用风格靠拢。感谢 jlongster 为我们指明了方向！

mikeratcliffe 也在存储检查器上做了大量工作，因此它与 IndexedDB 协作得更好，能够删除 cookie，以及更多功能。

展望未来

在 2016 年，我们还花了一些时间规划未来，特别是为 新的性能工具 项目做准备。

我们进行了大量的讨论和设计工作。我们现在相信，我们将能够发布一个 Firefox 和 Web 开发者都会喜欢的很棒的性能工具。

感谢 jimb、tatumcreative、ejpbruel、mstange。

感谢所有为使 DevTools 在 2016 年变得更好做出贡献的人。感谢所有帮助修复 DevTools 错误的贡献者。不幸的是，我不能在这里全部提到他们。

让我们一起度过一个美好的 2017 年！

干杯！
Patrick

关于 Patrick Brosset

Patrick 管理着 Mozilla 的 DevTools 工程团队。

更多 Patrick Brosset 的文章…

25 条评论

  1. jxn

    这些进步真的太棒了！我的开发人员仍然抱怨控制台无法打开，或者有时打开时为空，没有可见的节点。另一个痛点似乎是无法实时编辑页面中加载的 JS。

    新的调试器会让重放调试更容易吗？

    我个人最想要的特性列表非常短
    * 在检查器中右键单击“复制属性值”
    * 网络面板中更多过滤器（例如 status_code > 200、method != GET、content-type、自定义标头）和列（完整路径！）选项
    * 改进的服务工作者调试（强制重新加载、UI 改进）

    现在可以通过使用 GitHub 项目来引入这些类型的更改，而无需从 HG 源代码构建 Firefox 吗？

    感谢你们的辛勤工作！

    2017 年 1 月 31 日 上午 9:22

    1. Patrick Brosset

      感谢 jxn！

      * 空控制台：这令人担忧。我们最近修复了一堆空的检查器错误，但我从未听说过空的控制台问题。如果你有机会重现这个问题，我们很乐意听到（可以在 Twitter 上 @FirefoxDevTools、论坛 https://discourse.mozilla-community.org/c/devtools 或 Bugzilla https://bugzilla.mozilla.org/enter_bug.cgi?product=Firefox&component=Developer%20Tools 上联系我们）。

      * 实时 JS 编辑：是的，我知道，这是一个很大的缺失部分。我们已经知道并讨论过很多次，但不幸的是，使用我们当前的架构实现起来非常困难。

      * 重放调试：还没有，但录制/重放肯定在进行中，我们甚至可能在 2017 年推出！敬请期待。

      * 复制属性值：嗯，有趣的特性。我发现我们已经有一个关于这个的错误：https://bugzilla.mozilla.org/show_bug.cgi?id=1231932
      它应该很容易添加，我们确实在检查器上下文菜单中有 2 个子菜单（复制和属性），我们可以用它们来添加这个新的菜单项。我会尽力让它继续进行。

      * 网络面板过滤器和 Service Worker 调试：我不能对此发表意见，但我将确保让合适的人知道这些。

      * 在 GitHub 上为 DevTools 做贡献：是的，完全可以为调试器面板做到这一点。不过，其他面板还没有，但我们现在正在对此进行试验，并且将在几个月内为将更多工具迁移到 GitHub 制定计划。
      话虽如此，我们确实有几种方法可以使用 HG 源代码为 DevTools 做贡献，但无需构建 Firefox。

      * 构建工件需要不到 5 分钟：https://mdn.org.cn/en-US/docs/Artifact_builds
      * DevTools 重新加载加载项不需要构建：https://mdn.org.cn/en-US/docs/Tools/Contributing/Contribute_on_nightly
      * 最近，我们在检查器面板中落地了基于 npm 的开发工作流程，因此即使你仍然需要下载 HG 源代码，你也可以在检查器文件夹中简单地执行 `npm install`、`npm start`，然后你就可以像在任何 Web 应用程序中一样开始使用检查器（在浏览器标签页中按 F5 刷新，无需构建）。不过，这仍然非常实验性。

      2017 年 2 月 1 日 上午 1:27

      1. jxn

        谢谢，
        * 我犯了一个错误，我的意思是空的检查器面板，而不是控制台。
        * 重放调试器、实时编辑和速度似乎是我与之交谈的大多数开发人员在 DevTools 中真正觉得缺乏的东西。
        * 谢谢您推动复制属性值！网络过滤器已经有了改进的工单 (https://bugzilla.mozilla.org/show_bug.cgi?id=923192 和 https://bugzilla.mozilla.org/show_bug.cgi?id=1041895 )
        * Service Worker 有关于模糊的开发人员体验改进的工单 (https://bugzilla.mozilla.org/show_bug.cgi?id=1209369)，不过在我看来，它应该在检查器中拥有自己的面板，而不是被降级到 about:debugging。是否可以将像 SW 这样深层次的东西移入 DevTools 的检查器和控制台？或者这超出了 DevTools 的范围？

        2017 年 2 月 1 日 上午 8:52

        1. Patrick Brosset

          谢谢 jxn。
          关于 Service Work，将部分 UI 移至 DevTools 而不是 about:debugging 内部，这绝对在路线图上，尽管尚未计划在未来几个季度进行。

          2017 年 2 月 2 日 上午 12:21

      2. jxn

        顺便说一下，感谢您提供有关为 DevTools 做贡献的信息。我喜欢你们为简化贡献而做的工作，我真的很期待有一天（如果有的话，我希望！）DevTools 会成为一个独立的仓库，我可以直接克隆并进行修改！看起来比我想象的要容易。

        2017 年 2 月 1 日 上午 8:54

  2. Noah

    我希望有一个设置可以让我在不打开检查器面板的情况下使用颜色选择器。（例如，在代码片段或控制台中使用颜色选择器。）

    2017 年 1 月 31 日 下午 12:54

    1. Patrick Brosset

      这个功能已经存在，你可以从 Firefox 的汉堡包菜单中访问颜色选择器，然后是子菜单“开发者”，然后是“吸管”。
      这将在当前页面上打开工具，当你点击时，会将颜色复制到你的剪贴板。
      希望这有帮助！

      2017 年 2 月 1 日 上午 1:06

    2. Luca

      也许可以像 http://www.colorzilla.com/firefox/ 一样？

      2017 年 2 月 1 日 上午 1:06

  3. Luca

    你好，
    感谢您对开发者工具的持续工作。一段时间以前，有一个“ffdevtools.uservoice.com”网站可以提出关于未来发展的建议，但是现在……我们该如何提出新的功能要求？

    谢谢

    2017 年 2 月 1 日 上午 12:20

    1. Patrick Brosset

      谢谢！不幸的是，uservoice 渠道不得不关闭。它最终只接收垃圾邮件。
      我们为 DevTools 用户开设了一个新的论坛，以便他们提问并了解新功能：https://discourse.mozilla-community.org/c/devtools

      2017 年 2 月 1 日 上午 1:03

  4. Stephen

    到目前为止，工作做得非常棒，祝贺所有参与其中的人！

    我们是否有地方可以阅读关于从 XUL 迁移到 React 的讨论？我很想知道其中的思考过程和关键点。没有批评，只是好奇！:)

    此外，现在 v1 规范终于开始落地，是否计划将来从 React 迁移到 Web Components？

    2017 年 2 月 1 日 上午 4:00

    1. Patrick Brosset

      谢谢 Stephen。

      关于放弃 XUL 并使用 React，这是去年的公告邮件：https://groups.google.com/forum/#!searchin/mozilla.dev.developer-tools/xul$20react%7Csort:relevance/mozilla.dev.developer-tools/G7XvphTgtac/ED9Z97YjBgAJ

      放弃 XUL 不仅仅是 DevTools 的事，而是 Mozilla 在更大范围内正在进行的事情。主要原因是 XUL 是一种非标准技术，Web 开发社区的其他人没有使用它，它迫使我们在同一个引擎中维护两个渲染堆栈。

      至于采用 React，我们没有专门的文档来介绍关键点。相反，它一直是一个缓慢的实验过程（而且不幸的是，这是一个相当缺乏文档的过程）。

      2017 年 2 月 1 日 上午 4:32

  5. Hervé

    快速（部分）翻译成法语：https://mozillazine-fr.org/firefox-devtools-ce-que-vous-devez-savoir/

    2017 年 2 月 1 日 上午 10:29

    1. Patrick Brosset

      谢谢 Hervé！

      2017 年 2 月 2 日 上午 12:18

  6. Vanco Ordanoski

    开发人员需要的是 Firebug 功能，而且要尽快。
    没有 Firebug 和 FirePHP，我们就失去了调试后端的能力。
    计算的盒子模型不可交互，无法从编辑器刷新浏览器，控制台视图被来自各处的各种日志、警告和错误“污染”……

    请先完成基本的事情！
    （作为主要开发平台，对 Firefox 感到非常不满的终身用户）

    2017 年 2 月 2 日 上午 9:21

    1. Patrick Brosset

      感谢您 Vanco 的反馈。
      幸运的是，这些都是我们知道并会解决的问题。
      让我对每一个问题发表评论。

      Firebug 功能：我们一直在跟踪这个错误：https://bugzilla.mozilla.org/show_bug.cgi?id=991806，试图一步步地解决最常被要求的功能。当然，还有更多功能，但希望它们都应该在错误中，这只是一个实现它们的问题。
      盒子模型不可交互：我不确定你指的是什么。你在“计算”选项卡中找到的盒子模型小部件确实允许通过点击盒子来更改边距、边框、填充。也许是其他的什么东西。
      控制台中各种日志：你可以使用过滤器来选择你想要在控制台中看到哪些日志，这样就很容易配置：https://mdn.org.cn/en-US/docs/Tools/Web_Console/Console_messages#Filtering_and_searching

      我很抱歉你感到不满意，感谢你使用 Firefox 作为你的主要开发浏览器。

      2017 年 2 月 6 日 上午 1:03

  7. newton

    祝贺你们拥有如此尖端的技术，每年我们都在取得进步，越来越多的网民加入我们，在巴西，我们每天都在成长，一切顺利，身体健康，祝我们的 Mozilla 家庭新年快乐，非常感谢。

    2017 年 2 月 2 日 上午 9:27

  8. jasser kandume

    很棒

    2017 年 2 月 2 日 上午 9:50

  9. Wellington Torrejais

    不错！干得好。从 XUL 到 JS 的更改以及 GitHub 项目都是受欢迎的。

    2017 年 2 月 2 日 下午 3:00

  10. Carm Scaffidi

    感谢您非常详细的更新。我很高兴看到选择的路线是主流和标准使用。

    2017 年 2 月 5 日 上午 7:39

  11. Alexandre Leduc

    作为仍然错过 Firebug 功能的人，我真的很希望看到这种增强功能进入 FF。

    如果你已经为分割的控制台实现了 DOM 属性面板，为什么不
    1: 模仿 Firebug 并将其移至检查器右侧的规则、计算、动画和字体面板旁边。
    2. 模仿 Firebug 并自动更新在检查器中选择元素时显示的 DOM 属性。我们不应该每次选择新元素时都点击“显示 DOM 属性”，就像我们不需要点击“显示 CSS 规则”来让 CSS 规则面板显示当前选定元素的 CSS 规则一样。

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

    2017 年 2 月 6 日 上午 6:20

  12. Robert Kaiser

    鉴于所有工具在转换为 HTML 后似乎都变慢并失去了功能（在调试器中感受非常深刻，在检查器和 Web 控制台中也有同样的感受），我越来越想尝试一下其他浏览器是否拥有更快、功能更丰富的工具，尽管我非常喜欢 Mozilla 和 Firefox。

    也就是说，是否正在进行一些工作来重新获得性能和功能（例如，能够在 Web 控制台中选择要显示的 JS/CSS 消息类型，或者特别是旧调试器中非常棒的鼠标悬停变量检查器）？

    2017年2月8日 下午4:04

    1. Patrick Brosset

      谢谢你的反馈，Robert。
      我们确实在努力提升工具的性能。在审查面板中已经完成了一系列工作，更多功能即将推出。
      目前，控制台和调试器处于预发布通道，在我们将其全面启用之前，性能是我们希望解决的一部分问题。

      在缺少功能方面：情况类似，我们希望确保控制台和调试器在全面启用之前与旧版本功能一致。
      我相信鼠标悬停变量检查器正在开发中：https://github.com/firefox-devtools/debugger.html/issues/1574

      2017年2月9日 上午4:54

  13. John Bilicki

    我非常喜欢键盘可访问性，没有一种万能的键盘或鼠标可以解决所有问题，哪种设备更快取决于具体情况。

    我切换到 Firefox 53 Nightly 为了支持多处理器（我非常希望看到它能在 ESR 中落地，因为我不可能每 42 天就更新一次）。一个非常恼人的 bug 是，当我点击查看 JavaScript 错误中的代码行时，大约 90% 的情况下，调试器不会滚动和高亮显示，这反过来又引起了我注意那个小巧的滚动条，虽然它看起来很酷，但如果我们在使用 CGA 屏幕的话，它可能是合适的。

    另外，在我花了五天时间才基本控制住我的新 Firefox 主题后，我注意到所有“原生主题”实际上都是直接嵌入到代码中的，**而不是**作为附加主题添加的。所有这些“原生外观”的主题和**所有**扩展都应该列为附加组件，否则附加组件支持的意义就几乎被消除了。

    最后，我希望有一个直接打开开发者工具（尤其是控制台）的按钮，而不是必须点击两次开发者下拉按钮/菜单。这应该作为 Web 开发者扩展的一部分来实现，这样非开发者用户就不会看到这些按钮。

    除此之外，我已经注意到性能和整体可用性比 Firebug 有了显著提高。感谢所有参与其中的辛苦工作!

    2017年2月10日 上午1:01

    1. Patrick Brosset

      谢谢你的宝贵反馈，John。
      你提到的那个恼人的控制台/调试器 bug 很可能与我们的源映射支持有关，我们现在正在修复它。这项工作被追踪在这个 bug 中：https://bugzilla.mozilla.org/show_bug.cgi?id=1339970，我们现在有人正在处理它。所以希望这种情况很快就会得到改善。

      2017年2月17日 上午2:10

本文评论已关闭。