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

參考資料

沒有留言:

張貼留言