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

Sofia Emelianova
Sofia Emelianova

替换网络响应标头

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

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

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

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

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

添加自定义标头。

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

修改所有替换项。

Chromium 问题:1288023

改进了 Nuxt、Vite 和 Rollup 调试

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

  • Console 轨迹的“显示更多 N 个帧”链接下。
  • 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) 开始,您可以配置开发者工具 Console,以便在您按 Enter 时应用自动补全建议。

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

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

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

Chromium 问题:1276960

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

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

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

Chromium 问题:1424345

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

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

开发者工具 113 版开始了四阶段 JavaScript 性能分析器弃用第二阶段。在此阶段,您仍然可以打开该面板,但其界面将无法再使用。

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

废弃了 JavaScript 性能分析器。

Chromium 问题:1354548

其他亮点

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

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

下载预览渠道

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

与 Chrome DevTools 团队联系

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

开发者工具的新变化

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