最近 Chrome 发布了 113 Beta 版本，其中有几个 DevTools 的更新还是挺使用的，我们一起来看一下：

覆盖 HTTP Header
在日常开发中，为我们的网站添加或覆盖一些 HTTP Header 是很常见的场景，比如我们要添加调试的涌道，修改网站的 CORS 配置等等。在以前，我们通常是通过一些浏览器插件去完成的，比如 modHeader：

也有可能是通过 Charles 代理，然后断点修改：

在 Chrome 113 版本，我们可以直接到 Network > Headers > Response Headers ，然后将数鼠标悬停到目标 Header 上，就可以编辑它：

我们也可以添加一些自定义的 Header：

另外它还提供了类似 Charles Map Local 的能力，我们可以到 Sources > Overrides 添加自定义的覆盖规则，然后就可以通过比如 * 通配符来覆盖多个请求：

对 Nuxt、Vite 和 Rollup 调试的优化
另外，Chrome 还在这个版本对 Nuxt、Vite 和 Rollup 的调试能力进行了一些优化，增强了堆栈跟踪功能。为了帮助我们在调试时更快速的排查问题，增强的堆栈跟踪现在隐藏了来自 Nuxt 3.3 或更高版本生成的源码映射中：

支持 Web GPU
另外 WebGPU 现在已经成为 Chrome 113 的默认功能。WebGPU 是一种全新的 Web 图形 API ，带来了很多令人兴奋的能力和优化。例如，相同的图形绘制工作需要的 JavaScript 工作量会大大减少，并且机器学习模型推理的性能提高了三倍以上。这归功于更灵活的 GPU 编程和访问高级功能的能力，这也是 WebGL 无法比拟的。

WebGPU 是一种全新的 Web API，它可以将现代硬件的能力完全利用起来，允许在 GPU 上进行渲染和计算操作，类似于 Direct3D 12、Metal 和 Vulkan。与 WebGL API 系列不同，WebGPU 提供了对更高级 GPU 特性的访问能力，并为 GPU 上的通用计算提供了一流的支持。这个 API 专为 Web 平台而设计，提供了全套的 JavaScript API，集成了 promise，支持导入视频，和错误调试等能力，开发体验还是很不错的。

WebGPU 是 W3C 的 “GPU for the Web” 社区小组的合作成果，其中包括 Mozilla、Apple、Intel 和 Microsoft 等主要公司的贡献。经过六年的开发（90 位贡献者，2000 次提交，3000 个 Issues ），从 2017 年的初始设计开始，这次是第一次在 Chrome 中推出，Firefox 和 Safari 的支持也在进行中。

最后
参考：
https://developer.chrome.com/en/blog/new-in-devtools-113/
https://gpuweb.github.io/gpuweb/