本来想浏览主题作者的博客，奈何作者大大很久没更新了，网站：琉璃的医学 & 编程笔记打不开了，控制台找到报错： Uncaught SyntaxError: Identifier 't' has already been declared (at app.js?v=0.2.5:1:1) ，直接的意思是：在 app.js 第 1 行，变量 t 被声明了两次。浏览器直接拒绝执行这个文件；这样的报错许多 shoka 主题的很久没有维护的网站都出现了，但是我想临时看下博主网页内容，查到如下方法，作为记录，说不定以后也能用得上……
适用场景：线上网站 JS 有语法错误 / 想临时改线上代码 / 改完刷新不丢失 / 覆盖后还能正常打断点
环境：Microsoft Edge（Chromium 内核，版本 ≥ 90 均可）
原理：DevTools 把线上文件存到本地文件夹，刷新时浏览器用本地副本代替网络响应
#一、整体流程一览
- 开 DevTools → Sources（源代码）→ Overrides（覆盖）
- 选一个空本地文件夹 → 点 Allow 授权
- 在 Page 树里找到报错的 JS → 右键 Save for overrides
- 在 Sources 编辑器里改代码
- Ctrl + S 保存 → 刷新页面 → 浏览器用本地版
- 覆盖状态下照样可以点行号打断点
#二、详细步骤
#Step 1 打开 DevTools
- 快捷键：F12 或 Ctrl+Shift+I
- 切到顶部 Sources（源代码） 标签
#Step 2 进入 Overrides 并授权文件夹
左侧文件树底部切到 Overrides（覆盖） 标签（和 Page 并列，找不到点 » 更多标签）
点击 + Select folder for overrides（选择替代文件夹）
选一个空文件夹，例如： D:\edge-overrides
系统弹窗点 允许（Allow） —— 这一步必须点，不点后面存不进磁盘
授权后：
- 文件夹出现在 Overrides 列表
- Enable Local Overrides（启用本地替代） 复选框自动勾上
- 缓存自动禁用（正常行为）
⚠️ 文件夹路径别用中文或空格过多的，偶尔会出权限怪问题，英文路径最稳
#Step 3 把线上 JS 映射成本地覆盖
左侧切到 Page（页面） 标签
展开域名 → 找到报错的 JS 文件（比如 app.js 或带 hash 的 main.4f3a.js ）
右键该文件 → Save for overrides（替代内容）
成功后：
- 文件名旁边出现 紫色圆点 🟣
- 你本地
edge-overrides文件夹里会生成对应目录层级的副本
（线上是/assets/js/app.js，本地就是edge-overrides/assets/js/app.js）
#Step 4 修改代码修掉 SyntaxError（以主题作者博客为例）
在 Sources 编辑器里打开刚才覆盖的 JS
把原有代码整体包进一个立即执行函数（IIFE），让 const t 等变量处于独立作用域。这样即使脚本被重复加载，也不会与全局已有的 t 冲突。
原有业务逻辑、变量内容和功能代码都没有修改。
// 文件开头新增 | |
(()=>{"use strict"; |
// 文件末尾新增 | |
})(); |
按 Ctrl+S 保存
#Step 5 刷新页面验证
改完 Ctrl+S → 刷新 → 整个脚本能解析了，后面所有播放器 / 主题 / 滚动逻辑都能跑，断点也活了。
#三、覆盖后怎么打断点（回顾）
覆盖文件也是普通 JS，调试方式不变：
- 行断点：点行号
- 条件断点：右键行号 → Add conditional breakpoint
- 日志断点：右键行号 → Add logpoint
- 命中后看右侧 Scope / Call Stack / Watch
- F8 继续、F10 步过、F11 步进
注意：SyntaxError 本身打不了断点（解析阶段就挂），但用 Overrides 修掉语法错误后，后续所有运行时断点都正常。
#四、常用排雷
| 现象 | 原因 | 解决 |
|---|---|---|
| 改了刷新没生效 | 没点 Save for overrides，只是临时编辑 | 右键文件 Save for overrides 再改 |
| 紫色圆点不出现 | 文件夹没授权 / 不是空文件夹起步 | 重新选空文件夹点 Allow |
| 覆盖后还是旧代码 | 开了强缓存或其他 SW 缓存 | Overrides 开启时缓存自动禁，关掉其他 SW 再试 |
内联 <script> 改不了 | Overrides 只管独立网络资源 | 用 Snippet 跑，或把内联代码抽成文件 |
| 刷新后断点没了 | 断点打在原网络文件上，没打在覆盖文件 | 确认编辑器顶部路径是 edge-overrides/... 再打 |
#五、用完怎么收尾
- 临时取消覆盖：Overrides 标签取消勾选 Enable Local Overrides
- 删单个文件：Overrides 里右键文件 → Delete
- 全清：点 Overrides 标签右侧清除图标
- 线上服务器完全不受影响，关掉 DevTools 一切恢复原样
#六、一句话记忆
Sources → Overrides → 选空文件夹 Allow → 右键 JS Save for overrides → 改代码 Ctrl+S → 刷新
