玩转Chrome workplace

简介

相信你们都知道Chrome Develop Tools中的workplace，这使得咱们可以让本地的文件夹在Source面板下能够编辑。没错，这使得chrome一样能够成为咱们可选的编辑器之一，但发现仅仅用这个功能，并不能显示workplace的优点，须要结合SourceMapping一块儿来使用。使得可以让浏览器直接加载解析本地源文件（有时，可结合代理，如fiddler一块儿使用）。从而达到加速开发的目的。

使用

1> 开启source mapping功能。

进入Settings -> General，勾选“Enalble JS source maps” 和 “Enable CSS source maps”。

不一样版本chrome，表现形式不同，你们自行调节便可。

2> 将源文件添加入workplace中。

在Source面板中，选择对应要映射的文件（或者空白处）右键，选择“Add folder to workplace”，而后选择对应的工程（或者对应的静态资源文件）（这里我映射文档平台整个工程），这样，咱们就把对应的源文件加入到chrome的workplace中了。

这样，咱们选择其中一个文件，如home.css，会发现，会找到两个home.css，一个是远程的（来自http://fe.baidu.com的），另外一个则是本地的。以下图所示——

固然，咱们可使用选择settings中的workplace直接添加源文件——

3> 建立映射

右键须要映射的源文件（注意，这里是文件，而不是文件夹），选择“Map to network resource...”。

选择对应的远程请求，便可完成映射。注意，一旦一个文件进行了映射，默认会把对应的全部源文件及对应远程请求依据文件夹的排列进行一一映射。

此时，再去检索home.css，就只能找到源文件的home.css了，是由于对应的远程home.css请求已和workplace中的home.css进行了映射。

4> 更改css和js

建立完映射以后，直接调试样式面板中的样式，对应的源文件也进行了更改。今后更改样式减小了检索源文件再次更改对应样式的步骤。

对于js文件的更改，每一次的更改，控制台中都会出现“Recompilation and update succeeded.”的提示。

使用workplace及SourceMapping，对于事件驱动的js代码，可以实时看到更改的效果。免去了每次更改，刷新页面的过程。节省开发时间。

注意

• 当你所映射的源文件没有被直接解析并执行的时候，可以使用其余代理工具（如fiddler进行代理）结合workplace和SourceMapping一块儿使用。
• 当请求的文件具备参数的时候（如某些静态资源文件是懒加载的，会加入时间戳参数，并且每一次请求中时间参数均会发生改变），对于种状况，chrome的SourceMapping支持并不完善。企图用mappding正则去设置时，因为每次设置mapping路径以后都会自动加上“/”，使得映射失效。这个地方确实是一个坑啊。看到的同窗若是有解决方案，及时一块儿沟通交流哈。

总结

结合使用workplace及SourceMapping，其最主要的优点使得对css及js的更改直接反映到当前的预览页面及源文件。达到加速开发的效果。

若有不完善之处，欢迎与我讨论哈。