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

Sofia Emelianova
Sofia Emelianova

替换网络响应标头

您现在可以在 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 时应用自动补全建议。

默认情况下,若要接受自动补全建议,您可以按 TabArrow 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 视频发表评论。

开发者工具的新变化

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