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

欢迎回来!新变化如下。

此网页的视频版本

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

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

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

图 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. 选择要截取屏幕截图的视口部分

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

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

按 is:service-worker-initiated 过滤

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

按 is:service-worker-decimaled 过滤

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

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

性能面板更新

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

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

演出录音中的长任务

性能录制内容现在会显示长时间运行的任务

将鼠标悬停在 Performance 录制内容中的较长任务上

图 14. 将鼠标悬停在 Performance 录制内容中的较长任务上

“Timings”部分中的 First Paint

Performance 记录的“时间”部分现在标记为“首次绘制”。

“Timings”部分中的 First Paint

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

新 DOM 教程

请参阅查看和更改 DOM 入门,了解 DOM 相关功能的实操导览。

下载预览渠道

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

与 Chrome 开发者工具团队联系

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

  • 通过 crbug.com 提交建议或反馈。
  • 使用开发者工具中的更多选项   了解详情   > Help > Report a DevTools issues来报告开发者工具问题。
  • 发推文:@ChromeDevTools
  • 请在 YouTube 视频或“开发者工具提示”YouTube 视频中留言说明“开发者工具的新变化”。

开发者工具的新变化

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

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 浏览器 112

Chrome 111

Chrome 浏览器 110

Chrome 入门指南

Chrome 入门指南

Chrome 入门指南

Chrome 入门指南

Chrome 入门指南

Chrome 入门指南

Chrome 入门指南

Chrome 入门指南

Chrome 入门指南

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

Chrome 82 已取消

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59