Chrome 127 开发者工具的新变化

Sofia Emelianova
Sofia Emelianova
GitHub

为帮助您更轻松地调试锚点定位功能，样式标签页现在会将显式锚点标识符和隐式锚点链接到其节点。

关联显式和隐式锚点之前和之后。

此外，popovertarget 属性值现在会链接到其在 DOM 中的 popover 元素。

将 popovertarget 链接到其弹出式窗口元素之前和之后。

Chromium 问题：289900232、330306231。

来源面板改进

此版本对 Sources 面板进行了多项改进。

增强了“永不暂停在此处”

您可以使用“永不暂停在此处”选项防止 Debugger 在同一行上一次又一次地暂停。这样，您就可以更轻松地使用重复触发的不相关断点。此版本增强了此功能，现在适用于：

  • 内置函数引发的异常或 promise 拒绝。
  • “取消”DOM、fetch/XHR 和 CSP 违规断点。
  • 在 Wasm 中反汇编。

查看实际的工作流：

Chromium 问题：40924349。

新增了滚动贴靠事件监听器

来源 > 事件监听器断点 > 控件列表获取两个与滚动 snap 相关的监听器：scrollsnapchange 和 scrollsnapchanging。当您以导致滚动容器贴靠到新元素的方式滚动容器时，会触发这些事件。

添加与滚动贴靠相关的事件监听器之前和之后。

Chromium 问题：40286359。

网络面板改进

此版本对 Network 面板进行了多项改进。

已更新网络节流预设

Network 面板更新了节流预设：新增了 Fast 4G，Fast 3G 重命名为 Slow 4G，Slow 3G 重命名为 3G。这与 Lighthouse 的预设更加一致。

更新网络节流预设之前和之后。

Chromium 问题：342406608。

HAR 格式的自定义字段中的 Service Worker 信息

将网络日志导出为 HAR 格式时，您现在可以看到与 Service Worker 相关的信息（包括时间）以自定义字段（以下划线为前缀）形式显示。例如，您可能会在日志中找到以下新字段：

...
"response": {
  ...
  "_fetchedViaServiceWorker": true,
  "_responseCacheStorageCacheName": "V1",
  "_serviceWorkerResponseSource": "cache-storage"
}
...
"timings": {
  ...
  "_workerStart": -1,
  "_workerReady": -1,
  "_workerFetchStart": -1,
  "_workerRespondWithSettled": -1
}
...

Chromium 问题：342406608。

在“性能”面板中发送和接收 WebSocket 事件

与其他 WebSocket 事件类似，Performance 面板现在会捕获 Send WebSocket Message 和 Receive WebSocket Message 事件，并在性能跟踪记录中显示这些事件。例如：

在性能跟踪记录中捕获的“接收 WebSocket 消息”事件。

Chromium 问题：40286129。

其他亮点

以下是此版本中值得注意的一些修复和改进：

  • 无障碍功能：现在，当您使用向上和向下箭头键 (344484979) 滚动浏览日志时，屏幕阅读器会在控制台中读出消息内容。
  • 来源：
    • 页面：另存为菜单选项现在会将 Wasm 模块文件保存为有效的 wasm 二进制文件，而不是 Base64 文本 (40784130)。
    • 调用堆栈：从 Async 调用帧说明中移除了 (async) 后缀，将其突出显示状态从斜体改为粗体 (343750870)。
  • 内存：从堆快照 Summary 中移除了不必要的零大小的 InternalNodes (340200025)。
  • 网络：修复了以下 bug：对于刚刚启动但尚未收到 responseReceived 事件的请求，无法预览流式响应内容 (338340752)。
  • 性能：
    • 选择器统计信息：为 %-of-Slow-Path-Non-Matches 列添加了说明性提示 (324282954)。
    • 轨道配置模式：完成轨道配置按钮已移至右下角 (345256274)。
  • 控制台：修复了使用往返缓存进行导航时显示多条相同的控制台消息的 bug (40894153)。
  • 设置：在所有标签页旁边添加了帮助程序图标 (330213867)。

下载预览渠道

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

与 Chrome 开发者工具团队联系

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

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

开发者工具的新变化

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

Chrome 127

Chrome 126

Chrome 125

Chrome 124

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 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

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