如何使用 Closure Compiler 最小化 JavaScript 產生 Source Maps 後進行偵錯

本文介紹以一個 AngularJS App 當範例，如何使用 Closure Compiler 最小化 (minimizes) 後產生的 Source Map 透過 Chrome 來進行偵錯 (Debug)。

Closure Compiler 是 Google 開發的 JavaScript 最小化編譯器，
關於細節可以參考 Google Closure Compiler 編譯器：產生最佳化（最小化）JavaScript 程式碼。

本文使用的範例是 Kuroneko Idle Game (雖然不能算是一個遊戲)
所有的程式碼在 GitHub
https://github.com/allyusd/kuroneko
範例網站
http://allyusd.github.io/kuroneko

首先看一下完整建置指令
java -jar compiler-latest\compiler.jar --js_output_file myapp.min.js --create_source_map myapp.min.js.map --output_wrapper "%%output%%//# sourceMappingURL=myapp.min.js.map" js/**.js

這一段指令，將 js 目錄下含子目錄的所有 js 檔案，都合併成 myapp.min.js，並且在最後加上 sourceMappingURL 相關文字，同時產生 myapp.min.js.map 這個 Source Map 檔案。

參數介紹
js_output_file 表示最小化後輸出的 js 檔案名稱
create_source_map 表示同時要產生 Source Map，並指定檔案名稱
output_wrapper 可以進行加工，這個例子是加上 #sourceMappingURL 關鍵字

先介紹一下最小化，在開發 AngularJS (或任何 JavaScript 應用) 時，大部份的情況像是下圖的結構。


透過 Closure Compiler 可以合併成單一檔案，減少 Http request 次數，減少空白或換行字元，用短變數的替換…等等的好處。但是衍生了一個問題，就是不方便偵錯，這是用 Chrome 看到最小化後的結果(部份)。



人是貪心的，有沒有辦法魚與熊掌兼得呢？

實際上是有的，就是利用 Source Map，只要加上 create_source_map 參數就能產生，但是要如何使用呢？

我們在最小化的檔案 myapp.min.js 加上 sourceMappingURL 告訴瀏覽器 Source Map 的位置，接著用 Chrome 查看會出現下圖。



眼尖的話會發現除了 myapp.min.js 外出現很多斜體字檔案，其實就是合併前的 js 檔。開心的別太早，點開檔案發現裡面是空白的，因為並沒有把原始檔案上傳，如果有上傳的話，這時候已經可以看到原本的 JavaScript 檔案內容。

因為不想上傳多餘的東西，所以我們要偵錯的話必須讓 Chrome 知道原本的檔案在哪裡，首先在空白處點擊 Add folder to workspace


指定本地檔案路徑後，Chrome 上方會出現授權請求及警語。


按下允許後下方會出現本地工作目錄。

接著剩下最後一個動作了，在上面斜體字檔案按下右鍵，選擇 Map to file system resource...


最後選擇對應的本地檔案就完成了，結果如下圖


這些原始檔可不是只能看看而已，可以下中斷點的偵錯的喔！




資料來源
Introduction to JavaScript Source Maps
http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/

Map Preprocessed Code to Source Code

https://developers.google.com/web/tools/chrome-devtools/debug/readability/source-maps

Secrets of the Browser Developer Tools

http://devtoolsecrets.com/secret/debugging-use-javascript-source-maps.html

Set Up Persistence with DevTools Workspaces

https://developers.google.com/web/tools/setup/setup-workflow