DevTools 支持修改响应头,包括修改响应头的值、删除和添加响应头。
要修改某个响应头的值,可以通过导航到 Network > Headers > Response Headers,将鼠标悬停在头部信息的值上,然后单击编辑并进行修改。
你也可以添加一个自定义 Header:
要在一个地方编辑所有的修改信息,可以编辑 Sources > Overrides 下的 .headers 文件。在那里,您还可以单击“Add override rule”以使用通配符 (*) 覆盖多个请求。
个人认为,这个新特性对于临时改动某个请求的 Header 比较有用,如果是集中管理 Header 的修改,其实并不方便,操作链路比较长。
错误堆栈隐藏
该特性目前包括:Nuxt、Vite 和 Rollup
为了帮助您在调试期间更快地确定问题,增强的堆栈跟踪隐藏了来自 Nuxt 3.3 或更高版本生成的源代码中的错误栈。对于一个报错,我们通常更关注报错堆栈中业务代码的报错,其中的第三方框架的报错大多数情况下我们不需要关注,所以隐藏这些错误堆栈更有利于我们快速定位问题。
Recorder 支持断言
点击开始录制后,Recorder 开始录制你的操作行为,通过点击“Add assertion”可以设置断言。看个 coffee 示例,如果断言不通过会报错:
Elements > Styles 中的 CSS 改进
无效的 CSS 属性和值
为了更快地诊断 CSS 问题,Styles 面板中的代码将被用横线划掉:
CSS 动画增加快捷跳转
总结
文中介绍的新特性是我们可能会经常用到的,还有其他特性可以参考这里。前两个对于我们日常开发还是很有帮助的,不过在体验上可能还有待改进,比如:
-
对于修改响应头,哪些请求的响应头被修改了没有标明出来,如何让集中管理更方便;
-
对于堆栈隐藏,能否通过代码配置堆栈的隐藏等。
如果想体验这些新特性,可以下载 chrome canary 试用。
欢迎留言交流,如果对你有价值,欢迎点赞关注😄
参考
原文链接:https://juejin.cn/post/7222952967459799097 作者:探险家火焱