玩轉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的更改直接反映到當前的預覽頁面及源文件。達到加速開發的效果。

若有不完善之處，歡迎與我討論哈。