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

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

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

参考

相关推荐
耶啵奶膘17 分钟前
uniapp-是否删除
linux·前端·uni-app
NiNg_1_2341 小时前
SpringBoot整合SpringSecurity实现密码加密解密、登录认证退出功能
java·spring boot·后端
王哈哈^_^2 小时前
【数据集】【YOLO】【目标检测】交通事故识别数据集 8939 张,YOLO道路事故目标检测实战训练教程!
前端·人工智能·深度学习·yolo·目标检测·计算机视觉·pyqt
Chrikk2 小时前
Go-性能调优实战案例
开发语言·后端·golang
幼儿园老大*2 小时前
Go的环境搭建以及GoLand安装教程
开发语言·经验分享·后端·golang·go
canyuemanyue2 小时前
go语言连续监控事件并回调处理
开发语言·后端·golang
杜杜的man2 小时前
【go从零单排】go语言中的指针
开发语言·后端·golang
cs_dn_Jie2 小时前
钉钉 H5 微应用 手机端调试
前端·javascript·vue.js·vue·钉钉
开心工作室_kaic3 小时前
ssm068海鲜自助餐厅系统+vue(论文+源码)_kaic
前端·javascript·vue.js
有梦想的刺儿3 小时前
webWorker基本用法
前端·javascript·vue.js