博客之前发过两篇文章《sublime text3和chrome双向实时编辑预览CSS》和《LiveReload一款解放F5的开发工具》,目标都是提高前端开发编码过程中的效率，减少调试过程中的各种细碎的事项。今天，再介绍一个方法，不需要利用任何的第三方工具就可以方便直接的编码调试CSS和JS文件。熟悉chrome的开发者应该都知道F12调起的ChromeDevTools对于前端开发人员来说有多么的重要，但是chrome的workspace，估计很多人就不是很清楚了，作为字面解释，可以了解到他可以当作工作台来使用，下面正式介绍如何使用workspace来简化CSS和JS调试过程中细碎事项。

  一.首先，假设你的chrome(要求版本是31以上，chrome是版本帝，相信你的版本此时绝对不止31了)已经打开了一个待开发的项目页面.

注意，上图示例中的项目根目录是F:/Nodejs，这个要记住后面设置的时候需要。这个项目的结构如下：

|demo.html
|demo.css
##|是项目的根目录，demo.html只引用了demo.css ##

二.按F12调出ChromeDevTools,点击下图所示的按钮：

三.再点击弹出菜单上的settings:

四.接着点击workspace话说算是进入了workspace设置：

五.点击Add folder...,上面的Folder exclude pattern我们不需要去管它，默认的排除了一些目录（含某些目录名模式特征的），这时候是让我选择项目的根目录/需要修改的文件路径。

我选择了F盘下的Nodejs目录，然后chrome顶部弹出提示，我们点允许：

然后我们就看到了下面的界面：

Nodejs目录已近被当作工作台了。Mappings 是映射关系，可以理解成URL和物理文件的一一对应关系。

六.这里F:/Nodejs被我们当作的项目（网站）的根目录，所以映射关系如下，设置依然是点Mappings右侧的Add执行，最后点Add保存设置：

注意：

1.URL prefix是链接前缀，因为我们是本地开发调试，而且并没有在本地配置真正可运行的WEB服务器，所以这里的URL prefix应该是file协议规则，如果你在本地有搭建WEB环境，并且项目在其中，则这里应该像它提示的那样，也许是 http://localhost/或 http://127.0.0.1/之类。后面的Folderpath则是物理路径。Nodejs目录就是我们的项目（网站）根目录，所以物理路径是"/"。Excluded folders排除在这个目录下的目录。

2.以上的配置只适合于页面的CSS和JS都是外链形式（本地，因为chrome要访问资源文件），对于内联的当然不起做了。

至此，同步调试的功能已经搞掂了，赶紧测试一下吧。