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

Sofia Emelianova
Sofia Emelianova
GitHub
Jecelyn Yeen

替换网络响应标头

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

通过响应标头替换，您可以在本地对各种标头进行原型设计，包括但不限于：

如需替换标头，请前往 Network >标题 >Response Headers，将鼠标悬停在某个标头的值上，点击 修改。 进行修改。

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

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

添加自定义标头。

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

正在修改所有替换项。

Chromium 问题：1288023。

改进了 Nuxt、Vite 和 Rollup 调试

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

  • 在“控制台”跟踪记录中的显示另外 N 个帧链接下。
  • 在来源 >Call Stack（在 复选框。 显示已列入忽略列表的帧下）下。

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

为了给您提供这些改进，开发者工具、Nuxt、Vite 和 Rollup 团队通力合作，采用了 x_google_ignoreList 源代码映射扩展程序：

开发者工具团队非常感谢 Nuxt、Vite 和 Rollup 团队让这一切成为可能。非常感谢您的合作和配合，这对此次实施的成功至关重要。再次感谢您的贡献！

元素中的 CSS 改进 >风格

CSS 属性和值无效

为帮助您更快地诊断 CSS 问题，我们现在将 Styles 窗格划掉：

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

属性名称和属性值无效。

开发者工具团队衷心感谢 Yisi(一丝) 完成这项改进。

指向动画简略属性中关键帧的链接

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

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

Chromium 问题：1420656。

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

从以前的版本 (112) 开始，您可以将开发者工具 Console 配置为在您按 Enter 时应用自动补全建议。

默认情况下，若要接受自动补全建议，您可以按 Tab 或 Arrow right。若要使用 Enter 也自动补全，请启用 设置。 设置 >控制台 >复选框。 按 Enter 键时接受自动补全建议。

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

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

Chromium 问题：1276960。

命令菜单可突出显示编辑的文件

命令菜单中的“快速打开”对话框现在会将已忽略的第三方文件显示为灰色，以更加强调您编写的文件。

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

Chromium 问题：1424345。

JavaScript Profiler 弃用：第二阶段

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

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

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

弃用了 JavaScript Profiler。

Chromium 问题：1354548。

其他亮点

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

  • 修复了导致 Sources 面板中美观输出，以错误处理包含 Unicode 字符的变量名称的错误 (1425055)。
  • 问题标签页针对与非标准 HTML 值有关的自动填充问题添加了新消息 (1399414)。

下载预览渠道

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

与 Chrome 开发者工具团队联系

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

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

开发者工具的新变化

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