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

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

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

参考

相关推荐
Tech Synapse11 分钟前
Java根据前端返回的字段名进行查询数据的方法
java·开发语言·后端
.生产的驴12 分钟前
SpringCloud OpenFeign用户转发在请求头中添加用户信息 微服务内部调用
spring boot·后端·spring·spring cloud·微服务·架构
微信-since8119228 分钟前
[ruby on rails] 安装docker
后端·docker·ruby on rails
Myli_ing30 分钟前
考研倒计时-配色+1
前端·javascript·考研
余道各努力,千里自同风32 分钟前
前端 vue 如何区分开发环境
前端·javascript·vue.js
PandaCave39 分钟前
vue工程运行、构建、引用环境参数学习记录
javascript·vue.js·学习
软件小伟41 分钟前
Vue3+element-plus 实现中英文切换(Vue-i18n组件的使用)
前端·javascript·vue.js
醉の虾1 小时前
Vue3 使用v-for 渲染列表数据后更新
前端·javascript·vue.js
张小小大智慧1 小时前
TypeScript 的发展与基本语法
前端·javascript·typescript
hummhumm1 小时前
第 22 章 - Go语言 测试与基准测试
java·大数据·开发语言·前端·python·golang·log4j