DevTools 支持修改响应头，包括修改响应头的值、删除和添加响应头。

要修改某个响应头的值，可以通过导航到 Network > Headers > Response Headers，将鼠标悬停在头部信息的值上，然后单击编辑并进行修改。

你也可以添加一个自定义 Header：

要在一个地方编辑所有的修改信息，可以编辑 Sources > Overrides 下的 .headers 文件。在那里，您还可以单击“Add override rule”以使用通配符 (*) 覆盖多个请求。

个人认为，这个新特性对于临时改动某个请求的 Header 比较有用，如果是集中管理 Header 的修改，其实并不方便，操作链路比较长。

该特性目前包括：Nuxt、Vite 和 Rollup

为了帮助您在调试期间更快地确定问题，增强的堆栈跟踪隐藏了来自 Nuxt 3.3 或更高版本生成的源代码中的错误栈。对于一个报错，我们通常更关注报错堆栈中业务代码的报错，其中的第三方框架的报错大多数情况下我们不需要关注，所以隐藏这些错误堆栈更有利于我们快速定位问题。

点击开始录制后，Recorder 开始录制你的操作行为，通过点击“Add assertion”可以设置断言。看个 coffee 示例，如果断言不通过会报错：

为了更快地诊断 CSS 问题，Styles 面板中的代码将被用横线划掉：

文中介绍的新特性是我们可能会经常用到的，还有其他特性可以参考这里。前两个对于我们日常开发还是很有帮助的，不过在体验上可能还有待改进，比如：

• 对于修改响应头，哪些请求的响应头被修改了没有标明出来，如何让集中管理更方便；

• 对于堆栈隐藏，能否通过代码配置堆栈的隐藏等。

如果想体验这些新特性，可以下载 chrome canary 试用。

欢迎留言交流，如果对你有价值，欢迎点赞关注😄

developer.chrome.com/blog/new-in…