前端资源 "本地覆盖" 调试
前端资源 "本地覆盖" 调试
项目上线之后，突然，我们意识到了什么：接口返回的数据是否需要变更？打包的 js 文件是否漏了添加某个提示？等等...
哦😯，这还不简单～ 重新本地运行测试，再进行打包，最后部署...
是的，我们最后确实是需要部署，但是我们能够快速验证自己更改的内容在线上正常运行之后，再部署呢？
可以的，本文，我们就来讲讲如何进行 本地覆盖 调试。
测试环境如下：
- Google Chrome - 版本 118.0.5993.88（正式版本） (arm64)
- macOS Monterey - 版本 12.4 Apple M1
- Visual Studio Code - 版本: 1.83.1 (Universal)
熟悉本地覆盖
我们以我的掘金为例子。打开 Google Chrome 控制台，右击一个资源，这里，我选择了文章列表接口，就会弹出提示框，里面有两个我们要谈的重点。
- Override headers
- Override content
“Override” 功能允许我们模拟对网页内容的更改。
我们先来看看怎么开启 Override。
- 进入站点，打开
DevTools面板，进入Network板块，右击选中的请求，选择Override headers或者Override content
- 如果是第一次进入，我们右击链接之后，会有提示：选择存储重写文件的地方
这里，我们在本地新建了名为 override_folder 的文件夹，存放覆盖的文件。
- 我们可以进入
Sources查看override文件，这里进入override_folder文件夹
👌，那么，我们怎么移除覆盖文件呢？
我们可以直接不勾选 Enable Local Overrides 或者直接删除掉 Override。
那么，我们接下来就介绍下：Override headers 和 Override contents。顾名思义，我们可以分别来重写响应头和响应体。我们案例会更容易理解。
⚠️注意：如果读者是使用
safari浏览器去调试，是可以重写请求头的
案例
下面，我们简单以三个案例来实践一下：
更改接口请求头
我们还是以掘金我的文章列表接口为例，我们出触发 Override headers 后，改写响应头的 Access-Control-Allow-Origin: https://juejin.cn 改成 Access-Control-Allow-Origin: https://juejin.com 则会出现跨域错误。
我们可以在当前请求的面板上更改：
然后在 Sources -> Overrides 上查看修改的请求字段，或者直接在该面板重写。
更改接口列表数据
👌，我们在 Sources -> Overrides -> override_folder（这个文件夹是我自己的起名）下，删除我们上一步的重写响应头的操作。
我们来实践下重写响应信息 Override content。
以掘金我的文章列表接口为例，我们触发了 Override content 后，更改返回的列表数据。
这是更改前的页面效果：
我们移除了文章列表的第一条数据。下面是更改后的页面效果：
如果返回的 override content 的内容是压缩为一行的代码。我们可以考虑使用
Visual Studio Code进行格式化文档。这样我们就比较好查看响应内容
替换打包的 javascript 文件
有时候，我们部署了项目上线了，比如 spa 项目。但是，我们这么不幸运碰到了个 bug，那么，我们怎么快速验证本地修改之后，线上项目是能够正常运行的呢？
是的，我们可以将本地的构建包 dist 资源替换为线上的引用资源，那么，我们就知道是否本地修改后的代码在现在运行的情况。
我们还是以 掘金 平台为案例。
为了方便编辑，我们直接在 vscode 上对本地覆盖的文件编辑。我们就在 function 函数内加个 alert('Hello, Jimmy!')。
在 vscode 中编辑代码，或者替换掉整个内容，保存后刷新页面，就可以看到效果了。
当然，还有更多的操作，等着感兴趣的读者去探索～