启用Chrome Overrides可在线上页面直接调试并持久化修改JS/CSS/HTML：授权本地空文件夹→映射线上资源→编辑保存→刷新验证；还可Mock API响应。
你需要在不修改服务器、不重启构建、不依赖 sourcemap 的前提下，直接在线上页面中调试并持久化修改 JS/CSS/HTML 代码——比如修复一个线上样式错位、绕过某段校验逻辑、或临时 patch 第三方 SDK 行为。
启用 Overrides 并授权本地文件夹
打开 Chrome 开发者工具（F12 或 Ctrl+Shift+I），切换到 Sources 面板，在左侧边栏底部点击 Overrides 标签。
点击 Select folder for overrides，选择一个完全为空的本地文件夹（例如 D:\chrome-overrides 或 ~/dev-overrides）。
系统会弹出操作系统级权限窗口，必须点击 Allow；拒绝后无法回退，只能删掉该文件夹重新选。授权成功后，文件夹名旁会出现绿色对勾标记。
这一步是所有后续覆盖操作的前提——没有读写权限，编辑再多次也不会写入磁盘。
映射线上资源到本地文件
方法一：通过 Page 标签下文件右键映射
在 Sources → Page 中展开当前域名，找到目标文件（如 https://cdn.example.com/js/app.js 或 /css/main.css）。
右键该文件 → 选择 Save for overrides → 保持默认路径 → 点击 Save。
文件立刻出现在 Filesystem → Overrides 下，左侧出现紫色圆点，表示映射已激活。
方法二：从 Network 面板快速定位映射
切换到 Network 面板，刷新页面，找到你要覆盖的 JS/CSS 请求（状态码应为 200）。
右键该请求 → 选择 Save for overrides。
注意：若该请求来自跨域 CDN 且未携带 CORS 头，DevTools 可能无法自动读取内容——此时需先在 Network 中右键 → Open in Sources tab，再手动复制内容粘贴到本地同名文件中，并拖入 Overrides 文件夹完成映射。
编辑并实时验证覆盖效果
第一步：在 Sources → Filesystem 中双击已映射的文件（如 app.js），进入编辑器。
第二步：修改代码，例如注释掉一段校验逻辑、调整 CSS 的 margin 值、或插入 console.log 调试语句。
第三步：按 Ctrl+S（Windows/Linux）或 Cmd+S（Mac）保存——此时改动立即写入本地文件，无需另存为。
第四步：刷新页面，观察行为是否按预期变化；若未生效，检查 Network 面板中该资源响应头是否显示 from overrides 字样，未显示说明映射路径不一致或缓存干扰。
务必在 Network 面板勾选 Disable cache，否则浏览器可能仍加载旧缓存版本，导致本地修改看似“失效”。
对 API 接口启用 Mock 响应
切换到 Network 面板，刷新页面，找到目标接口请求（如 /api/v1/user，类型为 fetch 或 XHR，状态码为 200）。
右键该请求 → 选择 Override content。
DevTools 自动跳转至 Sources → Overrides → Editor，并在你授权的文件夹中创建对应路径文件（如 api/v1/user.json）。
在编辑器中输入 JSON Mock 数据，例如：
{ "code": 0, "data": { "id": 123, "name": "测试用户" } }
按 Ctrl+S 强制同步（部分 DevTools 版本需此操作确保写入），Network 中该请求右侧将出现紫色圆点，悬停显示 Saved.。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
