持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第 2 天，点击查看活动详情
先介绍本次的主角：override，换个描述，叫 替换、重载、覆盖 等等
使用方式
指定工作空间
这项功能卡位于开发者工具选项卡 source 的子目录下
使用的方式也很简单，通过图上的 + Select folder for overrides 添加工作空间即可，浏览器会提示风险，直接确认即可
确认后，会自动启用此特性，下图的蓝色的小勾自动勾上；若暂时不需要使用，去掉选中即可
保存待替换文件
在 network 中，找到我们需要使用本地文件替换的目标 js ，右键另存到工作空间里
刷新此站点后，保存在工作空间的副本文件，会自动替换掉当前站点对应的文件
结构解析
pmp-page，是我们之前定义的工作空间的文件夹www.google-analytics.com是系统根据你当前站点自动生成的父级文件夹analytics.js则是当前站点下可以替换加载的文件
文件的右下角，有一个 紫色的小圆点，表示此文件已经成功替换原文件，正在生效中
用途
用一个场景来描述，比如，我们请求 a.js，服务器会直接返回这个文件。但如果，我们在这个工作空间，按某种要求配置了同名的文件，浏览器就会直接返回这种工作空间下的、本地的 a.js，而不是去服务器拉取
可以理解为，类似于 nginx 的反向代理功能，但仅作用在自己当前的浏览器上
案例
敏捷平台 js 代码调试
以我正在经手的一个敏捷平台为例，他采用的自动生成的模式。js 代码块在特定的地方编写并保存后，打开页面时会自动插入 js 代码片段并执行
这里最大的问题是 js 片段无法调试，你必须去指定的位置更新 js 代码片段，再去刷新页面看 js 的运行效果是否符合预期，调试起来超级蛋疼
上图就是我在敏捷平台上调试保存的副本文件，用到的频率还是挺高的
酷我音乐资源获取
通过对资源的调试，发现他会请求下图的两个 url，一个获取歌曲的相关信息，另一个获取 mp3 的资源路径
我们可以手动检查 url 中的 response 返回的数据来人工判断。但如果批量来获取的话，就不太现实。
另一种解决方案就是解析 url 的请求规则，自己直接去酷我的资源库里获取 （这年头，能直接明文获取的资源基本不存在了的吧）
那么，还有一种玩法，即魔改他的资源请求操作，在他拼接好参数，去资源库拉取到真正的数据后，记录下来。以常规的思路，这种是需要动服务器的 js 文件的。但通过 override 功能，我们直接用本地魔改后的 js 文件去替换掉目标文件
如上图，红色方框内的代码，就是我插入的，现在可以做到，在播放音乐的时候，自动的将歌曲名和 url 记录到 localStorage，虽然略有瑕疵，但已基本实现目标
由于不费心思去解密他的资源库，那再补一个自动切换下一首的简易 js 代码块，直接模拟手动切换👌
大家学会了吗
是不是头次发现谷歌居然提供了这么逆天的功能？我们无法改变别人服务器上的东西，却可以用本地文件去替代并搞点有意思的事情😏
原创文章，未经允许，禁止转载
create by：安逸的咸鱼
