Mozilla Hacks

工具箱、检查器和 Scratchpad 改进 - Firefox 开发者工具第 32 集

头像照片 作者：Brian Grinstead，Robert Nyman [编辑名誉退休]

发布于 2014 年 6 月 17 日 在 开发人员工具 中

Firefox 32 刚刚升级到 Aurora 发布通道，所以让我们看看此版本中最重要的开发者工具更改。

首先，我们要感谢所有 41 位为 DevTools 此版本贡献补丁的人！这里有一个 列表，列出了 Firefox 32 中解决的所有 DevTools 错误。

工具箱

我们将从我们正在尝试的新的 UserVoice 反馈频道上请求的几个功能开始。

节点尺寸现在显示在框模型信息栏中。与其他工具的工作方式类似，您可以轻松地从信息栏直接参考突出显示的节点的尺寸。（开发说明 和 UserVoice 请求）

Screenshot of node dimensions being shown in the infobar above the box model highlighter

“从页面中选择元素”按钮现在更靠近检查器选项卡，因此在它们之间跳转的速度更快。专业提示：您还可以使用 Ctrl+Shift+C 或 Cmd+Opt+C 键盘快捷键 来执行相同的操作。（开发说明 和 UserVoice 请求）

Screenshot of the new Inspect Element position on the left side of the toolbox

现在有一个“全页截图”命令按钮。启用此按钮后，只需按下它，一个截图就会出现在您的下载文件夹中。（开发说明）

Screenshot of taking a screenshot of the current page with DevTools

下面的动画 gif 中展示了截图。

Animated gif of taking a screenshot of the current page with DevTools

整个 DevTools UI 中正在使用新图像来支持高像素密度显示器 (HiDPI)，因此 UI 在这些设备上看起来更清晰。非常感谢我们的贡献者 Tim Nguyen 为这些更改付出的辛勤努力！ (开发说明 )

Web 音频编辑器

加入着色器编辑器和画布调试器，Web 音频编辑器是一个新的媒体工具，已在 Firefox 32 中发布。在选项面板中启用它之后，您可以检查 AudioContext 图形并在 AudioNode 上修改属性。查看 介绍 Firefox 开发者工具中的 Web 音频编辑器 黑客文章，以获取有关此工具的更多信息。

Screenshot of the new web audio tool

检查器

可以在检查器中显示用户代理样式。由于这些默认样式可能会与您的页面样式交互，因此查看它们非常有用。可以在选项面板中启用此功能，并且在 MDN 上有 更多文档 介绍此功能。（开发说明 和 UserVoice 请求）

Screenshot of viewing user agent styles in the Inspector Panel

Animated gif of viewing user agent styles in the Inspector Panel

隐藏的节点现在在标记视图中与可见节点的显示方式不同。（开发说明 和 UserVoice 请求）

Screenshot of hidden nodes being displayed differently in the Inspector panel

可以在字体检查器工具提示中预览网络字体。将鼠标悬停在字体堆栈上时，您将在工具提示中看到当前应用的字体（包括任何网络字体）。(开发说明)

Screenshot of a web font being previewed in the Inspector panel

现在，标记视图中节点有一个“粘贴外部 HTML”上下文菜单项。（开发说明 和 UserVoice 请求）

Scratchpad

现在，Scratchpad 中的 JavaScript 有基于类型推断的代码完成功能。使用 Ctrl+Space 在当前光标位置打开建议列表，使用 Shift+Space 可以显示有关当前符号的类型信息。它由出色的 tern 代码分析引擎 提供支持。 (开发说明)

Screenshot of scratchpad showing an autocompletion list

Screenshot of scratchpad showing type information about a function

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

关于 Brian Grinstead

Brian Grinstead 的更多文章...

关于 Robert Nyman [编辑名誉退休]

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

Robert Nyman [编辑名誉退休] 的更多文章...

17 条评论

  1. Mindaugas

    关于检查器中的 CSS
    https://bugzilla.mozilla.org/show_bug.cgi?id=920665 仍然需要改进

    2014 年 6 月 17 日 下午 08:49

    1. Brian Grinstead

      如果您启用了用户代理样式，您现在应该可以在检查器中看到这些样式。该错误报告与样式编辑器有关，样式编辑器仍然不显示用户代理/附加组件注入的 CSS。我会在错误中添加一些执行此操作的步骤。

      2014 年 6 月 17 日 下午 09:03

      1. Mindaugas

        确实，使用启用浏览器样式后，我可以看到它们。谢谢

        2014 年 6 月 17 日 下午 09:05

  2. Skoua

    我不必再对我的女朋友重复 94340984 次“shift-f2-screenshot-name-of-your-file-dash-dash-fullpage”了，谢谢！

    2014 年 6 月 17 日 下午 08:58

    1. Jeff Griffiths

      哈，不错 :)

      2014 年 6 月 17 日 下午 11:34

  3. neeks

    我一个月前试图将 Chrome 切换为我的日常驱动程序；但是没有节点尺寸是不可能的。

    如果您能实现对突出显示的节点动态添加样式的功能，我会切换。

    2014 年 6 月 17 日 下午 09:28

    1. Brian Grinstead

      我认为您指的是在 css 规则视图中添加新的选择器 - 幸运的是，此错误已分配并正在处理中 :) https://bugzilla.mozilla.org/show_bug.cgi?id=966896。您也可以随时切换到样式编辑器来执行此操作，但这显然在检查器中直接进行此操作会很方便。

      2014 年 6 月 17 日 下午 09:33

    2. Luke

      您可以向突出显示的节点添加样式 - 在顶部，它显示

      element {

      }

      只需在之间点击并添加样式。
      您还可以从样式编辑器选项卡添加任意数量的新 css 规则。

      我之前写了一个扩展程序“Devtools Tweaks”，它提供了右键点击 - 在规则选项卡中创建新规则（基本上只是一个快捷方式）

      2014 年 6 月 18 日 下午 19:05

  4. Mindaugas

    sourceURL= 对调试器/样式编辑器/检查器的评论支持

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

    CSS（重复）
    https://bugzilla.mozilla.org/show_bug.cgi?id=880831
    https://bugzilla.mozilla.org/show_bug.cgi?id=880790

    2014 年 6 月 17 日 下午 09:44

  5. ScampDoodle

    是否有可能提供一个工具来检查 Knockout ViewModel 的上下文？这是我切换到 Chrome 的唯一原因，但我更喜欢 Firefox 浏览器/开发者工具套件。

    2014 年 6 月 17 日 下午 15:04

    1. Brian Grinstead

      我不知道是否有任何扩展程序可以做到这一点，但我确实知道 Ember Inspector 项目在将 Chrome DevTools 附加程序转换为跨浏览器附加程序方面取得了成功，该附加程序也针对 Firefox DevTools：https://hacks.mozilla.ac.cn/2013/12/ember-inspector-on-a-firefox-near-you-2/。我们也一直在研究一些附加程序 SDK，以使这种事情变得更容易。所以我认为您会看到这种情况，但必须有人构建（或移植）一个扩展程序。

      2014 年 6 月 18 日 上午 05:28

  6. Junior

    您好，自从我离开 Firebug 并开始每天使用 FDT 以来，我一直做着一份清单（我现在无法访问 https，因此我无法在 bugzilla 上发布）
    （我的 FF 版本是 30b9，所以我不知道它是否已在“更新版本”中实现...

    – 调整网络指南中的列大小
    ==> 当您将鼠标悬停在链接上（例如：来自 ajax 请求）时，Firebug 中的 URL 会被“突出显示”... 我认为 FDT 中更好的方法是允许调整网络选项卡中的列大小（方法、文件、域）；

    – 选择一个元素并删除它；
    ==> 在 Firebug 中，我可以选择页面上的元素并按下 DEL 键简单地删除它。在 FDT 中，当我选择一个元素（打开检查器标签）时，源代码（在检查器标签中）没有焦点，因此我应该先将焦点放在它上面，然后才能删除该元素；

    – 在文件内部搜索；
    ==> 最近，我发现了在 JS 文件中查找的技巧... 我不知道是否可以在检查器标签（HTML 源代码）中执行此操作... 我只能在那里搜索标签... 我尝试了“!expression”，就像我在调试器标签中所做的那样，但它不起作用（Firebug 可以做到）...
    与 CSS 类似，它显然只允许在当前文件中搜索（我希望在所有文件中搜索）...

    – 属性：组合框样式（但带滚动条）
    ==> 一些属性（例如：位置）具有“自动完成”... 我认为这很酷，但有时（例如：list-style-type）并非所有可能的价值都会显示出来...
    像带有滚动条的组合框（在规则中，在检查器标签中）会很酷。当我们键入“align”时，一个包含“absolute、relative、etc…”的值的组合框。

    类似地，当我们键入类似“border”的东西时，它会显示从“border”到“border-images”的选项（并非所有属性都显示出来... 滚动条显示所有“可用”属性会更好）...

    2014 年 6 月 18 日 上午 05:22

  7. Junior

    哈，我忘记了一些东西
    一个类似 Firebug 的“重置设置”功能会很棒……最近我搞砸了我的设置，网络标签不再工作了，我不知道为什么……

    我不得不手动清除设置（通过 about:config -> 搜索 devtools 并将所有设置设置为默认值）……

    2014 年 6 月 18 日 下午 05:25

    1. Robert Nyman [编辑]

      感谢您的反馈！如帖子中所述，请在 UserVoice 的反馈渠道 中添加您的反馈。

      2014 年 6 月 18 日 下午 10:29

  8. Eduardo

    我们希望样式编辑器有一个颜色选择器（就像 Chrome 一样）

    2014 年 6 月 21 日 上午 09:07

  9. Sebastian

    拜托！如果你不能添加自定义样式规则，开发者工具就毫无用处。伪类选择器绝对是必要的！在 Chrome 中，这些功能早就实现了。

    2014 年 6 月 27 日 上午 00:43

    1. Brian Grinstead

      您已经在样式编辑器中添加了自定义规则，但我们正在这里努力在检查器中支持此功能：https://bugzilla.mozilla.org/show_bug.cgi?id=966895。

      2014 年 6 月 27 日 上午 05:29

本文的评论已关闭。