Chrome 127 开发者工具的新变化

Sofia Emelianova
Sofia Emelianova
GitHub

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

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

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

将 popovertarget 与其 popover 元素相关联之前和之后。

“来源”面板改进

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

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

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

  • 内置函数引发的异常或 promise 拒绝。
  • “取消”DOM、提取/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 格式的自定义字段中的服务工件信息

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

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

Chromium 问题：342406608。

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

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

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

Chromium 问题：40286129。

其他亮点

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

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

下载预览渠道

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

与 Chrome DevTools 团队联系

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

开发者工具的新变化

DevTools 新变化系列中涵盖的所有内容的列表。