Chrome 127 开发者工具的新变化

Sofia Emelianova
Sofia Emelianova
GitHub

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

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

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

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

来源面板改进

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

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

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

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

查看实际的工作流：

Chromium 问题：40924349。

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

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

下载预览渠道

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

与 Chrome 开发者工具团队联系

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

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

开发者工具的新变化

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