前端资源 "本地覆盖" 调试

项目上线之后，突然，我们意识到了什么：接口返回的数据是否需要变更？打包的 js 文件是否漏了添加某个提示？等等...

哦😯，这还不简单～ 重新本地运行测试，再进行打包，最后部署...

是的，我们最后确实是需要部署，但是我们能够快速验证自己更改的内容在线上正常运行之后，再部署呢？

可以的，本文，我们就来讲讲如何进行 本地覆盖 调试。

测试环境如下：

• Google Chrome - 版本 118.0.5993.88（正式版本） (arm64)
• macOS Monterey - 版本 12.4 Apple M1
• Visual Studio Code - 版本: 1.83.1 (Universal)

熟悉本地覆盖

• Override headers
• Override content

“Override” 功能允许我们模拟对网页内容的更改。

我们先来看看怎么开启 Override。

1. 进入站点，打开 DevTools 面板，进入 Network 板块，右击选中的请求，选择 Override headers 或者 Override content

1. 如果是第一次进入，我们右击链接之后，会有提示：选择存储重写文件的地方

这里，我们在本地新建了名为 override_folder 的文件夹，存放覆盖的文件。

1. 我们可以进入 Sources 查看 override 文件，这里进入 override_folder 文件夹

👌，那么，我们怎么移除覆盖文件呢？

我们可以直接不勾选 Enable Local Overrides 或者直接删除掉 Override。

那么，我们接下来就介绍下：Override headers 和 Override contents。顾名思义，我们可以分别来重写响应头和响应体。我们案例会更容易理解。

⚠️注意：如果读者是使用 safari 浏览器去调试，是可以重写请求头的

案例

下面，我们简单以三个案例来实践一下：

更改接口请求头

我们可以在当前请求的面板上更改：

然后在 Sources -> Overrides 上查看修改的请求字段，或者直接在该面板重写。

更改接口列表数据

👌，我们在 Sources -> Overrides -> override_folder（这个文件夹是我自己的起名）下，删除我们上一步的重写响应头的操作。

我们来实践下重写响应信息 Override content。

这是更改前的页面效果：

我们移除了文章列表的第一条数据。下面是更改后的页面效果：

如果返回的 override content 的内容是压缩为一行的代码。我们可以考虑使用 Visual Studio Code 进行格式化文档。这样我们就比较好查看响应内容

替换打包的 javascript 文件

有时候，我们部署了项目上线了，比如 spa 项目。但是，我们这么不幸运碰到了个 bug，那么，我们怎么快速验证本地修改之后，线上项目是能够正常运行的呢？

是的，我们可以将本地的构建包 dist 资源替换为线上的引用资源，那么，我们就知道是否本地修改后的代码在现在运行的情况。

为了方便编辑，我们直接在 vscode 上对本地覆盖的文件编辑。我们就在 function 函数内加个 alert('Hello, Jimmy!')。

在 vscode 中编辑代码，或者替换掉整个内容，保存后刷新页面，就可以看到效果了。

当然，还有更多的操作，等着感兴趣的读者去探索～

参考

• Override web content and HTTP response headers locally