Source Map(原始碼映射表)


前言

本文提供了如何使用Source Map(原始碼映射表)進行Javascript除錯的指引。內容並沒有討論Source Map的詳細規格內容,有興趣可以看參考資料中的連結內,有收集很多相關的資訊。

Source Map是什麼

Source Map是除錯時用的,它是用來映射對照"正式執行的程式碼檔案內容",與"開發時撰寫的程式碼檔案內容"。

它不只用於Javascript,也可以用於CSS框架如SASS/LESS的除錯。目前這種檔案的規格是由Google Chrome開始制定的,大約是在2013年開始。Chrome也是最早能支援Source Map的瀏覽器,目前還有另外的瀏覽器也可以支援 - Firefox、Opera、Safari、IE11等等。

Source Map會被制定出來,主是要因為Javascript程式碼,雖然直接從瀏覽器的原始碼檢視工具可以看得到,但在應用程式正式發行時,為了增加檔案傳輸的效率,進行最小化(Minify)或醜化(Uglify)之類的壓縮,造成無法直接進行原始碼除錯的工作。以下是最常見的情況:

情況1: 最小化(Minify)或醜化(Uglify)檔案

使用最小化(Minify)或醜化(Uglify)的工具,原先的原始碼會去除不必要的空白,也有可能連變數名稱都與原先的不同。

最小化工具也會可以將多個來源檔案合併為一個執行用的發行檔案,這也是另一個常見的情況。

註:合併原始碼用的稱為打包工具(bundler),常常與最小化工具合併一起使用

情況2: 使用需要編譯到Javascript檔案的語言或工具

CoffeeScript或Typescript等語言,仍然需要編譯成Javscript原始碼,這個情況下,執行的那份原始碼與開發時撰寫的原始碼不同。

目前很多新式的函式庫或開發框架,使用了大量的ES6/ES7語法,為了能支援大部份的瀏覽器品牌與版本,會使用像babel的工具來轉置(transform),執行的原始碼檔案與開發時撰寫的原始碼也是不同的。

Source Map如何產生

有些整合式的開發工具(IDE),就已經有內附的產生工具,像是WebStormVisual Studio,通常在編譯時(例如使用Typescript),或進行最小化工具發行時,就會自動產生。這些工具通常也帶有自己的除錯器,或是可以配合瀏覽器除錯。

手動產生的工具其實是類似的,只是整合式開發工具幫你先設定好了,或是自動作這些工作。手動產生工具可以自行定義裡面的參數,彈性比較高,設定上也會複雜些。下面是幾個比較常見的:

使用webpack的Source Map功能

webpack本身就已經有內建產生Source Map的產生功能,如果像我是使用webpack、webpack-dev-server作為開發用的伺服器環境,而沒有用到像Webstrom的整合開發工具,直接用webpack中的功能是最快的。

它只需要在webpack.config.js加上多一行設定:

devtool: 'eval-source-map',

註:這裡用的是eval-source-map模式,webpack支援7種模式,視你的需求而定。詳見devtool中文詳解

然後再輸出設定設區段,加上要輸出的Source Map檔案名稱,例如我的輸出打包的檔案是app.js,Source Map就使用app.js.map這檔名:

output: {
        filename: "app.js",
        path: __dirname + "/dist",
        sourceMapFilename: "app.js.map"
 },

設定好了要記得要先先執行一次下面的指令,讓webpack產生一次app.js.map檔案:

webpack -d

如果你有用到其他已經帶有Source Map的模組,可以用額外的source-map-loader來產生轉換過的Source Map。這我現在就沒使用了。有需要可以到這個Github儲存庫下載相關的設定檔案:

用Source Map除錯

支援性比較好的當然還是Google Chrome,以下轉貼一個介紹在Google Chrome用Source Map除錯的影片:

參考資源: