如何保存Microsoft Edge中对外部网站JS代码的修改并使其生效

问题根因说明 #

你遇到的两个报错/异常原因如下：

• 直接在DevTools修改提示无法保存：你修改的是浏览器加载到内存中的远程网站临时资源副本，浏览器没有权限修改远端服务器的源文件，所以修改不会持久化，刷新就会丢失，也就会弹出changes to this file were not saved to the system的提示
• 下载HTML本地修改后无法运行：绝大多数网站的JS、CSS、图片等依赖资源都用相对路径引用，部分接口还有跨域限制、资源签名校验，本地直接打开HTML文件会出现资源加载失败、接口请求报错的问题

可落地的解决方案 #

• 方案1：使用Edge内置的覆盖（Overrides）功能（适合临时调试修改的场景）
  操作步骤：

  1. 打开目标网站，按F12调出DevTools面板，切换到「源代码（Sources）」标签
  2. 左侧导航栏找到「覆盖（Overrides）」选项，点击「选择用于存储覆盖的文件夹」，选择本地一个空文件夹，弹出权限请求时点击「允许」
  3. 切回「页面（Page）」标签，找到你需要修改的JS/HTML/CSS文件，右键点击「保存以进行覆盖（Save for overrides）」
  4. 直接在DevTools编辑区修改文件内容，按Ctrl+S保存即可，修改会自动存储到你之前选的本地文件夹中，刷新页面后修改会自动生效

  注意：如果修改后页面加载异常，可以查看DevTools控制台的报错信息，部分网站的资源有加密或哈希校验规则，可能会阻止覆盖内容生效

• 方案2：使用用户脚本注入自定义逻辑（适合长期使用的自定义功能场景）
  如果你需要长期对某个网站注入自定义JS逻辑，该方案适配性更强、更稳定：

  1. 在Edge扩展商店安装Tampermonkey扩展
  2. 打开Tampermonkey管理面板，新建一个用户脚本，将你修改后的JS代码填入编辑区，设置脚本匹配规则为目标网站的URL
  3. 保存脚本后刷新目标网站，你的自定义代码会自动在页面加载时执行，不需要修改原网站的任何资源文件

• 方案3：本地代理映射资源（适合复杂的全站改造场景）
  如果你需要对整个网站做大量修改，可以用代理工具拦截资源请求映射到本地文件：

  1. 把下载的网站资源存到本地文件夹，修正所有资源的相对路径，保证本地预加载时不会出现路径报错
  2. 使用本地代理工具，将目标网站对应资源的请求拦截，重定向到你本地修改后的对应文件即可

  注意要保证本地修改后的文件路径和原网站的资源路径规则对应，避免出现404报错

内容的提问来源于stack exchange，提问作者Shree Singhi