开发者工具中的新功能 (Chrome 113)

Sofia Emelianova
Sofia Emelianova
GitHub
Jecelyn Yeen

Google 用户调研。

替换网络响应标头

您现在可以在网络面板中覆盖响应标头。以前，您需要访问网络服务器才能对 HTTP 响应标头进行实验。

借助响应标头替换功能，您可以针对各种标头（包括但不限于以下标头）在本地测试修复方案：

如需替换标头，请依次前往网络 > 标头 > 响应标头，将光标悬停在标头的值上，点击 修改。 并进行修改。

通过标头替换修复了 CORS 错误。

您还可以添加自定义标头。

添加自定义标头。

如需在一个位置修改所有替换项，请修改来源 > 替换项中的 .headers 文件。您还可以在此处点击添加替换规则，以使用通配符 (*) 替换多个请求。

修改所有覆盖设置。

Chromium 问题：1288023。

Nuxt、Vite 和 Rollup 调试方面的改进

为了帮助您在调试期间更快地找出问题，增强型堆栈轨迹现在会隐藏来自 Nuxt 3.3 或更高版本生成的来源的帧。开发者工具会跳过此类帧：

  • 在控制台轨迹中，位于显示另外 N 个帧链接下方。
  • 在来源 > 调用堆栈中，点击 复选框。 显示已列入忽略名单的帧。

启用第三方忽略列表之前和之后的堆栈轨迹。

为了实现这些改进，DevTools、Nuxt、Vite 和 Rollup 团队协作采用了 x_google_ignoreList 源代码映射扩展程序：

DevTools 团队要感谢 Nuxt、Vite 和 Rollup 团队，因为他们的努力才让这一功能得以实现。感谢您的努力和协作，这对成功实现此功能至关重要。再次感谢您做出的贡献！

“元素”>“样式”中的 CSS 改进

无效的 CSS 属性和值

为了帮助您更快地诊断 CSS 问题，样式窗格现在会划掉以下内容：

  • 当 CSS 属性无效时，整个 CSS 声明（属性和值）。
  • 仅当 CSS 属性有效但值无效时。

无效的属性名称和无效的属性值。

开发者工具团队要感谢 Yisi(一丝) 实现了这项改进。

动画简写属性中的关键帧链接

animation 简写 CSS 属性现在包含指向相应 @keyframes at-rule 的链接，因此您可以更快地浏览样式窗格。

指向动画简写属性中的关键帧。

Chromium 问题：1420656。

新的控制台设置：按 Enter 键时自动补全

从上一个版本 (112) 开始，您可以将开发者工具控制台配置为在您按 Enter 时应用自动补全建议。

默认情况下，如需接受自动补全建议，您可以按 Tab 或 Arrow right。如需使用 Enter 进行自动补全，请依次启用 设置。 设置 > 控制台 > 复选框。 在按 Enter 键时接受自动补全建议。

“设置”中的相应复选框。

此外，另一项设置的文本现在更加贴近用户：复选框。 将代码评估视为用户操作。

Chromium 问题：1276960。

命令菜单突出显示了已创作的文件

命令菜单中的“快速打开”对话框现在会灰显已列入忽略名单的第三方文件，以便更突出地显示您创建的文件。

更改前和更改后，快速打开对话框中被忽略的脚本。

Chromium 问题：1424345。

JavaScript 性能分析器弃用：第二阶段

早在 Chrome 58 中，开发者工具团队就计划最终弃用 JavaScript 性能分析器，并让 Node.js 和 Deno 开发者使用性能面板来分析 JavaScript CPU 性能。

开发者工具版本 113 开始分四个阶段弃用 JavaScript 分析器的第二阶段。在此阶段，您仍然可以打开面板，但其界面不再可用。

如需分析 CPU 性能，请点击前往“性能”面板。

JavaScript 性能分析器已弃用。

Chromium 问题：1354548。

其他亮点

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

  • 修复了以下 bug：来源面板中的美观打印功能无法正确处理包含 Unicode 字符的变量名称 (1425055)。
  • 问题标签页针对与非标准 HTML 值相关的自动填充问题添加了一条新消息 (1399414)。

下载预览渠道

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

与 Chrome 开发者工具团队联系

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

开发者工具的新变化

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