chaihongjun.me

善用chrome中的workspace提高前端开发效率

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

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

善用chrome中的workspace提高前端开发效率

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

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

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

善用chrome中的workspace提高前端开发效率

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

善用chrome中的workspace提高前端开发效率

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

善用chrome中的workspace提高前端开发效率

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

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

善用chrome中的workspace提高前端开发效率

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

善用chrome中的workspace提高前端开发效率

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

善用chrome中的workspace提高前端开发效率

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

善用chrome中的workspace提高前端开发效率

注意:

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

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

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


知识共享许可协议本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。作者:柴宏俊»