CoffeeScript debbugging using Source Map

CoffeeScript 1.6.1版多了一個非常有用的功能：Source Map支援，關於Source Map的介紹可以看這篇。為什麼會說非常有用呢？以coffeescript開發的時候最麻煩的莫過於debug了，因為最後執行的其實是js檔，導致debug時我們看到的都是編譯好的js檔。所幸原本我們必須從js自行導回coffee程式碼的動作，剛好就是Source Map設計來解決的目標：Source Map是一個在兩份文件中建立起一個互相對應的關係的工具（在coffeescript的情境中就是編譯前的coffee檔及編譯後的js檔之前每一行程式碼的關係）。

也就是說，CoffeeScript支援Source Map之後，我們可以知道編譯後的js檔的error是從原始coffee檔的哪一行、哪一個字產生的了！而且這一切，在coffeescript支援source map之後，變得非常非常的簡單，僅僅只需要在編譯時多加一個參數-m，類似以下這樣：

$coffee -cb -m -o lib/ src/ 

就會發現原本編譯出來的js檔案之外，會多一個同檔案名但副檔名為map的Source Map檔案，就是這個檔案把一切都變得簡單了。

如何使用？

瀏覽器：目前最新版的Chrome已經支援Source Map的功能，Firefox預計近期也會支援。

Chrome:

打開開發人員工具，點選右下角的齒輪，然後勾選Enable Source Maps即可。

NodeJS:

NodeJS部分尚未內建，不過解決方式並不難，我們只需要require一個額外的lib: source-map-support:

require('source-map-support').install()

然後一樣加入-m選項編譯coffee檔就可以了。以下是error trace:

TypeError: Cannot read property 'index' of null
    at Object. (../src/app.coffee:84:18)
    at Module._compile (module.js:449:26)
    at Object.Module._extensions..js (module.js:467:10)
    at Module.load (module.js:356:32)
    at Function.Module._load (module.js:312:12)
    at Module.runMain (module.js:492:10)
    at process.startup.processNextTick.process._tickCallback (node.js:244:9)

可以看到直接寫出錯誤出現在原始coffee檔的第幾行第幾個字元，方便吧！

結語

Source Map的用途當然不只這樣，以下是目前有的幾種應用：

1. Google Closure的原始檔及編譯後的js對應
2. CoffeeScript
3. LESS/SASS
4. 許多編譯成js檔的compiler

對於CoffeeScript的開發者來說這個功能的確節省了許多麻煩，也希望未來NodeJS能直接支援Source Map

參考資料

• source-map-support
• 其他Source Map的應用