Firefox 开发者工具：第 27 集 - 以 HTML 编辑、Codemirror 等 - Mozilla Hacks

Firefox 27 刚刚升级到 Aurora 发布频道，这意味着我们又可以报道 Firefox 开发者工具中的新功能了。以下是其中一些新功能，您还可以查看此版本 DevTools 中解决的所有 bug）。

JS 调试器：在 DOM 事件上中断

现在，您可以自动在各种 DOM 事件上中断，无需手动设置断点。为此，请单击调试器面板右上角的“展开面板”按钮（就在搜索框旁边）。然后翻转到事件选项卡。单击事件名称以在下次事件发生时自动暂停。这只会显示当前从您的代码绑定了监听器的事件。如果您单击其中一个标题，例如“鼠标”或“键盘”，则所有相关事件都将被选中。

检查器改进

我们已经听取了 Web 开发者的反馈，并在检查器中做了一些改进

以 HTML 编辑

现在在检查器中，您可以右键单击元素并打开一个编辑器，该编辑器允许您设置元素的 outerHTML。

选择默认颜色格式

现在您可以在选项面板中选择默认颜色格式。

颜色样本预览

开发者工具现在提供颜色样本预览，这些预览会显示在规则视图中

背景图像 URL 的图像预览

根据大家的高度要求，我们现在提供了背景图像 URL 的图像预览

除了上述改进之外，已变异的 DOM 元素现在将在检查器中突出显示。

请关注即将推出的更多工具提示，如果您有任何其他想看到的工具提示，请随时加入讨论！

Codemirror

Codemirror 是一种流行的基于 HTML5 的代码编辑器组件，用于网站。它可以自定义和主题化。Firefox Devtools 现在在各种地方使用 CodeMirror：样式编辑器、调试器、检查器（以 HTML 编辑）和 Scratchpad。

用户可以在选项面板中选择要使用的主题（深色或浅色）。

WebConsole：回流记录

当布局失效（CSS 或 DOM 更改）时，gecko 需要重新计算某些节点的位置。此计算不会立即发生。它会因各种原因触发。例如，如果您执行“node.clientTop”，gecko 需要进行此计算。此计算称为“回流”。回流很昂贵。避免回流对于响应性很重要。

要启用回流记录，请在控制台选项卡的“CSS”菜单下选中“记录”选项。现在，每当发生回流时，都会打印一条日志，其中包含触发此回流的 JS 函数的名称（如果由 JS 引起）。

这次就到这里了。希望您喜欢这些新的改进！

Paul 是 Firefox 开发人员。

paulrouget.com

更多 Paul Rouget 的文章…

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

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

50 条评论

Mindaugas J.

您应该将“编辑外部 HTML”映射到 F2 键

2013 年 11 月 6 日下午 12:05
1. Brian Grinstead
  
  有一个关于 F2 键绑定的 bug 已打开，它应该很快就会发布。如果您愿意，您可以在这里关注它：https://bugzilla.mozilla.org/show_bug.cgi?id=892275。
  
  2013 年 11 月 6 日下午 7:01
Chris

不错，我希望将来能有一些对 SASS/LESS 的支持:) 现在它只在 firebug 中，但使用它会导致速度非常慢。

2013 年 11 月 6 日下午 12:07
1. Heather Arthur
  
  现在正在进行这方面的工作：https://bugzilla.mozilla.org/show_bug.cgi?id=926014。将为具有源映射的任何样式表显示原始源。预发布版 Sass 支持源映射，但据我所知，LESS 目前还不支持。
  
  感谢您抽出时间投票。
  
  2013 年 11 月 7 日上午 10:32
eric

请在悬停元素时突出显示并显示有关填充和边距的信息，这对于调试非常有用

2013 年 11 月 6 日下午 12:09
1. Paul
  
  我们正在积极开发此功能。
  
  2013 年 11 月 6 日下午 4:43
2. Jeff Griffiths
  
  我们计划在下一个版本左右实施一个新的高亮器。
  
  2013 年 11 月 6 日下午 6:19
3. Brian Grinstead
  
  如果您愿意，可以关注以下 bug：https://bugzilla.mozilla.org/show_bug.cgi?id=663778。
  
  2013 年 11 月 6 日下午 7:03
Bryce Fisher-Fleig

我已经放弃了 firebug，转而使用内置的开发者，因为它们比 firebug 更快地覆盖了我想要做的 99% 的功能。

但是，我非常希望支持伪元素出现在检查器的 CSS 窗格中。这是我从 firebug 完全切换到开发者工具后发现的最大缺陷。

这个版本的发布非常棒！我期待着它的发展方向。

2013 年 11 月 6 日下午 12:23
1. Paul
  
  伪元素实际上是支持的。请参见 https://hacks.mozilla.ac.cn/2013/09/new-features-in-the-firefox-developer-tools-episode-26/
  
  2013 年 11 月 6 日下午 4:45
2. Jeff Griffiths
  
  伪元素支持应该在 Firefox 26 中可用：https://hacks.mozilla.ac.cn/2013/09/new-features-in-the-firefox-developer-tools-episode-26/
  
  2013 年 11 月 6 日下午 6:21
  1. Marian Kostadinov
    
    不幸的是，悬停功能几乎毫无用处，因为它在 DOM 树中的下一次点击后不会保留。
    
    2013 年 11 月 7 日上午 10:29
Nathan Demick

回流记录看起来很棒，迫不及待地想尝试一下！

2013 年 11 月 6 日下午 12:36
Chuck

不错！

勘误：“您没有选项”

2013 年 11 月 6 日下午 12:38
1. Robert Nyman [编辑]
  
  感谢您指出，已更正！
  
  2013 年 11 月 6 日下午 12:47
Chris Clarke

在调试器窗口底部有一个命令行（如 Firebug）是调试 js 代码时必不可少的。

2013 年 11 月 6 日下午 1:28
1. Jeff Griffiths
  
  感谢您的反馈 - 我们也从其他开发者那里收到了这条建议，并且正在制定计划，以便在未来几个月内在调试器中实现 JS 输入。
  
  2013 年 11 月 6 日下午 6:22
  1. Luke
    
    至少您可以在观察窗口中添加任何表达式，并在调试时查看它是什么。
    
    2013 年 11 月 7 日下午 7:24
Gene Vayngrib

很棒的功能！回流日志对于优化滚动非常宝贵（直到 Chrome 出现类似时间线的功能）。不幸的是，在我的 Ubuntu 13.04 上，Firefox Nightly 27.0a1（2013-10-24）的控制台面板中，CSS 选项卡上没有“日志”菜单选项可用。

另外，有人注意到内置工具在闲置时会占用 CPU，尤其是在调试器面板上。在 google.com 上查看一下。

2013 年 11 月 6 日下午 1:41
1. Jeff Griffiths
  
  您使用的是哪个操作系统？我在 OS X 10.9 上使用 Aurora 27 运行，没有发现任何特别糟糕的情况。我所做的只是打开 google.com 并打开调试器。
  
  2013 年 11 月 6 日下午 7:17
Flavio

干得好！
以 HTML 编辑，背景图像预览和颜色预览+十六进制格式！

这太棒了！真的会让我的生活更轻松

一直是 Firefox 的粉丝，但这三件小事迫使我依赖于 firebug，它会拖慢整个浏览器。迫不及待地想获得它

继续努力，先生们！

2013 年 11 月 6 日下午 7:13
Gene Vayngrib

Jeff，我在 Ubuntu 13.04 上。
它在 Aurora 上没有重现，目前 Aurora 在我的 Ubuntu 上仍然是 26 版。它在 Nightly（27 版）中重现，但只有在您单击调试器选项卡后才出现。请注意，开发工具最初会在检查器选项卡上打开，这可能是它对您没有重现的原因之一。希望这有助于找到这个错误。

2013 年 11 月 6 日下午 11:13
1. Panos Astithas
  
  我在 13.10 上，没有看到任何重大差异。您使用的是 Ubuntu 提供的 nightly 版本（firefox-trunk）还是 Mozilla 提供的版本？
  
  请记住，打开调试器始终会对性能造成一定程度的影响，因为它会将页面置于调试模式，从而放弃一些 JIT 优化。
  
  2013 年 11 月 7 日上午 4:39
  1. Gene Vayngrib
    
    Panos，我使用的是 Ubuntu 提供的 firefox-trunk 包，aptitude 显示版本：27.0~a1~hg20131023r151789-0ubuntu1~umd1~raring
    
    我知道 JIT 被禁用了，但我没有运行任何程序。我知道页面上可能正在触发一些计时器，甚至一个 requestAnimationFrame，但 Chrome 开发工具在 top 中几乎没有记录。但当我在 FF 中打开 google.com 时，top 显示在 2 核机器上 CPU 为 20%，在 github.com 页面上 CPU 为 80%。当我切换回 google.com 时，CPU 降至 40%，当我回到 github.com 时，CPU 保持在 40%。很奇怪。希望这有帮助。我们可以将此对话切换到电子邮件，我可以提供更多信息来帮助您找到它。
    
    2013 年 11 月 7 日上午 8:35
Nathan Kleyn

我几乎要切换回 Firefox 了。这些更改太棒了，您改进开发工具的速度真是太快了！

是否有任何计划用于 WebSocket 调试，特别是列出已发送和接收的帧？这是我切换的最后一步。

2013 年 11 月 7 日上午 2:31
1. Panos Astithas
  
  是的，我们正在努力进行 WebSocket 调试
  
  https://bugzilla.mozilla.org/show_bug.cgi?id=885508
  
  2013 年 11 月 7 日上午 4:35
Mark V

这太棒了。不再需要单独的 Chrome 来进行调试了。太棒了。

2013 年 11 月 7 日上午 4:18
Adonis K.

希望您使用 Ace 而不是 codeMirror。它曾经是 Mozilla 的项目，而且比 codeMirror 更好（至少在功能方面）。

2013 年 11 月 7 日上午 4:46
Tomer Cohen

大多数时候当我提到 Firefox 开发者工具检查器时，人们都会告诉我 Firebug 能够通过在源视图中键入来直接编辑 HTML。现在 Firefox 有了类似的功能（甚至更好，因为它会突出显示元素节点源），这总比没有好，但我建议仍然实现直接源编辑，以便那些更熟悉 Firebug 的人使用。

2013 年 11 月 7 日上午 5:03
Sam

在上次 FF 更新（25）中，检查器功能为 CSS 值提供了自动完成，很棒，但在 Firebug 中，如果按箭头键，您将看到所有选项。FF 有计划添加这个功能吗？

谢谢 :)

2013 年 11 月 7 日上午 5:06
1. J. Ryan Stinnett
  
  我们希望通过自动完成使所有值都可以访问，这似乎可以解决这个问题。
  
  请关注 https://bugzilla.mozilla.org/show_bug.cgi?id=912189。
  
  2013 年 11 月 7 日上午 9:59
  1. Sam
    
    感谢您的信息，Ryan :)
    
    2013 年 11 月 7 日上午 10:21
spirit

您好，我遇到一个小问题，我的代码在 1 秒后会自动为某个盒子设置 marginTop 属性，而该盒子始终保持在相同的位置（滚动页面时）。

现在
1. 如何在检查器中禁用闪烁元素？这太令人分心了。现在我看到我的规则面板（右侧）也在闪烁（看起来像频闪效果），其他选项卡没有闪烁（计算、字体、盒子模型）。

众所周知，闪烁效果不好:) 为什么不使用更不显眼的信号呢？在 Firebug 中，我们只是为修改过的内容使用不同的背景（黄色），并且样式面板不会闪烁。请添加一个禁用闪烁的选项，这样所有人都满意（当前的背景颜色很好）。

2. 在这种情况下，我无法选择：hover、：active、：focus 和所有其他选项。当我单击小向下箭头时，我看到所有选项，但在 1 秒后该菜单消失（我想这是我的代码造成的错误）。当我使用经典的浏览器上下文菜单时，它始终可见，但 Web 工具中的上下文菜单则不可见，即使我选择了没有更改的元素，或者在检查器中单击了右键。这种行为非常不方便，实际上无法使用此菜单。

其他评论
1. 颜色色板预览 - 很好，但在我看来，这个圆圈太小了，对颜色说明得不够。如果为规则添加悬停，并显示略高的矩形（如 Firebug 中的那样），效果会更好。
2. 背景图像和图像的图像预览（在 HTML 和 CSS 中）很好，但对我来说太慢了，缩略图应该更快地弹出，是否可以更快一些？
3. 您也可以为字体规则添加弹出窗口（如 Firebug 中的那样）。
4. 如何在 CSS 规则中禁用虚线边框（在规则悬停时）？当我们有更多规则时，这种效果会降低可读性。
5. 如何在规则面板中设置，当我们悬停在某个单独规则上时，复选框（开/关）仅显示在该规则上，而不是全部？现在这种行为和之前的（虚线边框）降低了该面板的可读性。

感谢您的关注，期待您的回复。很高兴看到内置工具不断改进。

2013 年 11 月 7 日上午 7:18
1. Brian Grinstead
  
  我们正在努力解决其中至少两个问题
  
  上下文菜单消失：https://bugzilla.mozilla.org/show_bug.cgi?id=931990
  使工具提示更快地显示：https://bugzilla.mozilla.org/show_bug.cgi?id=931845
  
  2013 年 11 月 7 日上午 8:01
nniico

您好，断点 DOM 事件功能很棒，但在单击时将目标元素打开到检查器中会很有趣。
在控制台及其属性面板中也是如此：当我们有一个 DOMNode 作为值时，在文本字段中更改它没有太大意义。为什么不将其打开到检查器中呢？

2013 年 11 月 7 日上午 8:29
Garito

如果我们可以将编辑器实例化到我们的 html 内容中，而不是不得不使用 js 再次添加库，然后创建编辑器，那就太好了。

2013 年 11 月 7 日上午 8:39
Mindaugas J.

我将重新发布我在调试插件方面的经验，因为我在之前的博客文章中没有得到任何回复

远程/浏览器调试插件并不总是有效。
我遇到以下问题

在 chrome://myapp/preferences.html 中的桌面脚本只在调试会话的第一次加载时停止在断点处。之后它会忽略任何断点。

在 fennec 中，在 tabInit 上运行的代码只会在禁用/重新启用插件时停止在断点处。打开一个新标签页还不够。不过 DocLoad 很好。

在 fennec 中，chrome://myapp/preferences.html 无法调试。打开标签页进程不会显示任何源代码。主进程中的断点会被忽略。

这些问题是已知的吗？如果需要，我会将它们提交到 bugzilla，但问题是，我应该创建多少个错误 :P

2013 年 11 月 7 日下午 1:35
1. Jeff Griffiths
  
  抱歉之前没有回复您。我同意，需要做更多工作来帮助插件开发人员调试他们的插件代码。
  
  今年来自 Mozilla 实习生的最令人兴奋的项目之一是 Jetpack 团队的 Mike Hordecki 所做的插件调试工作。这是他在 air mozilla 上的实习生演示
  
  https://air.mozilla.org/intern-presentation-hordecki/
  
  我们预计到今年年底将基于 Mike 的工作实现对该功能的初步支持，并在未来进一步改进它，以更好地支持非基于 SDK 的插件。显然从您的角度来看，我们需要重点关注的是移动支持，我希望您可以记录您遇到的问题并抄送我（jgriffiths@mozilla.com）。
  
  2013 年 11 月 7 日下午 1:53
Mindaugas J.

很棒的视频，谢谢。我正在维护一个非基于 SDK 的引导插件，所以我将期待这些补丁；)

例如，目前无法调试 bootstrap.js 中的实际 startup() 函数。演示者简要地提到了这一点，所以我希望如此。

一旦我有时间构建一个最小的案例插件，我就会打开一些错误报告。

2013 年 11 月 7 日下午 2:23
Peter

此版本中网络选项卡上会提供一个清除按钮吗？

2013 年 11 月 7 日下午 3:51
voracity

出于好奇，开发工具团队选择 CodeMirror 而不是 Ace 的原因是什么？

2013 年 11 月 7 日下午 9:07
Peter

我们会在网络选项卡上看到清除按钮吗？

2013 年 11 月 12 日上午 1:38
1. J. Ryan Stinnett
  
  清除按钮可能会很快添加，但尚未完成。请关注 http://bugzil.la/859057。
  
  2013 年 11 月 12 日上午 8:46
Learner

有了这些良好的更改，我认为不再需要 Firebug 插件了。Chrome 有一个按钮可以取消压缩 JavaScript 以正确查看脚本（我知道许多其他网站也提供该功能），但与 Chrome 一样，如果 FF 也有这个功能，那就太好了。

2013 年 11 月 12 日下午 1:16
1. Jeff Griffiths
  
  感谢您的评论！实际上，我们计划在 Firefox 28 中支持取消压缩，请关注
  
  https://bugzilla.mozilla.org/show_bug.cgi?id=913665
  
  2013 年 11 月 12 日下午 2:30
Felix Nagel

真是个好消息！

使用 console.log 功能怎么样？
现在 console.log(“test”) 会有更合理的输出吗？
console.log($(“myElement”)) 会突出显示 DOM 中的实际元素吗？

2013 年 11 月 13 日上午 6:18
Ryan B.

我无法完成 Aurora 下载的安装，所以即使尝试使用酷炫的开发工具似乎也遥不可及！

2013 年 11 月 18 日下午 2:04
1. Robert Nyman [编辑]
  
  如果问题仍然存在，请寻求 Firefox 支持。
  
  2013 年 11 月 19 日上午 5:15
  1. Ryan B
    
    我过了一段时间后又试了一次，安装终于成功了！现在正在玩 Aurora！谢谢！
    
    2013 年 11 月 20 日上午 10:03
    1. Robert Nyman [编辑]
      
      很高兴听到这个消息！
      
      2013 年 11 月 20 日下午 5:02

本文的评论已关闭。

Hacks

Firefox 开发者工具：第 27 集 - 以 HTML 编辑、Codemirror 等

由 Paul Rouget，Robert Nyman [荣誉编辑]

JS 调试器：在 DOM 事件上中断