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

Sofia Emelianova
Sofia Emelianova
GitHub
Jecelyn Yeen

替换网络响应标头

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

借助响应标头替换项，您可以在本地对各种标头（包括但不限于）进行修复原型设计：

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

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

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

添加自定义标头。

如需在一个位置修改所有替换项，请依次前往 Sources > Overrides 修改 .headers 文件。您还可以点击添加替换规则，使用通配符 (*) 替换多个请求。

修改所有替换项。

Chromium 问题：1288023。

改进了 Nuxt、Vite 和 Rollup 调试

为了帮助您在调试期间更快地查明问题，增强型堆栈轨迹现在会隐藏由 Nuxt 3.3 或更高版本生成的来源的帧。DevTools 会跳过此类帧：

  • 在 Console 轨迹的 Show N more frames（显示更多帧）链接下。
  • 在 Sources > Call Stack 中，找到 复选框。 Show ignore-listed frames（显示列入忽略列表的帧）。

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

为了为您提供这些改进，DevTools、Nuxt、Vite 和 Rollup 团队合作采用了 x_google_ignoreList 源代码映射扩展：

开发者工具团队衷心感谢 Nuxt、Vite 和 Rollup 团队，他们为此做出了巨大贡献。感谢您的努力和配合，这对此次实施的顺利完成至关重要。再次感谢您的贡献！

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

CSS 属性和值无效

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

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

属性名称和属性值无效。

开发者工具团队谨在此感谢 Yisi 为我们带来这项改进。

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

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

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

Chromium 问题：1420656。

新的 Play 管理中心设置：按 Enter 键自动补全

从上一个版本 (112) 开始，您可以配置 DevTools Console，以便在您按 Enter 时应用自动补全建议。

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

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

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

Chromium 问题：1276960。

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

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

更改前后，快捷打开对话框中的列入忽略列表的脚本。

Chromium 问题：1424345。

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

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

从 DevTools 版本 113 开始，四阶段的 JavaScript 性能分析器弃用进入了第二阶段。在此阶段，您仍然可以打开该面板，但其界面将无法再使用。

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

废弃了 JavaScript 性能分析器。

Chromium 问题：1354548。

其他亮点

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

  • 修复了导致 Sources 面板中的美化输出无法正确处理包含 Unicode 字符的变量名称的 bug (1425055)。
  • 问题标签页中针对与非标准 HTML 值相关的自动填充问题添加了一条新消息 (1399414)。

下载预览渠道

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

与 Chrome DevTools 团队联系

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

开发者工具的新变化

DevTools 新变化系列中涵盖的所有内容的列表。