传统的浏览器开发者工具断点调试功能虽然强大，但存在两个明显的短板：一是页面刷新后，所有的代码修改痕迹都会消失；二是其调试范围通常局限于JavaScript代码。当你需要调试JSP、CSS等静态资源，或者希望修改能持久化以进行多轮测试时，就显得捉襟见肘了。
那么，如何实现刷新页面后，已调试修改的代码依然生效，并且能支持JS、CSS乃至JSP文件的调试呢？答案就是Chrome开发者工具的 Overrides（本地替换） 功能。
第一步：启用Overrides功能
在Chrome浏览器中打开开发者工具（F12），切换到 Sources（源代码） 面板。在左侧的面板导航栏中，找到并点击 “Overrides” 选项。
第二步：选择本地文件夹
点击 “Select folder for overrides” 按钮，在本地文件系统中选择一个空文件夹（或新建一个）来存放即将被替换的线上文件。
第三步：授予访问权限
在弹出的权限请求对话框中，点击 “允许”，授予开发者工具访问该文件夹的权限。授权成功后，Overrides面板下会显示已选择的文件夹路径，并且该功能会自动启用。
第四步：修改并保存线上文件
现在，你可以对任何网络请求返回的文件进行修改和持久化保存了。切换到 Network（网络） 面板，刷新页面以捕获所有网络请求。找到你想要修改的文件（如一个 .js、.css 或 .jsp 文件），右键点击它，在菜单中选择 “Override content”。
该文件的原始内容会立即在Sources面板中打开供你编辑。进行任意修改后，按下 Ctrl+S (Windows/Linux) 或 Cmd+S (Mac) 保存。此时，Chrome会自动在你第一步选择的文件夹中，按照线上文件的目录结构创建一份本地副本，并将你的修改保存其中。
第五步：查看修改效果
完成保存后，直接刷新页面。你会发现，浏览器加载的将不再是最初的线上文件，而是你刚刚修改并保存在本地的版本。你可以在页面上直接观察到修改后的效果，或在 Elements（元素） 面板中查看被修改的HTML结构。
第六步：撤销修改
如果想要恢复原状，有两种方式：
- 在本地文件夹中找到对应的文件，直接删除你修改过的内容，或删除整个文件。
- 在开发者工具的Overrides面板中，取消勾选“Enable Local Overrides”来暂时禁用整个替换功能。
操作完成后，再次刷新页面，浏览器便会重新加载线上的原始文件。
应用场景与价值
这个功能极大地便利了前端调试工作流，尤其适用于以下场景：
- 无源码调试：当你想调试或学习某个网站的前端实现，但没有其源代码时，可以直接修改并测试。
- 生产环境问题定位：在生产环境发现样式或交互问题，可以快速在本地修改代码进行验证，而无需搭建完整的开发环境或发布流程。
- 复杂交互测试：对于需要多次刷新页面才能测试的交互逻辑，持久化的代码修改可以节省大量重复操作时间。
掌握 Chrome Overrides 功能，相当于获得了一个针对任意网页的“本地沙盒”，是每一位前端开发者提升调试效率的必备技能。如果你想了解更多关于 前端框架与工程化 或其他Web开发技巧，欢迎访问 云栈社区 进行探索与交流。 | 
发表于 4 天前
|
查看: 14|
回复: 0
