需使用chrome开发者工具的overrides功能持久化修改：一、在sources面板添加并授权本地文件夹；二、右键资源选“save for overrides”建立映射；三、勾选文件夹启用重定向，验证network中显示“from overrides”；四、直接编辑filesystem中文件并保存；五、跨域资源需代理重定向后方可覆盖。
如果您在Chrome开发者工具中对网页的HTML、CSS或JavaScript进行了临时修改，但刷新页面后这些更改丢失，则需要使用“覆盖”（Overrides）功能将修改持久化保存到本地文件系统。以下是实现此功能的步骤：
一、启用并配置覆盖文件夹
覆盖功能依赖于一个本地文件夹作为持久化存储位置，Chrome会将修改后的资源自动写入该文件夹，并在后续加载时优先使用其中的内容。必须先授予Chrome对该文件夹的读写权限，并完成初始映射设置。
1、打开Chrome开发者工具（F12 或 Ctrl+Shift+I），切换至Sources面板。
2、在左侧边栏底部点击Filesystem，然后点击+ Add folder to workspace按钮。
3、选择一个空文件夹（如chrome-overrides），在弹出的权限提示中点击Allow以授权Chrome读写该目录。
4、该文件夹将出现在Filesystem节点下，此时即完成覆盖工作区初始化。
二、映射远程资源到本地文件
仅添加文件夹不足以触发持久化，还需将当前调试页面中的具体资源（如style.css或script.js）与本地对应路径建立映射关系，使Chrome知道修改应保存到何处。
1、在Sources面板的Page子标签中，找到目标资源（例如main.css），右键点击该文件。
2、选择Save for overrides选项。
3、在弹出的保存对话框中，保持默认路径（即之前添加的文件夹内），点击Save。
4、该资源随即在Filesystem中生成同名副本，此后所有编辑操作均直接作用于该本地文件。
三、启用网络请求重定向至覆盖文件
Chrome需主动拦截原始网络请求，并将其响应替换为覆盖文件夹中已修改的版本，该行为由覆盖功能自动管理，但必须确保覆盖功能处于激活状态且无冲突配置。
1、确保Sources > Filesystem中所选文件夹前的复选框已被勾选。
2、在Network面板中刷新页面，观察目标资源（如app.js）的响应状态码——若显示200 (from ServiceWorker)或200 (from Overrides)，表示覆盖已生效。
3、若未生效，检查地址栏是否为http://或https://协议（覆盖不支持file://协议页面）；同时确认未启用禁用缓存以外的干扰设置（如禁用JavaScript）。
四、直接编辑并保存覆盖文件
一旦映射完成，即可像编辑本地代码一样在Sources面板中修改资源内容，所有更改将实时同步至本地文件系统，无需手动保存操作。
1、在Sources面板中，于Filesystem节点下双击已映射的文件（如styles.css）打开编辑器。
2、进行任意修改（例如将color: #333改为color: #e74c3c）。
3、按下Ctrl+S（Windows/Linux）或Cmd+S（macOS）强制触发写入；部分版本中编辑后自动保存，但显式保存可确保同步。
4、刷新页面，验证样式变更是否持续存在，且开发者工具中该文件右侧显示modified标记。
五、处理跨域资源覆盖限制
Chrome对跨域加载的脚本、样式表等资源实施严格覆盖限制，若目标资源来自不同源（如CDN域名），默认无法建立覆盖映射，需通过服务端代理或本地host重定向绕过。
1、识别跨域资源：在Network面板中查看目标文件的Domain列，若与页面主域名不一致（如cdn.example.com vs localhost:3000），则属于跨域。
2、启用本地代理：使用工具如Charles Proxy或Fiddler，将跨域请求重定向至本地同源路径（例如将https://cdn.example.com/app.js映射为http://localhost:3000/cdn/app.js）。
3、重新加载页面，在Sources > Page中定位重定向后的本地路径资源，右键执行Save for overrides。
