Chrome 开发者工具最近推出了许多更新版功能，有些是小更新，有些是重大更新。我们先来了解一下“元素”面板的更新，然后再讨论一下控制台、时间轴等。
停用的样式规则会复制为注释掉的形式
现在，复制“样式”窗格中的完整 CSS 规则时，系统会包含您已关闭的样式，这些样式会以注释形式存在于剪贴板中。[crbug.com/316532]
复制为 CSS 路径
“复制为 CSS 路径”现在可作为“元素”面板中 DOM 节点的菜单项使用（类似于“复制 XPath”菜单项）。
生成 CSS 选择器不局限于样式表/JavaScript，它们还可以作为 WebDriver 测试中的定位策略的替代方案。[crbug.com/277286]
查看 Shadow DOM 元素样式
现在，您可以检查阴影根的子元素的样式。[crbug.com/279390]
控制台的 copy() 适用于对象
命令行 API 中的 copy() 方法现在适用于对象。接下来，请在控制台面板中输入 copy({foo:'bar'})，并注意剪贴板中现在显示了该对象的字符串化格式版本。[crbug.com/289348]
控制台的正则表达式过滤器
在“控制台”面板中使用正则表达式过滤控制台消息。crbug.com/318308]
轻松移除事件监听器
尝试在“控制台”面板中使用 getEventListeners(document).mousewheel[0]; 检索文档上的第一个鼠标滚轮事件监听器。在此基础上，请尝试使用 $_.remove() 移除该事件监听器（$_ = 最近一次求值的表达式的值）。crbug.com/309524]
移除了 CSS 警告
您可能见过的“CSS 属性值无效”类型的警告现已移除。我们一直在努力使此实现针对现实 CSS（包括浏览器黑客）更为稳健。crbug.com/309982]
时间轴操作汇总为饼图
“时间轴”面板的“详细信息”窗格中现在包含一个饼图，可直观显示渲染费用的来源，帮助您一目了然地找出瓶颈。
您会发现，以前在弹出式窗口中显示的许多信息现在都已移至自己的窗格。如需查看，请启动时间轴录制并选择一个画面，然后注意包含饼图的新“详细信息”窗格。在“帧”视图中，您可以查看所选帧的平均 FPS (1000ms/frame duration) 等有趣的统计数据。[crbug.com/247786]
图片大小调整事件详情
“时间轴”面板中的图片大小调整和解码事件现在包含指向“元素”面板中 DOM 节点的链接。
点击“图片网址”链接可前往“资源”面板中的相应资源。crbug.com/244159]
GPU 帧
现在，GPU 上发生的帧会显示在顶部，位于主线程上的帧上方。crbug.com/305863]
在 popstate 监听器上中断
'popstate' 现在可在“来源”面板边栏中用作事件监听器断点。[crbug.com/88112]
抽屉中提供的渲染设置
打开抽屉后，您会看到多个窗格，其中之一是“渲染”窗格，您可以使用它来显示绘制矩形、FPS 计量器等。默认情况下，此功能已启用，您可以在“设置”>“在控制台抽屉中显示‘渲染’视图”中启用此功能
以数据网址格式复制图片
现在，您可以将“资源”面板中的图片资源的内容复制为数据 URI (data:image/png;base64,iVBO...)。
如需试用此功能，请在“帧”> [资源] >“图片”中找到图片资源，然后右键点击图片预览以访问上下文菜单，然后选择“复制图片为数据网址”。crbug.com/321132]
数据 URI 过滤
如果您从未认为数据 URI 属于该类别，现在可以在“网络”标签页中滤除数据 URI。选择“过滤”图标
修复了网络时间 bug
如果您发现图片似乎需要 30 万年才能下载完毕，我们深表歉意。;) 网络资源的这些时间不正确的问题现已修正。crbug.com/309570]
对网络录制行为有更大控制
录制网络的行为略有不同。首先，录制按钮的运作方式与时间轴或 CPU 性能配置文件的预期用法完全相同。正如您所料，如果您在开发者工具打开的情况下重新加载网页，系统会自动开始网络记录。然后，该监听器会关闭，因此，如果您想在网页加载后捕获网络活动，请将其开启。这样，您就可以更轻松地直观呈现广告瀑布流，而不会因网络请求延迟而导致结果失真。crbug.com/325878]
现在可通过扩展程序使用 DevTools 主题
用户样式表现在可通过开发者工具实验（复选框：“允许自定义界面主题”）使用，这让 Chrome 扩展程序可以将自定义样式应用于开发者工具。如需查看示例，请参阅 DevTools 主题扩展程序示例。crbug.com/318566]
本期开发者工具精选内容到此结束。如果您尚未查看，请参阅 11 月版。