相信大家都知道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的更改直接反映到當前的預覽頁面及源文件。達到加速開發的效果。
如有不完善之處，歡迎與我討論哈。
我居然沒有測試成功，不曉得啥原因！！！成功的朋友可否留言一下。
參考鏈接：http://www.tuicool.com/articles/VJZVb2Q
http://isux.tencent.com/chrome-workspace.html
