Chrome 127 开发者工具的新变化

Sofia Emelianova
Sofia Emelianova
GitHub

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

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

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

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

“来源”面板改进

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

改进了“一律不在此处暂停”功能

借助“Never Pause Here”（从不在此处暂停）选项，您可以阻止调试程序反复在同一行上暂停。这样，您就可以更轻松地处理反复触发的无关断点。此版本增强了此功能，现在适用于以下设备：

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

查看工作流程的实际运作方式：

Chromium 问题：40924349。

新的滚动卡顿事件监听器

依次选择 Sources > Event Listener Breakpoints > Control 列表，即可获取两个与 scroll-snap 相关的监听器：scrollsnapchange 和 scrollsnapchanging。当您以会导致滚动容器贴靠到新元素的方式滚动滚动容器时，系统会触发这些事件。

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

Chromium 问题：40286359。

改进了“网络”面板

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

更新了网络节流预设

网络面板更新了节流预设：新增了高速 4G，高速 3G 已重命名为低速 4G，低速 3G 已重命名为3G。这样更符合 Lighthouse 的预设。

更新网络节流预设值前后。

Chromium 问题：342406608。

HAR 格式的自定义字段中的服务工件信息

现在，在将网络日志导出为 HAR 格式时，您可以将与服务工件相关的信息（包括时间）视为自定义字段（以下划线开头）。例如，您可能会在日志中看到以下新字段：

...
"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 事件，并在性能轨迹中显示这些事件。例如：

性能轨迹中捕获的“Receive WebSocket Message”事件。

Chromium 问题：40286129。

其他亮点

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

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

下载预览渠道

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

与 Chrome DevTools 团队联系

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

开发者工具的新变化

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