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

项目上线之后,突然,我们意识到了什么:接口返回的数据是否需要变更?打包的 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

  1. 进入站点,打开 DevTools 面板,进入 Network 板块,右击选中的请求,选择 Override headers 或者 Override content
  1. 如果是第一次进入,我们右击链接之后,会有提示:选择存储重写文件的地方

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

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

👌,那么,我们怎么移除覆盖文件呢?

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

那么,我们接下来就介绍下:Override headersOverride 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 中编辑代码,或者替换掉整个内容,保存后刷新页面,就可以看到效果了。

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

参考

相关推荐
excel9 小时前
为什么在 Three.js 中平面能产生“起伏效果”?
前端
excel10 小时前
Node.js 断言与测试框架示例对比
前端
canonical_entropy11 小时前
AI时代,我们还需要低代码吗?—— 一场关于模型、演化与软件未来的深度问答
后端·低代码·aigc
天蓝色的鱼鱼12 小时前
前端开发者的组件设计之痛:为什么我的组件总是难以维护?
前端·react.js
codingandsleeping12 小时前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
颜如玉12 小时前
HikariCP:Dead code elimination优化
后端·性能优化·源码
考虑考虑13 小时前
Jpa使用union all
java·spring boot·后端
石金龙13 小时前
[译] Composition in CSS
前端·css
白水清风13 小时前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
Ticnix13 小时前
函数封装实现Echarts多表渲染/叠加渲染
前端·echarts