玩轉Chrome workplace

標籤：blog   http   io   ar   使用   sp   檔案   on   2014   

簡介

相信大家都知道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的更改直接反映到當前的預覽頁面及源檔案。達到加速開發的效果。

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

 

玩轉Chrome workplace