Chrome 138 开发者工具的新变化

改进了“效果”面板

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

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

效果 > 数据洞见 > 网络依赖树数据洞见现在会显示已用或未用的预连接来源和预连接候选来源（如有）。

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

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

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

效果 > 数据洞见 > 文档请求延迟时间数据洞见现在会显示服务器响应时间，以及重定向次数和重定向时间（如有）。

网络请求摘要中的重定向

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

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 开发者工具团队联系

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

• 请前往 crbug.com 向我们提交反馈和功能请求。
• 在开发者工具中，依次点击 more_vert 更多选项 > 帮助 > 报告 DevTools 问题，报告开发者工具问题。
• 在 Twitter 上向 @ChromeDevTools 发送推文。
• 在 DevTools 新变化 YouTube 视频或 DevTools 提示 YouTube 视频中发表评论。

开发者工具的新变化

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