Chrome Dev Tool 编辑本地文件
前言
我们在前端开发中经常需要使用 ChromeDevTool 来进行调试，我想大家经常会遇到这种场景：
- 这里有一个字符串写错了，改一下就好了
- 这里加个 if 判断保护一下就好了
- 这里变量名写错了
等等
在这些情况下我们往往只需要进行很少量的修改就可以修复一个 bug，但是切到编辑其中修复之后，我们又要跑一遍脚本或者在浏览器中打下一串地址（没有 hot-reload 的项目中），如果是混合移动的开发，我们还需要打包到真机上。这就是一个比较耗时的过程。何况当页面加载出来之后我们还要登陆，恢复现场才能调试一个小小的 bug。如果能在浏览器里面直接改动代码，马上恢复现场跑一下不就可以省去很多麻烦，chrome 的这个功能就会帮到你。
步骤如下
- 首先打开 ChromeDevTool，切换到 Sources Tab
- 在任意文件上单击右键 Add Folder to Folder，将包含所需要代码文件夹包含到工程中（这时 Chrome 会提示需要获得该文件夹的完全控制权限，这里点击 Allow）
- 在任意文件上单击右键，点击 Map to File System Resources
- 这时 Chrome 会提示用户重新载入开发者工具，点击 Ok 重新启动开发者工具。
- 然后就可以看到目录结构已经变成了我们的本地目录。command+p 搜索文件的时候也可以看到文件的路径变成本地路径了。这时在文件上进行修改，改动就会直接作用于本地的文件。而且修改后的文件可以直接用于调试而无需重新启动应用（浏览器调试和真机调试均是如此）。