调试模式下修改的JS代码无法保存,恢复调试生成无修改内容的VM前缀文件求助
原因说明
VM+数字+文件名格式的文件是浏览器DevTools生成的临时虚拟机脚本实例,仅存于当前调试会话内存中。你直接在DevTools中修改的是临时实例内容,未和本地实际源文件建立映射,重新触发脚本加载、刷新页面时,浏览器会拉取原始代码生成新的VM实例,之前的修改自然不会保留。
解决方案
- 仅需临时修改测试,无需长期保留修改:
修改完成后按Ctrl+S(Windows)/Cmd+S(Mac)保存当前VM文件改动,当前调试会话内不要刷新页面、不要重新初始化对应脚本,修改即可持续生效。 - 需要修改长期保留,后续调试均可复用:
开启DevTools的Overrides(覆盖)功能建立本地文件映射,操作步骤如下:- 打开DevTools的Sources面板,左侧标签栏切换到「Overrides」
- 点击「+ Select folder for overrides」,选择本地项目对应JS文件的存放目录,在弹出的权限请求中点击允许
- 找到目标JS文件右键选择「Save for overrides」,后续在DevTools中对该文件的所有修改都会自动同步到本地源文件,重新运行时不会生成新的VM文件,修改也不会丢失。
- 若你的项目使用了webpack、vite等打包工具,需要先开启SourceMap映射,才能直接在DevTools中修改原始业务代码,避免修改打包后混淆代码的问题。

内容的提问来源于stack exchange,提问作者rs9。
相关产品推荐
相关产品推荐

