开发者工具的新变化 (Chrome 77)

Kayce Basques

复制元素的样式

右键点击 DOM 树中的某个节点，将该 DOM 节点的 CSS 复制到剪贴板。

复制样式。

图 1. 复制元素样式。

感谢 Adam Argyle 和 VisBug 提供灵感。

直观呈现布局偏移

假设您正在自己喜爱的网站上阅读新闻报道。在阅读网页时，您会因为内容跳动而不断丢失阅读位置。此问题称为布局偏移。这通常发生在图片和广告加载完毕时。网页未为图片和广告预留任何空间，因此浏览器必须将所有其他内容向下移，以便为它们腾出空间。解决方案是使用占位符。

现在，DevTools 可以帮助您检测布局偏移：

  1. 打开命令菜单。
  2. 开始输入 Rendering。
  3. 运行 Show Rendering 命令。
  4. 选中布局偏移区域复选框。当您与网页互动时，布局偏移会突出显示为蓝色。

布局偏移。

图 2. 布局偏移。

Chromium 问题 961846

“审核”面板中的 Lighthouse 5.1

“审核”面板现在运行的是 Lighthouse 5.1。新的审核包括：

新的“审核”面板界面。

图 3. 新的“审核”面板界面。

Lighthouse 5.1 的 Node 和 CLI 版本具有 3 项值得关注的新主要功能：

  • 效果预算。通过指定网页不应超出的请求数和文件大小，防止网站随着时间的推移而出现回归现象。
  • 插件。使用您自己的自定义审核扩展 Lighthouse。
  • 堆栈套装。添加针对特定技术栈量身定制的审核。WordPress 堆栈软件包先发布。React 和 AMP 堆栈套件正在开发中。

操作系统主题同步

如果您使用的是操作系统的深色主题，DevTools 现在会自动切换到自己的深色主题。

用于打开断点编辑器的键盘快捷键

当“Sources”面板的“Editor”处于焦点时，按 Control+Alt+B 或 Command+Option+B（Mac）可打开断点编辑器。使用断点编辑器创建日志点和条件断点。

断点编辑器。

图 4. 断点编辑器。

“网络”面板中的预取缓存

现在，当资源从预提取缓存加载时，“Network”（网络）面板的 Size（大小）列会显示 (prefetch cache)。预提取是一项新近推出的 Web 平台功能，可加快后续网页加载速度。Can I use... 报告显示，截至 2019 年 7 月，全球 83.33% 的浏览器都支持该功能。

“大小”列，显示资源来自预提取缓存。

图 5. Size 列显示 prefetch2.html 和 prefetch2.css 来自 (prefetch cache)。

如需试用，请参阅预提取演示。

Chromium 问题 935267

查看对象时的私有属性

现在，控制台会在对象预览中显示私有类字段。

现在，在检查对象时，控制台会显示“#color”等私有字段。

图 6. 左侧的旧版 Chrome 在检查对象时不会显示 #color 字段，而右侧的新版 Chrome 会显示。

“应用”面板中的通知和推送消息

“应用”面板的“后台服务”部分现在支持推送消息和通知。当服务器向服务工作器发送信息时，就会发生推送消息。当服务工作器或网页脚本向用户显示信息时，就会发生通知。

与 Chrome 76 中的后台提取和后台同步功能一样，一旦您开始录制，系统会在 3 天内记录此网页上的推送消息和通知，即使网页关闭，即使 Chrome 关闭也是如此。

新的“通知”和“推送消息”窗格。

图 7. “应用”面板中新增了“推送消息”和“通知”窗格。

Chromium 问题 927726

下载预览渠道

不妨考虑将 Chrome Canary 版、开发者版或 Beta 版用作默认开发浏览器。通过这些预览版渠道，您可以使用最新的 DevTools 功能、测试尖端的 Web 平台 API，并帮助您在用户发现问题之前发现网站上的问题！

与 Chrome DevTools 团队联系

您可以使用以下选项讨论与 DevTools 相关的新功能、更新或任何其他内容。

开发者工具的新变化

DevTools 新变化系列中涵盖的所有内容的列表。