可编辑的盒子模型、多重选择、Sublime Text 键绑定等等 - Firefox 开发者工具第 31 集 - Mozilla Hacks

一组新的 Firefox 开发者工具功能刚刚被提升到了 Aurora 通道。这些功能现在可以在 Aurora 中使用，并将在 7 月的 Firefox 31 版本中发布。此版本带来了新的工具、编辑器改进、控制台和检查器功能。

可编辑的盒子模型

现在，检查器中的盒子模型选项卡是可编辑的，方便进行实验。双击任何边距、边框或填充值，更改当前所选元素的值。输入任何有效的 CSS <length> 值，并使用 上/下 键将值增加或减少 1。Alt-上 键增加 0.1，Shift-上 键增加 10。（开发笔记）

Editing the box model

吸管工具

检查器中的颜色选择器新增加了吸管工具，可以从页面上的任何像素中获取颜色。通过单击或按下 Enter 键选择当前颜色。按下 Esc 键中止操作。使用 上/下 键移动一个像素，使用 Shift-上/Shift-下 键移动 10 个像素。

Eyedropper tool

您还可以直接使用吸管工具将颜色复制到剪贴板，方法是通过 Web Developer 菜单访问它，或使用工具栏图标（可以通过转到设置面板并选中 Available Toolbox Buttons > Grab a color from the page 来启用）。(开发笔记）

控制台堆栈跟踪

控制台中的 console.error、console.exception 和 console.assert 日志现在包含了从调用位置到源头的完整堆栈跟踪。（开发笔记）

Stack trace in console.error() printout

样式化控制台日志

与其他浏览器开发者工具保持一致，您现在可以使用 %c 指令在控制台日志中添加样式。
(开发笔记）

Using %c in console.log() to format output

复制为 cURL

在网络监视器中，您可以舒适地从自己的终端重放任何网络请求。右键单击请求，然后选择 复制为 cURL 菜单项，将包含标头和数据参数的 cURL 命令复制到剪贴板。（开发笔记）

Copy as cURL in Network tool

编辑器 – 多重选择、Sublime Text 键绑定

开发者工具中使用的源代码编辑器已升级到 CodeMirror 4。随之而来的是

**多重选择**。在选择时按住 Ctrl/Cmd 键，即可进行多重选择。

**矩形选择**。按住 Alt 键即可选择一列对齐的文本块。

**撤消选择**。使用 Ctrl-U/Cmd-U 撤消最后一次选择操作，使用 Alt-U/Shift-Cmd-U 恢复选择。

**Sublime Text 键绑定**。要启用它，请在 URL 栏中输入 about:config 并将 devtools.editor.keymap 设置为 sublime。

多重选择操作

animation of multiple selection in the editor

开发笔记

画布调试器

使用新添加的画布调试器调试 WebGL 和 2D 画布上下文中的动画帧。画布调试器是一个实验性功能，需要在设置面板中启用。目前尚不支持多个画布 (bug) 以及使用 setInterval (bug) 生成的动画。这篇博客文章中对画布调试器进行了更详细的描述。
(开发笔记）

附加组件调试器

如果您使用附加组件 SDK 开发 Firefox 附加组件，现在有一种更简便的方法来调试附加组件的 JavaScript 模块。请参阅这篇博客文章，了解更多详情。（开发笔记）

Firefox 31：附加组件调试器来自 Jordan Santell 在 Vimeo 上。

其他功能

**展开子节点**。在检查器中双击节点时按住 Alt 键，即可展开其所有子节点和后代节点。（开发笔记）
**持久化网络日志**。在设置面板中选中 Enable persistent logs，即可在重新加载和导航之间保留网络面板日志。（开发笔记）
**默认情况下启用 JS 警告**。现在，JavaScript 警告默认情况下会显示在控制台中。（开发笔记）
**Scratchpad 视图菜单**。Scratchpad 工具现在具有一个视图菜单，其中包含更改字体大小、隐藏行号、换行文本和突出显示尾随空格的选项。（开发笔记）

特别感谢 38 位贡献者在本次发布中添加了所有功能和修复。

有任何问题或建议吗？请在此处留言，或在 Twitter 上发送反馈给 @FirefoxDevTools，或通过我们的全新 Firefox 开发者工具反馈渠道。如果您想提供帮助，请查看参与指南。

Mozilla 的 Firefox 开发者工具开发人员，主要从事样式工具的开发。

@harthvader

Heather Arthur 的更多文章...

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

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

43 条评论

Stanislas

复制为 cURL（包含所有标头）？别跟我开玩笑！这是梦吗？真是太棒了！/ 最后，我可以下载任何东西了 :)

2014 年 5 月 7 日下午 10:33
1. panzi
  
  Chrome 好像已经好几年有这个功能了吧？
  
  2014 年 5 月 7 日下午 12:24
  1. Matt Hughes
    
    这就是我对大多数 Firefox 开发工具更新的反应
    
    2014 年 5 月 7 日下午 14:58
  2. Paul Irish
    
    好几年？不。Chrome 是在不久前（2013 年 3 月）才实现的。
    Firefox 开发工具的迭代速度非常快，真是太棒了。
    
    2014 年 5 月 7 日下午 17:29
    1. Robert Nyman [编辑]
      
      感谢 Paul - 非常感谢！
      
      2014 年 5 月 8 日上午 01:18
    2. Tim Peterson
      
      相亲相爱一家人，Google 和 Mozilla 加油！
      
      2014 年 5 月 8 日上午 04:10
  3. Artur
    
    是的。
    
    2014 年 5 月 7 日下午 18:45
Vicky

我认为它在稳定版和 Canary 版本中仍然远远落后于 Chrome 开发工具。这些功能中没有一个是新的，不会让我在工作中切换到 Firefox。我并不是在找茬，尽管我喜欢 Firefox 和 Mozilla 的开放网络理念，但这些问题总是阻止我全职使用 Firefox。请修复这些问题，使它与 Chrome 开发工具相当，甚至超越它！

2014 年 5 月 7 日下午 10:40
1. Robert Nyman [编辑]
  
  您遇到的这些问题具体是什么？欢迎在开发者工具反馈渠道中分享您的想法和建议。
  
  2014 年 5 月 7 日下午 11:58
2. Nick Fitzgerald
  
  您可能不是在找茬，但您并没有提供任何建设性的、可操作的反馈。请具体说明！
  
  2014 年 5 月 7 日下午 13:33
3. Luke
  
  您说得对，Chrome 拥有出色的调试功能，尤其是在与当前 Firefox 的故障率相比之下（Bug 977972、1003664、923971 以及其他一些 Bug 特别令人讨厌）。
  
  不幸的是，Chrome 的调试器明显比其他调试器慢，有时甚至需要 10 秒或更长时间才能切换标签页。此外，为什么要将它设置成状态栏遮挡开发工具标签页？Firefox 的设计绝对更好。
  
  2014 年 5 月 7 日下午 17:58
Skoua

这么多很棒的功能！

2014 年 5 月 7 日下午 10:47
1. Robert Nyman [编辑]
  
  谢谢，很高兴您喜欢！
  
  2014 年 5 月 8 日上午 01:19
Felix

请将吸管工具作为原生 API 提供给我们。我恳请你们克服安全问题，为我们提供该 API。这对创意 Web 应用程序至关重要！

2014 年 5 月 7 日下午 11:52
1. Robert Nyman [编辑]
  
  请在开发者工具反馈渠道中添加一个想法吗？
  
  2014 年 5 月 8 日上午 01:20
2. Brian Grinstead
  
  我们为此使用了 drawWindow API：https://mdn.org.cn/en-US/docs/Web/API/CanvasRenderingContext2D#drawWindow%28%29。它目前仅对浏览器代码可用，但我同意它对设计应用程序非常有用。
  
  有一个库（https://github.com/niklasvh/html2canvas）尽可能模拟这种行为，但正如你所想象的，这对用户代码来说很难做到，而且永远不可能做到100%准确。不过，你可以试一试，看看它是否适合你的情况。
  
  2014年5月8日下午05:40
Richard Magnano

我认为最重要的是视频中的Quake 3选项卡。

2014年5月7日下午13:09
1. Kim
  
  http://www.quakejs.com
  
  玩游戏。
  
  2014年5月8日下午11:30
ryan

我真的很想从Chrome切换，但当我遇到下划线模板错误时，Chrome在控制台中给出准确的行号，而Firefox却没有。如果需要，我可以举个例子。

2014年5月7日下午15:30
1. Heather Arthur
  
  如果你可以的话，请举个例子。如果你愿意，可以提交一个bug: https://bugzilla.mozilla.org/enter_bug.cgi?product=Firefox&component=Developer%20Tools
  
  2014年5月7日下午22:10
Lewis Weaver

我喜欢你们正在做的事情，Sublime编辑器是我的最爱。继续加油！

2014年5月7日下午16:08
1. Robert Nyman [编辑]
  
  谢谢，很高兴听到！
  
  2014 年 5 月 8 日上午 01:20
2. Rafe
  
  Sublime风格的编辑至关重要。非常感谢。Firefox 作为Chrome 的开发替代方案越来越有吸引力。
  
  2014年5月12日下午01:20
  1. shadenfroh
    
    是的！这是一个大问题，你们做得很好！
    
    2014年5月14日下午00:37
Mr. Mac

“在Inspector中双击一个节点时按住Alt键，可以扩展所有子节点和后代节点。”

太棒了！其他原生Mac键/鼠标习惯有什么进展吗？:-)

2014年5月7日下午18:37
1. Robert Nyman [编辑]
  
  很高兴你喜欢！就我所知，目前没有，但我们一直在努力不断改进这类功能。
  
  2014年5月8日下午01:22
Samuel Reed

这是一个很棒的更新。

你们能看看能不能解决困扰我几个月的问题吗？当我查看DOM元素或在文本编辑器中更改了一些内容时，我经常在打开开发者工具时按下cmd+R。我希望cmd+R能重新加载页面（最好不使用缓存，因为这是有意重新加载）。在Chrome/Webkit中，这很好用，但在Firefox中却从未成功。这只是我希望能修复的一些小问题之一。

感谢你们迄今为止所做的出色工作。

2014年5月7日下午22:58
1. Robert Nyman [编辑]
  
  谢谢！并且我们正在努力解决这个问题。:-)
  
  2014年5月8日下午01:07
/dev/web

这些都很好，但移动设备的用户代理欺骗还是没有改进吗？

2014年5月8日下午01:00
1. Robert Nyman [编辑]
  
  很高兴你喜欢。你是指开发者工具中的欺骗（如这里所述）还是移动版Firefox中的设置？
  
  2014年5月8日下午01:23
Mark Learst

Firefox 在这方面已经开始取得了长足进步，我很自豪他们从引入自己的DevTools版本以来取得了如此巨大的进步。FF 29中有很多打磨，我将使用FF进行更多测试。

向FF和Mozilla点赞。

2014年5月8日下午02:30
1. Robert Nyman [编辑]
  
  感谢你的赞赏，Mark！
  
  2014年5月8日下午04:21
Asad

但当我尝试使用此框时，出现一个错误：安装 JavaScript / 或更新它。现在我该怎么办？

2014年5月8日下午05:55
Tim Gummer

听起来很棒——尤其是Sublimetext的支持

——我尽可能地坚持使用FF，直到Chrome中的sourcemap和sass支持让我转向了它。所以，除非我错过了一些东西，否则Moz没有实现sourcemap / SASS支持真的很遗憾——太可惜了。

即使作为Chrome用户，我也发现很多开发者对Moz的态度很刻薄——考虑到FF是打破了IE垄断、让Web标准在整个行业流行起来的浏览器。

至少，开发者工具总体上需要一些健康的竞争，而Good和Mox似乎意识到了这一点。

继续努力。

2014年5月8日下午23:03
1. Robert Nyman [编辑]
  
  感谢你的评论。我们确实支持这些功能，请阅读Firefox 开发者工具中的实时编辑 Sass 和 Less中的更多内容。
  
  2014年5月9日下午02:41
Nic

能否从框模型小部件中更改框的大小（如Chrome所做的那样）？

2014年5月8日下午23:21
Che xanh

我喜欢你们正在做的事情，Sublime编辑器是我的最爱。继续加油！

2014年5月10日下午11:19
Minh Kiên

相亲相爱一家人，Google 和 Mozilla 加油！

2014年5月10日下午11:22
Stanimir

这些Sublime键绑定太棒了！继续努力，伙计们！

2014年5月14日下午22:18
1. Robert Nyman [编辑]
  
  谢谢，很高兴你喜欢！
  
  2014年5月15日下午01:11
Anton Kattsyn

看起来很棒！但我真的想要在插件调试器中有一个“控制台”功能。例如，在Google Chrome中，可以在断点处设置断点，然后在该断点上下文中执行一些代码。我希望FF也有同样的功能。这在调试方面非常有用，并允许在代码的特定点手动更改插件状态，以便快速测试。因此，这将类似于Scrachpad + 调试器。

顺便问一下，这是否已经可以实现，我只是错过了什么？

2014年5月18日下午12:29
Jeff

喜欢你们取得的进展！

有没有关于在页面加载时防止全页面蓝色闪动（突出显示body标签）的消息？当你整天打开开发者工具时，这会让人很烦。

谢谢！

2014年5月29日下午06:44
Alex Marino

颜色选择器——太棒了！
使用箭头键一次移动一个像素——太棒了！

2014年6月1日下午07:25

本文的评论已关闭。

Hacks

可编辑的盒子模型、多重选择、Sublime Text 键绑定等等 – Firefox 开发者工具第 31 集

作者：Heather Arthur，Robert Nyman [荣誉编辑]