开发者版 40:始终活跃的网络监控、CSS 规则过滤,以及更多

Firefox 40 刚刚更新,我们有很多更新要分享。这个版本是开发者工具贡献者们为了解决我们从工具使用者那里直接获得的反馈意见而做出的重大努力。获取 开发者版浏览器 的副本并试用它。

实验性多进程支持:请求

当你更新到开发者版 40 时,系统会提示你选择加入测试 多进程 Firefox。请考虑帮助我们测试此新功能,并提供你所见任何问题的反馈意见。

Inspector 中的新功能

  • CSS 规则视图中现在有一个过滤器框,它允许你查找与字符串匹配的规则。请参阅 过滤样式视频演示 或下面的截图。(开发笔记:11206161157293。)

Inspector Filter Styles Screenshot

  • 有一个用于 CSS 属性的全新 CSS 文档工具提示。右键单击 CSS 规则视图中的任何属性,然后选择“显示 MDN 文档”以查看有关该属性的更多信息。(开发笔记。)

MDN Tooltip In Inspector Screenshot

  • Inspector 搜索现在包含来自 iframe 的结果,并且还包含没有 CSS 前缀的类/ID 结果。(开发笔记:8734431149346。)
  • Mahdi Dibaiee 添加了一个新的 CSS 过滤器编辑器工具提示。查看 CSS 过滤器编辑器工具提示视频演示 以获取演示,或者在开发者版中的 过滤器演示页面 上尝试一下。(开发笔记
  • 动画 Inspector 进行了重大更新。它现在显示子树动画,可以控制播放速度,并预览和突出显示动画 DOM 节点。(开发笔记:115565111556531144615。)

在这篇文章中,我们无法列出所有更改,但以下是你在 Inspector 中可能会发现的几个更有趣的更新

  • 盒模型视图有各个区域的图例和工具提示,用于显示哪个 CSS 规则调用了计算值。(开发笔记:11415711151956。)
  • shift+单击颜色样本将在颜色单位格式之间进行切换。(开发笔记。)
  • 标记视图中的新滚动到视图在新标签页中打开链接复制链接在样式编辑器中打开在调试器中打开上下文菜单项。(开发笔记:9012509211021158822。)

网络监控新闻

Cached network requests in Network Monitor Screenshot

以下是本版本中其他更改和改进的精选内容

  • 每个请求上的新复制响应复制 URL 参数复制请求/响应头上下文菜单项。(开发笔记:95593311507171150715。)
  • 用于过滤请求的搜索框。(开发笔记。)
  • 网络监控的工具提示中包含 IP 地址。(开发笔记。)
  • 为请求上下文菜单添加了访问键。(开发笔记。)

Web 控制台

  • 新的控制台方法:console.dirxml()。(开发笔记。)
  • Web 控制台中用于显示来自 worker 的控制台消息的新过滤器选项。(开发笔记。)
  • 如果通过 console.log 记录,字符串中的引号将不再添加。感谢新贡献者 Dmitry Sagalovskiy 添加了此功能!(开发笔记。)

调试器

  • 调试器源的新复制 URL在新标签页中打开上下文菜单项。(开发笔记。)
  • 现在可以在未命名的 eval 脚本中进行断点。(开发笔记。)

通用

  • 在新标签页中打开链接项现在已添加到样式编辑器中的工作表。(开发笔记。)
  • 有一个按钮可以完全折叠 Inspector 侧边栏。(开发笔记。)
  • 开发者工具栏与应用的浅色开发者工具主题相匹配。(开发笔记)。
  • 刷新了主题颜色,以获得更好的对比度。(开发笔记。)
  • 对 Windows 的 HiDPI 支持更好。(开发笔记:11477021023546。)

特别感谢所有为本版本 Firefox 开发者工具贡献补丁的人!这里有一个 Firefox 40 中已解决的所有 DevTools 错误的列表。对众多贡献者表示感谢。

你是否有反馈意见、错误报告、功能请求或问题?和往常一样,你可以在此处发表评论,与团队联系 @FirefoxDevTools,或者在我们的 Firefox Dev Tools 反馈频道 上分享你的建设性反馈和功能请求。

关于 Brian Grinstead

Brian Grinstead 的更多文章…


7 条评论

  1. Jerry

    Chrome 工具的开发者难道没有很多这些功能,甚至更好吗?

    2015 年 5 月 20 日 下午 10:28

    1. Brian Grinstead

      本版本重点关注我们从用户那里获得的直接反馈意见,同时改善了整个工具的稳定性和完善度。即使如此,本版本中仍有一些功能是其他浏览器所没有的,例如内置的 CSS 属性文档、动画面板、过滤器编辑器等。

      试试开发者版,并随时向我们发送任何反馈意见或新功能的想法!

      2015 年 5 月 20 日 下午 11:07

    2. Kamal Bhatt

      我平时不使用 Chrome,所以这可能有些严厉,但我曾经用它来调试问题时,发现 Chrome 工具有时功能不足。

      我觉得 Firefox 的性能分析工具要好一些,Firefox 的 JS 错误消息也清晰得多。试着故意破坏你的 JS 代码,看看其中的区别。

      有了这个版本,我想我会停止使用 Firebug。

      2015 年 5 月 22 日 下午 16:34

      1. jsantell

        太好了!请随时告诉我们,我们可以做些什么来继续改进 Firefox DevTools!

        2015 年 5 月 24 日 下午 13:08

  2. Brian Grinstead

    另外,文章中没有提到的一点是,Dev Edition 浏览器主题现在已转换为轻量级主题(http://bugzil.la/1148996)。

    虽然这不会改变它的外观,但这意味着它更好地集成了浏览器。因此,你现在可以从 about:addons 或自定义模式中启用和禁用它,就像任何其他主题一样。

    2015 年 5 月 20 日 下午 10:43

  3. Nate Wiebe

    我仍然希望看到一个选项卡,用于以纯文本形式查看请求响应。理想情况下,能够选择部分并将其复制到剪贴板。如果 Firefox 认为它是 json 并发现语法错误,我无法查看响应来修复它。

    2015 年 5 月 26 日 上午 05:16

    1. Jeff Griffiths

      作为一种变通方法,你可以右键单击请求并复制响应字符串。我同意我们也应该提供原始响应,我们正在这个错误中跟踪该问题

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

      2015 年 5 月 27 日 下午 19:50

本文的评论已关闭。