Chrome 开发工具 Workspace 使用

前端开发中我们经常要在浏览器中做一些细节调整，比如对 CSS 的微调，最快的方式当然是直接在 Chrome 的开发者工具中调整，但问题在于在控制台中调试好的数值我们还需要再在 CSS 源码中再写一次，效率就低了不少。而 Chrome 的 Workspace 工具就能帮助我们把调试工具中修改的内容自动保存到相应的文件中。 方法也挺简单，下面以调试一个 CSS 文件为例：

打开需要调试的页面，再开启调试工具（F12、alt + command + i），切换到 Sources 选项卡，在 CSS 资源右键选择『Add Folder to Workspace』

之后会让你选择保存路径，选择对应开发目录即可，选择后开发工具会询问获取目录权限，点击『允许』就 OK。

再次在 CSS 资源点击右键，选择『Map to File System Resource』

双击选择文件，并点击确定：

此时 Workspace 就设置好了，我们可以修改下 CSS 看看效果，我这里删除了一行背景样式：

然后在编辑器中就可以看到相应的 CSS 被注释了：

最后，可以进入 Workspace 面板对刚刚的配置进行修改：

如此一来就调试非常方便了，相应的也可以调试 JS 文件，这里就不再演示了。