持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第1天，点击查看活动详情
作为一名前端开发，每天都在和 Chrome DevTools 打交道，但是你可能不知道 DevTools 里面有一个非常实用的功能——Local Overrides，翻译成中文应该叫本地文件替换。千万别小看了这个不起眼的功能，有了它之后，我们可以做很多事情，例如：
- 直接调试线上的代码（JavaScript、CSS 等）
- 快速切换不同的调试环境（本地、预发、线上）
- 屏蔽某些网站广告，修改背景色等
以 CSDN 网站为例，带领大家体验一下本地文件替换（Local Overrides）功能。首先我们打开 CSDN 首页并开启控制台，切到 Sources 面板，然后左侧再切到 Overrides 面板，如下图所示：
可以看到，下方有一个叫做 Select folder for overrides 的按钮，点它之后会出现选择目录的对话框，需要你选择一个目录专门用于存放 Chrome 本地覆盖的资源，例如我创建了一个叫做 chrome-overrides 的文件夹，然后选择之后对话框消失了，此时页面顶部会出现提示：DevTools 请求获得对 xxx 的完整访问权限，请确保您不会泄露任何敏感信息。
后面跟着两个按钮，你点击「允许」之后，DevTools 就能读写这个目录了，然后页面里面的 Overrides 面板也发生了变化，出现了 Enable Local Overrides 的 Checkbox，把它给勾选上：
接下来我们切换到 Network 面板下面的 JS 面板，然后选择一个你看着不顺眼的 JS 资源，例如 csdn-toolbar.js：
然后按 ⌘ + P 弹出搜索框，在里面输出关键词进行过滤，比如 csdn-toolbar 然后选择第一项并回车
这个时候能够看到 csdn-toolbar.js 的源码，我们把它全部注释掉，加上一行自己的代码：console.log('hide csdn toolbar!')，然后 ⌘ + S 保存：
可以发现本地 chrome-overrides 文件夹里面已经多出来我们刚才改过的 csdn-toolbar.js 代码了，这个就是本地覆盖的版本，此时刷新页面你会看到有意思的事情发生了：
控制台上出现了 hide csdn toolbar! 说明网页加载的 csdn-toolbar.js 是本地覆盖的文件，顶部菜单也全部消失了，因为我们把 toolbar 的逻辑全部注释掉了，看来那部分逻辑是用于创建顶部菜单的，哈哈！怎么样，是不是很爽。别急，更爽的还在后面，我们找到 CSDN 的广告位，选中 DOM 节点，查看其样式：
我们给 .broadcast-active .activity选择器加上样式 display: none，可以看到 CSS 代码被自动保存到了本地，广告位被干掉了，而且刷新依然有效！
有了上面的案例，相比你已经想到了很多的应用场景，例如本地调试甚至上线之后的网站，我们依然可以在 JS 中随意添加变量来控制各种配置，切换各种环境，如下图所示：
简直太方便了有木有，掘友们赶快用起来吧！
