使用Chrome调试（编辑）JavaScript、CSS、HTML

说起来Chrome的调试，可能大多数人都用过，用Chrome调试JavaScript、CSS的确是方便了前端开发人员，但这大多数人中，基本都是用它来调试，而非编辑，通常情况下，应该都是打开浏览器开发者工具，对JavaScript进行debug或者对CSS进行修改，完成后返回编辑器（IDE）修改源码，刷新并重试。这看似简单的过程，实际上已经在浏览器、编辑器（IDE）之间的切换中消耗了一倍以上的时间，事实上，我们并不需要如此，Chrome为开发者提供了更为方便的调试模式，可以让你在浏览器中调试的同时，一步到位、修改源码，下面我们就来简单介绍一下。

方法很简单，只需两个步骤。

1、添加工作文件夹到workspace：按照通常方式打开浏览器，调出控制台，切换到Sources选项卡，可以看到当前页面所涉及的资源文件，这不是重点，重点是在资源列表栏，就是左侧列出所有资源的地方，点击右键，会看到"Add folder to workspace"，点击后会弹出浏览文件夹的对话窗口，这里可以选择系统内的文件夹，很明显，我们可以选择我们的项目源码根目录，然后确定，由于浏览器的安全限制不允许浏览器随意访问本地文件、文件夹，所以这时Chrome的DevTools会在浏览器上方提示——"DevTools 请求获得对xxx（指你选择的文件夹）的完整访问权限。请确保您不会泄露任何敏感信息。"，点击允许。即完成文件夹的添加。

2、映射本地文件与网络文件：经过第一步之后其实只是在Chrome中可以打开、编辑本地文件，并没有达到我们的目的，为了同步调试、编辑，我们只需简单的映射即可，你可以在第一步添加的本地文件夹中找到你要编辑的JavaScript、CSS或者HTML（纯静态页面），点击右键，选择"Map to network resource…"，这时候弹出的搜索窗口中会列出当前选择文件所匹配到的所有网络资源，选择正确的映射，点击后会提示"It is recommended to restart inspector after making these changes. Would you like to restart it?"，确定即可。其他（CSS、HTML）类似，这里不再赘述。同时，你也可以通过找到网络资源点击右键，选择"Map to file system resource…"来映射本地文件，以上方式二选一即可。

经过以上两步操作，现在在浏览器中调试已映射文件时，如果做了修改，本地文件会同步修改，这样基本上就不必在浏览器、编辑器（IDE）直接来回切换了。感兴趣的朋友可以尝试一下。