ChromeDevTool修改本地文件

Posted on Edited on In

这次记录一个在 Chrome Dev Tool 中直接修改本地的源代码文件的方法。

前言

我们在前端开发中经常需要使用 ChromeDevTool 来进行调试，我想大家经常会遇到这种场景：

  • 这里有一个字符串写错了，改一下就好了
  • 这里加个 if 判断保护一下就好了
  • 这里变量名写错了
    等等

在这些情况下我们往往只需要进行很少量的修改就可以修复一个 bug，但是切到编辑其中修复之后，我们又要跑一遍脚本或者在浏览器中打下一串地址（没有 hot-reload 的项目中），如果是混合移动的开发，我们还需要打包到真机上。这就是一个比较耗时的过程。何况当页面加载出来之后我们还要登陆，恢复现场才能调试一个小小的 bug。如果能在浏览器里面直接改动代码，马上恢复现场跑一下不就可以省去很多麻烦，chrome 的这个功能就会帮到你。

步骤如下

  1. 首先打开 ChromeDevTool，切换到 Sources Tab
  2. 在任意文件上单击右键 Add Folder to Folder，将包含所需代码的文件夹包含到工程中（这时 Chrome 会提示需要获得该文件夹的完全控制权限，这里点击 Allow）
  3. 在任意文件上单击右键，点击 Map to File System Resources
  4. 这时 Chrome 会提示用户重新载入开发者工具，点击 Ok 重新启动开发者工具。
  5. 然后就可以看到目录结构已经变成了我们的本地目录。command+p 搜索文件的时候也可以看到文件的路径变成本地路径了。这时在文件上进行修改，改动就会直接作用于本地的文件。而且修改后的文件可以直接用于调试而无需重新启动应用（浏览器调试和真机调试均是如此）。