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

欢迎回来!以下是新变化。

此页面的视频版本

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

将鼠标悬停在会影响节点框模型的 CSS 属性(例如 paddingmargin)上, 突出显示受该声明影响的所有节点。

将鼠标悬停在 margin 属性上会突出显示受该声明影响的所有节点

图 1. 将鼠标悬停在 margin 属性上可突出显示受该属性影响的所有节点的外边距 声明

Audits 面板中的 Lighthouse v4

新的点按目标大小不正确会审核此类互动元素(例如 按钮和链接在移动设备上适当地间隔开来。

报告的 PWA 类别现在使用标记评分系统。

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

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

WebSocket 二进制消息查看器

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

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

    “网络”面板

    图 4. “网络”面板

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

    点击 WS 后,仅显示 WebSockety 连接

    图 5. 点击 WS 后,仅显示 WebSockety 连接

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

    检查 WebSocket 连接

    图 6. 检查 WebSocket 连接

  4. 点击消息标签页。

    “消息”标签页

    图 7. “消息”标签页

  5. 点击其中一个二进制消息条目以对其进行检查。

    检查二进制消息

    图 8. 检查二进制消息

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

以 Base64 格式查看二进制消息

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

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

区域屏幕截图可让您截取部分视口的屏幕截图。此功能已 但访问它的工作流却相当隐蔽。区域屏幕截图现在 打开命令

  1. 将焦点移至开发者工具,然后按 Ctrl + Shift + PCommand + Shift + P (Mac) 打开命令菜单。

    命令菜单

    图 10. 命令菜单

  2. 开始输入 area,选择截取区域屏幕截图,然后按 Enter

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

    选择要截取屏幕截图的视口部分

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

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

在“网络”面板过滤条件中输入 is:service-worker-initiatedis:service-worker-intercepted 文本框,用于查看由以下用户导致 (initiated) 或可能修改 (intercepted) 的请求 Service Worker。

按 is:service-worker-initiated 过滤

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

按“is:service-worker- 感谢您”进行过滤

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

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

性能面板更新

性能记录现在会标记耗时较长的任务和 First Paint。

有关使用“性能”面板分析的示例,请参阅减少主线程工作 网页加载性能

性能记录中的长任务

性能记录现在会显示长tasks

将鼠标悬停在性能记录中的一项长任务上

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

“Timings”部分中的“First Paint”

“Performance”记录的“Timings”部分现在会标记“First Paint”。

“Timings”部分中的“First Paint”

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

新 DOM 教程

查看 开始查看和更改 DOM,了解有关 DOM 相关 功能。

下载预览渠道

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

与 Chrome 开发者工具团队联系

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

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

开发者工具的新变化

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