项目上线之后,突然,我们意识到了什么:接口返回的数据是否需要变更?打包的 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
中编辑代码,或者替换掉整个内容,保存后刷新页面,就可以看到效果了。
当然,还有更多的操作,等着感兴趣的读者去探索~