DevTools Digest - 高效的元素修改、Service Worker 调试和 Material Design 阴影

Paul Bakaus
Paul Bakaus

使用 DOM 面板的新上下文菜单高效编辑节点。直接通过“资源”面板调试服务工作器。在颜色选择器中,从所有 Material Design 色调中进行选择。更轻松地对黑盒 JS 库进行测试。

DOM 面板的全新改进版上下文菜单

新的 DOM 上下文菜单。

我们分析了 DOM 面板中最常用的操作,得出结论,应简化右键点击上下文菜单并对其进行重新整理。

现在,您可以更轻松地快速隐藏或删除元素、触发特定状态(例如 :active 或 :hover),或修改其 HTML。如果您使用的是触控板,不想费心右键点击,可以改为点击所选元素旁边的三个小点。

通过“资源”面板调试 Service Worker

服务工件在设置完成后非常有用,但在早期可能很难理解。更糟糕的是,调试这些问题需要离开 DevTools 并在新浏览器窗口中打开 chrome://serviceworker-internals/。

资源中的 Service Worker

现在不一样了!现在,您可以直接从“资源”面板调试当前网域的服务工件。这项工作仍在进行中,但已经比之前有了很大的改进。

所有颜色:颜色选择器中的 Material Design 色调

几周前,我们在颜色选择器中添加了 Material Design 调色板,以便您直接使用粗体主色。若要实际设计整个页面,您必然需要对所有 Material Design 色调拥有完整访问权限,因此我们已将这些色调内置其中。

如需调出色调,请长按某种主色,然后点击相应色调。

在设置中更轻松地使用黑盒 JavaScript 库

JavaScript 黑盒化已经存在一段时间了,但不太容易发现。借助此功能,您可以将网页上的脚本视为黑盒,以便专注于您编写的代码(并隐藏所有封装代码)。

现在,我们已将其移至“设置”。不妨试试:

黑盒化

其他优秀选手

  • 无法访问渲染切换开关?渲染设置已移至 DevTools 主菜单(位于“更多工具”下)。除了常见的选项(例如 FPS 计量器)之外,我们还将“模拟打印媒体”移到了该位置。
  • 厌倦在 Omnibox 中输入 chrome://inspect 了吗?现在,您还可以在新的主菜单的“更多工具”下找到检查设备
  • 无意中关闭了“渲染”或“搜索”等可关闭的抽屉式标签页?现在,您可以使用左侧的新菜单重新打开它们。

一如既往,您可以通过 Twitter 或下方的评论与我们分享您的想法,并通过 crbug.com/new 提交 bug。

下个月见!
Paul Bakaus 和 DevTools 团队