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

保罗·巴考斯
Paul Bakaus

使用 DOM 面板的新上下文菜单可高效地修改节点。直接通过 Resources 面板调试 Service Worker。在 colorpicker 中,选择所有 Material Design 色调。更轻松地将 JS 库设置为黑箱。

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

新的 DOM 上下文菜单中。

我们分析了 DOM 面板中最常用的操作,认为右键点击上下文菜单应保持整洁有序。

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

通过 Resources 面板调试 Service Worker

一旦设置好了 Service Worker,他们就很棒,但他们可能很难做到尽早。调试它们需要离开开发者工具并在新的浏览器窗口中打开 chrome://serviceworker-internals/,导致这种情况更糟。

资源中的 Service Worker

现在不了!现在,您可以直接在 Resources 面板中调试当前网域的 Service Worker。这方面的工作仍在进行中,但与以前的状况相比已经有了很大的进步。

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

几周前,我们在颜色选择器中添加了 Material Design 调色板,以便提供开箱即用的醒目主要颜色。要实际设计一整页,您不可避免地需要对所有 Material Design 阴影拥有完整访问权限,因此我们已引入这些阴影。

如需调出颜色深浅,请长按其中一项主要颜色,然后点击某个阴影。

在设置中更轻松地将 JavaScript 库设置为黑箱

JavaScript Blackboxing 问世已有一段时间了,但发现它并不容易。借助此功能,您可以将网页上的脚本设置为黑箱,以便仅关注您编写的代码(并隐藏所有封装代码)。

我们现已将其移至“设置”。快来试试吧:

黑盒

其他精华

  • 无法使用“呈现”切换开关?渲染设置已移至开发者工具主菜单(位于“更多工具”下)。除了常见设置(如 FPS 计)之外,我们还将“模拟打印媒体”移到了这里。
  • 厌倦了在多功能框中输入 chrome://inspect?现在,您也可以在“More Tools”(更多工具)下的新主菜单中找到 Inspect Devices
  • 不小心关闭了某个可关闭的抽屉式导航栏标签页(例如“呈现”或“搜索”)?您现在可以使用左侧的新菜单重新打开这些标签页。

与往常一样,请通过 Twitter 或下方的评论告诉我们您的想法,并将错误提交到 crbug.com/new

下个月再见!
Paul Bakaus 和开发者工具团队