开发者工具中的新功能 (Chrome 74)

Kayce Basques

欢迎回来！以下是最新动态。

此页面的视频版本

突出显示受 CSS 属性影响的所有节点

将鼠标悬停在影响节点盒模型的 CSS 属性（例如 padding 或 margin）上，以突出显示受相应声明影响的所有节点。

图 1. 将鼠标悬停在 margin 属性上，系统会突出显示受相应声明影响的所有节点的边距

“审核”面板中的 Lighthouse v4

新的点按目标的大小不合适审核会检查移动设备上的按钮和链接等互动元素是否具有适当的大小和间距。

报告的 PWA 类别现在使用徽章评分系统。

图 3. PWA 类别的全新徽章评分系统

WebSocket 二进制消息查看器

如需查看二进制 WebSocket 消息的内容，请执行以下操作：

1. 打开网络面板。如需了解分析网络活动的基础知识，请参阅检查网络活动。

   

   图 4. “网络”面板

2. 点击 WS 可过滤掉所有非 WebSocket 连接的资源。

   

   图 5. 点击后，系统仅显示 WebSocket 连接

3. 点击 WebSocket 连接的名称以检查该连接。

   

   图 6. 检查 WebSocket 连接

4. 点击消息标签页。

   

   图 7. “消息”标签页

5. 点击其中一个二进制消息条目即可检查该条目。

   

   图 8. 检查二进制消息

使用查看器底部的下拉菜单将消息转换为 Base64 或 UTF-8。点击复制到剪贴板图标 ，将二进制消息复制到剪贴板。

图 9. 以 Base64 格式查看二进制消息

在命令菜单中截取区域屏幕截图

区域屏幕截图功能可让您截取视口的一部分。此功能已推出一段时间，但访问它的工作流程非常隐蔽。现在，您可以通过命令菜单截取区域屏幕截图。

1. 将焦点放在开发者工具上，然后按 Control+Shift+P 或 Command+Shift+P (Mac) 打开命令菜单。

   

   图 10. 命令菜单

2. 开始输入 area，选择拍摄区域屏幕截图，然后按 Enter 键。

3. 将鼠标拖动到要截屏的视口部分。

   

   图 11. 选择要截屏的视口部分

“网络”面板中的 Service Worker 过滤条件

在“网络”面板过滤条件文本框中输入 is:service-worker-initiated 或 is:service-worker-intercepted，以查看由服务工作线程导致 (initiated) 或可能修改 (intercepted) 的请求。

图 12. 按“is:service-worker-initiated”过滤

图 13. 按“is:service-worker-intercepted”过滤

如需详细了解如何过滤网络日志，请参阅过滤资源。

性能面板更新

性能记录现在会标记长任务和首次绘制。

如需查看使用“性能”面板分析网页加载性能的示例，请参阅减少主线程工作。

性能记录中的长任务

性能记录现在会显示长时间运行的任务。

图 14. 将鼠标悬停在性能记录中的长任务上

“Timings”部分中的“First Paint”

性能记录的“时间”部分现在会标记 First Paint。

图 15. “Timings”部分中的“First Paint”

新增 DOM 教程

如需了解 DOM 相关功能的实操教程，请参阅查看和更改 DOM 使用入门。

下载预览渠道

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

与 Chrome 开发者工具团队联系

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

• 请前往 crbug.com 向我们提交反馈和功能请求。
• 在开发者工具中，依次点击 more_vert 更多选项 > 帮助 > 报告 DevTools 问题，报告开发者工具问题。
• 在 Twitter 上向 @ChromeDevTools 发送推文。
• 在 DevTools 新变化 YouTube 视频或 DevTools 提示 YouTube 视频中发表评论。

开发者工具的新变化

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