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

Sofia Emelianova
Sofia Emelianova

替换网络响应标头

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

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

要替换标头,请导航至网络 > 标头 > 响应标头,将鼠标悬停在标头的值上,点击 修改。 并进行修改。

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

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

添加自定义标头。

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

正在修改所有替换项。

Chromium 问题:1288023

改进了 Nuxt、Vite 和 Rollup 调试

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

  • “控制台”跟踪记录中的显示另外 N 个帧链接下。
  • Sources > Call Stack 中,位于 复选框。 Show ignore-listed frame 下。

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

为了给您提供这些改进,开发者工具、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 视频发表评论。

开发者工具的新变化

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

Chrome 127

Chrome 126

Chrome 125

Chrome 124

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 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

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