此页面由 Cloud Translation API 翻译。

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

Kayce Basques

复制元素的样式

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

复制样式。

图 1. 复制元素样式。

感谢 Adam Argyle 和 VisBug 的灵感。

直观呈现布局偏移

假设您正在阅读自己喜爱的网站上的一篇新闻报道。您在阅读网页时，由于内容在不断跳动，您可能会迷失方向。此问题称为布局偏移。通常，在图片和广告加载完毕时会出现此问题。网页没有为图片和视频预留任何空间，因此浏览器必须将所有其他内容向下移动，为它们腾出空间。解决方法是使用placeholders。

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

打开命令菜单。
开始输入 Rendering。
运行 Show Rendering 命令。
选中 Layout Shift Regions 复选框。当您与页面互动时，布局偏移会以蓝色突出显示。

布局偏移。

图 2. 布局偏移。

Chromium 问题 961846

Audits 面板中的 Lighthouse 5.1

Audits 面板现正在运行 Lighthouse 5.1。新的审核包括：

提供有效的 apple-touch-icon。检查是否可以将 PWA 添加到 iOS 主屏幕。
保持较小的请求数量和文件大小。报告各种类别（如文档、脚本、样式表、图片等）的网络请求总数和文件大小。
最长可能的 First Input Delay。衡量从用户进行第一页互动到浏览器响应这次互动之间可能用到的最长时间。请注意，此指标取代了“估算的输入延迟时间”指标。最大可能的 First Input Delay 不会计入您的“性能”类别得分。

新的“审核”面板界面。

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

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

效果预算。指定页面不应超出的请求计数和文件大小，防止网站在一段时间内性能下降。
插件。使用您自己的自定义审核扩展 Lighthouse。
堆栈包。添加针对特定技术栈量身定制的审核。WordPress 堆栈包最先发布React 和 AMP Stack Pack 尚处于开发阶段。

操作系统主题同步

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

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

在“Sources”面板的编辑器中聚焦时，按 Ctrl+Alt+B 或 Command+Option+B (Mac) 以打开 Breakpoint Editor。使用断点编辑器创建日志点和条件断点。

断点编辑器。

图 4. 断点编辑器。

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

现在，当从预提取缓存加载资源时，Network 面板的 Size 列会显示 (prefetch cache)。预提取是一项全新的网络平台功能，用于加快后续网页加载的速度。根据我能否使用...报告，截至 2019 年 7 月，全球有 83.33% 的浏览器支持该功能。

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

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

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

Chromium 问题 935267

查看对象时的私有属性

控制台现在会在其对象预览中显示不公开类字段。

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

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

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

“Application”面板的“Background Services”部分现在支持推送消息和通知。推送消息是指服务器向 Service Worker 发送信息。在 Service Worker 或页面脚本向用户显示信息时发生通知。

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

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

图 7. Application 面板中的全新 Push Messages 和 Notifications 窗格。

Chromium 问题 927726

下载预览渠道

请考虑将 Chrome Canary、开发者版或 Beta 版用作您的默认开发浏览器。通过这些预览渠道，您可以访问最新的开发者工具功能，测试先进的网络平台 API，并在用户之前发现您网站上的问题！

与 Chrome 开发者工具团队联系

使用以下选项讨论博文中的新功能和变更，或与开发者工具相关的任何其他内容。

请通过 crbug.com 提交建议或反馈。
在开发者工具中使用更多选项 > 帮助 > 报告开发者工具问题来报告开发者工具问题。
请发送电子邮件至 @ChromeDevTools。
请对我们的开发者工具新功能 YouTube 视频或开发者工具提示 YouTube 视频发表评论。