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

Sofia Emelianova
Sofia Emelianova

替换网络响应标头

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

通过响应标头替换项,您可以在本地对各种标头进行原型修复,包括但不限于:

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

通过标头覆盖修复了 CORS 错误。

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

添加自定义标头。

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

修改所有覆盖设置。

Chromium 问题:1288023

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

为帮助您在调试期间更快地查明问题,增强型堆栈轨迹现在会隐藏来自 Nuxt 3.3 或更高版本所生成来源的帧。开发者工具会跳过以下帧:

  • Console 跟踪记录中的显示另外 N 帧链接下。
  • Sources > Call Stack复选框。 Show ignore-listed frame 下。

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

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

DevTools 团队衷心感谢 Nuxt、Vite 和 Rollup 团队让这一切成为可能。对于此次实施的成功至关重要,感谢您的配合与合作。再次感谢您的贡献!

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

CSS 属性和值无效

为帮助您更快地诊断 CSS 问题Styles 窗格中现在划掉了以下内容:

  • CSS 属性无效时,包含完整的 CSS 声明(属性和值)。
  • 在 CSS 属性有效但值无效时,仅呈现值。

属性名称和属性值无效。

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

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

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

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

Chromium 问题:1420656

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

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

默认情况下,若要接受自动补全建议,您可以按 TabArrow right。如果也想使用 Enter 自动补全建议,请启用 设置。 设置 > 控制台 > 复选框。 按 Enter 键接受自动补全建议

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

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

Chromium 问题:1276960

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

现在,命令菜单中的快速打开对话框会将已列入忽略名单的第三方文件灰显,以更加强调您编写的文件。

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

Chromium 问题:1424345

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

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

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

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

废弃了 JavaScript 性能分析器。

Chromium 问题:1354548

其他亮点

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

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

下载预览渠道

您可以考虑将 Chrome Canary 版Dev 版Beta 版用作默认开发浏览器。通过这些预览渠道,您可以使用最新的开发者工具功能,测试先进的网络平台 API,并在用户采取行动之前发现网站上的问题!

与 Chrome 开发者工具团队联系

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

  • 通过 crbug.com 提交建议或反馈。
  • 使用开发者工具中的更多选项   了解详情   > Help > Report a DevTools issues来报告开发者工具问题。
  • 发推文:@ChromeDevTools
  • 请在 YouTube 视频或“开发者工具提示”YouTube 视频中留言说明“开发者工具的新变化”。

开发者工具的新变化

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

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 浏览器 112

Chrome 111

Chrome 浏览器 110

Chrome 入门指南

Chrome 入门指南

Chrome 入门指南

Chrome 入门指南

Chrome 入门指南

Chrome 入门指南

Chrome 入门指南

Chrome 入门指南

Chrome 入门指南

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

Chrome 82 已取消

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59