用Chrome开发工具调试并且同步文件

chrome 浏览器中有很多高级的功能，下面我们来看一下如何使用chrome 来自动保存我们调试过的文件。

• 用浏览器打开我们需要调试的一个文件，如index.html ，然后我们在source面板中找到我们要调试的文件，找到index.html 所在的目录，右键“Add folder to workspace"

• 之后浏览目录，然后点击确定。会产生一条提示：“DevTools 请求获得对 ‘你刚才浏览的目录’ 的完整访问权限。请确保您不会泄漏任何敏感信息。" 我们点击允许。

• 然后我们在 source面板中，就可以看到我们设置的同步文件夹（颜色为橙黄色的）然后在其中找到我们需要调试的文件比如index.html 右键 选择"Map to network resource…"

• 继续在source 面板的上面找到我们调试的对应的项目(颜色为蓝色的)，找到 index.html 右键选择 “Map to file system resource…”

• 我们在浏览器中调试：比如修改代码，保存后就会自动同步到编辑器中。

• 如果不想用了，那么我们就找到我们一开始浏览的文件夹（橙黄色的） 右键 选择“remove folder from workspace” 就可以了。