有时，前端开发人员会受网络请求加载到其应用程序中的代码的支配。 快速用您自己的代码替换该请求并查看您的应用程序如何响应会不会很好？
事实证明，这不是一个新的愿望。
也许您曾经使用过像Charles Proxy这样的中间人代理服务器，将本地文件映射到实时文件之上，但一旦最终拿出证书后，就很乐意忽略了该工具99％的剩余功能。
也许您更熟悉将更改直接推送到服务器上并使用CMS或大声疾呼，以防止人们在完成开发之前使用更改。
- StudioBookings —更多新闻和更新:) | Yoga Studio软件
- 如果5分钟和这个简单的任务可以使您在生活的任何方面都成功，该怎么办？
- 您如何在工作场所赋予女性权力？
- 改善反馈回路和快速交流的好处
- 工作真的感觉如何？ 利用大数据捕捉人类经验
尽管这些解决方案听起来很有信心，但还有更好的方法！
介绍Chrome的本地替代
Chrome 65在世界范围内引起了本地替代，这引起了很多掌声。 好吧，至少是我。 从名称或链接的文档中您可能会怀疑，此功能使您可以进行本地更改，这些更改在页面重新加载后仍然有效。
可能不清楚的是，这几乎适用于任何作为网络请求并在Chrome DevTools的“源”标签中可用的文件。 另外，使用此功能不需要您直接使用Chrome的DevTools修改文件！ 因此，您可以使用您真正喜欢的IDE进行编辑。
让我们逐步了解它的工作原理！
如何服务您的本地文件
为了演示，我们将更改TodoMVC的行为，TodoMVC是一种流行的工具，用于演示使用todo列表的JavaScript框架实现。
打开Chrome的DevTools，选择“来源”标签，然后选择“覆盖”子标签。
单击“ +选择要替代的文件夹”，选择一个文件夹，并允许DevTools访问您的本地文件系统。
重要的是，您选择的文件夹将存储每个站点的替代文件。 该文件夹内的子文件夹将指示应如何进行覆盖，我们将在第二秒中看到。 就目前而言，我建议制作一个专门用于此原因的全新的空文件夹。
是时候隔离我们要修改的文件了。 如果您不确定在“页面”子选项卡中确切地将文件加载到何处，则可以使用“网络”选项卡显示该文件所在的位置。 准备好您的右键单击器！
对于此站点，我们希望修改用于生成任务的模板，并使每个任务看起来更……更漂亮。
在“网络”选项卡中找到template.js文件，右键单击它，然后选择“在源面板中打开”。 然后，右键单击刚刚在代码查看器中打开的标签的标题，然后选择“在边栏中显示”。 再次右键点击侧栏中突出显示的文件，然后点击“保存以覆盖”。
要检查您是否成功，覆盖的文件应在其图标的右下角带有一个紫色的小圆圈。
现在，我们需要实际进行一些更改，并证明替代方法有效。 返回“覆盖”子选项卡，展开包含刚刚保存的文件的文件夹，右键单击您的文件，然后选择“在包含文件夹中打开”。 然后，使用您习惯于编辑JavaScript的任何工作流程！
将更改保存在编辑器中，然后返回Chrome。
刷新页面; 您的更改将出现！
如何使它更加无缝
我知道您在想什么：“这是一个可爱的例子，但是我是一名现代的前端开发人员！ 我要替换的文件已最小化，并在构建过程中吐出。 本地覆盖如何帮助您呢？”
启用此功能后，Chrome不会突然意识到您的整个开发工作流程。 它只关心您选择用于覆盖的文件夹中的文件和路径（再次，建议您在启动时完全为空！）这意味着，最糟糕的是，您需要在本地代码中对源文件进行更改回购，捆绑和构建它们，找到已构建的文件，将它们复制到替代文件夹中，然后刷新Chrome。
这么麻烦！
nodemon可以将文件移动到替代位置，而无需您一直进行干预。 扭曲上面的示例，我将使用以下命令：
$ SOURCE =〜/ repos / examples / dist / template.js;
DEST =〜/ chrome-overrides / todomvc.com / examples / vanillajs / js / template.js;
npx nodemon --watch $ SOURCE --exec“ cp $ SOURCE $ DEST”;
这将在我的终端中运行，直到我用少许CMD + C杀死该进程。 每当我（或我的工具）在SOURCE更改文件时，该文件都会被复制到DEST 。 然后，我要做的就是转到Chrome浏览器并刷新。 我的更改将立即存在！
我仍在寻找使这种方法更快的方法，例如在新保存的更改后自动刷新Chrome。 如果您知道进一步的改进，请与我分享您的智慧！
