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

Kayce Basques
Kayce Basques
X GitHub

Google 用户调研。

复制元素的样式

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

复制样式。

图 1. 复制元素样式。

感谢 Adam Argyle 和 VisBug 提供的灵感。

直观呈现布局偏移

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

开发者工具现在可以帮助您检测布局偏移：

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

布局偏移。

图 2. 布局偏移。

Chromium 问题 #961846

“审核”面板中的 Lighthouse 5.1

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

新的“审核”面板界面。

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

Lighthouse 5.1 的 Node 和 CLI 版本有 3 个值得一试的新主要功能：

  • 性能预算。通过指定网页不应超过的请求数和文件大小，防止您的网站随时间推移而退化。
  • 插件。使用您自己的自定义审核扩展 Lighthouse。
  • Stack Pack。添加了针对特定技术堆栈量身定制的审核。WordPress Stack Pack 最先发布。React 和 AMP Stack Pack 正在开发中。

操作系统主题同步

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

用于打开“Breakpoint Editor”的键盘快捷键

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

断点编辑器。

图 4. 断点编辑器。

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

如果资源是从预提取缓存加载的，“Network”（网络）面板的“Size”（大小）列现在会显示 (prefetch cache)。预提取是一项较新的 Web 平台功能，可加快后续网页加载速度。我可以使用的...报告，截至 2019 年 7 月，全球 83.33% 的浏览器都支持这些报告。

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

图 5. 大小列显示 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 开发者工具团队联系

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

开发者工具的新变化

开发者工具的新变化系列中涵盖的所有内容。