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 列表新增了两个与滚动贴靠相关的事件监听器：scrollsnapchange 和 scrollsnapchanging。当您以会导致滚动容器贴靠到新元素的方式滚动滚动容器时，系统会触发这些事件。

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

Chromium 问题：40286359。

“网络”面板改进

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

更新了网络节流预设

网络面板更新了节流预设：新增了快速 4G，快速 3G 重命名为慢速 4G，慢速 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 面板现在会捕获发送 WebSocket 消息和接收 WebSocket 消息事件，并在性能跟踪记录中显示这些事件。例如：

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

Chromium 问题：40286129。

其他精彩集锦

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

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

下载预览渠道

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

与 Chrome 开发者工具团队联系

您可以通过以下方式讨论新功能、更新或与开发者工具有关的任何其他内容。

开发者工具的新变化

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