參考：Source Map

Source Map是什么

Source Map 一個(gè)獨(dú)立的map文件，與源碼在同一個(gè)目錄下
它是信息文件，里面儲(chǔ)存著位置信息，轉(zhuǎn)換后的代碼的每一個(gè)位置，所對(duì)應(yīng)的轉(zhuǎn)換前的位置

有什么用

大部分源碼（尤其是各種函數(shù)庫和框架）都要經(jīng)過轉(zhuǎn)換，才能投入生產(chǎn)環(huán)境。
常見的源碼轉(zhuǎn)換，主要是以下三種情況

• 壓縮
• 多個(gè)文件合并，減少HTTP請(qǐng)求數(shù)
• 其他語言編譯成JavaScript，例如CoffeeScript

開發(fā)環(huán)境debug時(shí)，提示可以直接定位到你哪行源碼有問題
但是轉(zhuǎn)換后的代碼報(bào)錯(cuò)，轉(zhuǎn)換后的代碼行數(shù)變少或變量名已經(jīng)換，此時(shí)報(bào)錯(cuò)信息就讓人一頭霧水，不知道錯(cuò)哪里了。

Source Map就是解決這個(gè)問題的，有了它，出錯(cuò)的時(shí)候，除錯(cuò)工具將直接顯示原始代碼，而不是轉(zhuǎn)換后的代碼。

開啟

Chrome瀏覽器支持這個(gè)功能。在Developer Tools的Setting設(shè)置中，確認(rèn)選中"Enable source maps"。

在轉(zhuǎn)換后的代碼尾部，加上一行就可以了

//@ sourceMappingURL=/path/to/file.js.map

如何生成Source map

最常用的方法是使用Google的Closure編譯器。