Chrome 138 开发者工具的新变化

改进了效果面板

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

“网络依赖关系树”数据分析中的预连接源

现在，依次选择效果 > 数据分析 > 网络依赖项树数据分析，即可查看已使用或未使用的预连接源和预连接候选来源（如果有）的列表。

借助预连接提示，您的网站可以尽早与重要的第三方来源建立连接，从而提高网页加载速度。

如需了解详情，请参阅预先连接到必需的源。

“文档请求延迟时间”数据分析中的服务器响应时间和重定向时间

现在，依次选择效果 > 数据分析 > 文档请求延迟时间数据分析，即可查看服务器响应时间以及重定向次数和重定向时间（如果有）。

“网络请求摘要”中的重定向

性能面板现在会在网络请求的摘要和提示中显示重定向网址。

Chromium 问题：402353313。

减少了性能轨迹中的噪声

性能面板现在不会显示 v8 JavaScript 引擎的 compile 类别中的事件。以前，这些事件会造成大量不必要的开销和噪声，尤其是 compile code 事件。

如果您发现现在缺少一些对您来说很重要的事件，欢迎随时在 crbug.com/414330508 中留下反馈。

废弃了“停用 JavaScript 示例”

由于用处不大且使用率较低，性能 > 捕获设置中的停用 JavaScript 示例选项已废弃并移除。

Chromium 问题：414734883。

“传感器”中的地理定位精确度参数

现在，您可以在 Sensors 面板中设置地理位置模拟的精确度。这样，您就可以测试对不同级别 GPS 准确度的处理方式。

Chromium 问题：40074843。

“元素”面板改进

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

更轻松地调试复杂的 CSS 值

为了帮助您调试复杂的 CSS 值，元素 > 样式标签页现在会在您悬停时显示相关提示：

• CSS 变量的完整定义链，这样您就不必点击多个链接。
• 对复杂 CSS 计算进行分步评估，以便您更高效地发现 bug，并更深入地了解值的计算方式。

该提示会以多行显示定义链（每行一个定义），您可以展开复杂的计算并将鼠标悬停在值上，以突出显示计算值并将其追溯到其初始表达式。

Chromium 问题：396080529。

在“元素”>“样式”中添加了对 @function 的支持

为准备好在 Chrome 中支持 @function，元素 > 样式标签页现在会在专用部分将自定义函数名称与其定义相关联。

“网络”面板改进

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

has-request-header 个过滤条件

网络面板现在支持 has-request-header 过滤条件，可让您按特定请求标头名称进行过滤。

Chromium 问题：397481040。

独立式 Web 应用中的 Direct Sockets

现在，您可以在网络面板中通过 TCPSocket、UDPSocket（在绑定模式下）和 UDPSocket（在连接模式下）监控隔离的 Web 应用 (IWA) 的流量。

为此，请选择表格中常规请求旁边的 directscoket 连接，然后在消息标签页中选择一条消息。

独立式 Web 应用 (IWA) 为 Web 应用提供了高信任安全模型。如需了解详情，请参阅独立式 Web 应用使用入门，并查看实现 Direct Sockets API 的演示版应用。

其他亮点

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

• 应用 > 存储：移除了已废弃的 Web SQL 选项 (crbug.com/412707590)。
• 元素：
  • 默认启用突出显示 DOM 中元素和属性存在的问题。
  • 样式：向 overflow 自动补全选项添加了 clip 值。
• 网络：从复制为提取选项中移除了 Referrer-Policy HTTP 标头，因为它是用于控制浏览器行为的响应标头，而不是客户端指令 (crbug.com/413904896)。
• 性能：从工作器线程中移除了“长任务”警告，因为它们不会阻塞主线程 (crbug.com/40248589)。
• 问题：现在报告：
  • 如果屏蔽了任何疑似跟踪用户的资源。
  • 跳出跟踪缓解措施，无论其是否在重定向期间访问存储空间。
• 可访问性。元素 > 样式中的以下元素现在可通过键盘获得焦点：
  • 阴影色块 (crbug.com/401213105)。
  • 锚点定位名称链接 (crbug.com/401213107)。
  • Flex 和网格编辑器按钮 (crbug.com/401213522)。
  • 长度 (crbug.com/401211976)。
  • 网址链接 (crbug.com/401213104)。
  • 属性名称和值 (crbug.com/417458979)。

下载预览渠道

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

与 Chrome 开发者工具团队联系

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

• 请访问 crbug.com 向我们提交反馈和功能请求。
• 在 DevTools 中，依次选择 more_vert More options > Help > Report a DevTools issue 以报告 DevTools 问题。
• 向 @ChromeDevTools 发送推文。
• 在 “开发者工具的新变化”YouTube 视频或 “开发者工具提示”YouTube 视频中留言。

开发者工具的新变化

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