部署前端之前，開發者通常會對代碼進行打包壓縮，這樣可以減少代碼大小，從而有效提高訪問速度。然而，壓縮代碼的報錯信息是很難Debug的，因為它的行號和列號已經失真。這時就需要Source Map來還原真實的出錯位置了。
為啥變換代碼？
前端代碼越來越復雜的情況下，開發者通常會使用webpack、UglifyJS2等工具對代碼進行打包變換，這樣可以減少代碼大小，有效提高訪問速度。關於變換代碼的原因，這里不妨引用一下大神阮一峰的JavaScript Source Map 詳解:
- 壓縮，減小體積。比如jQuery 1.9的源碼，壓縮前是252KB，壓縮后是32KB。
- 多個文件合並，減少HTTP請求數。
- 其他語言編譯成JavaScript。最常見的例子就是CoffeeScript。
如何變換代碼？
下面是一個簡單的“hello World”程序hello.js
function sayHello()
{
var name = "Fundebug";
var greeting = "Hello, " + Name;
console.log(greeting);
}
sayHello();
使用UglifyJS2對源代碼進行壓縮變換:
uglifyjs hello.js \
-m toplevel=true \
-c unused=true,collapse_vars=true \
-o hello.min.js
壓縮后的代碼hello.min.js
function o(){var o="Hello, "+Name;console.log(o)}o();
為啥需要Source Map?
使用Firefox執行hello.js的報錯信息是這樣:
ReferenceError: Name is not defined
sayHello file:///Users/fundebug/sourcemap-tutorial/hello.js:4:9
<匿名> file:///Users/fundebug/sourcemap-tutorial/hello.js:8:1
而hello.min.js的報錯信息是這樣:
ReferenceError: Name is not defined
o file:///Users/fundebug/sourcemap-tutorial/hello.min.js:1:18
<匿名> file:///Users/fundebug/sourcemap-tutorial/hello.min.js:1:59
對比壓縮前后的出錯信息，我們會發現，錯誤行號和列號已經失真，且函數名也經過了變換。而對於真實的前端項目，開發者會將數十個源文件壓縮為一個文件，這時，錯誤的列號可能多達數千，且出錯的真實文件名也是很難確定的，這樣的話，壓縮代碼的報錯信息是很難Debug的。
而Source Map則可以用於還原真實的出錯位置，幫助開發者更快的Debug。
什么是Source Map?
使用UglifyJS2時指定source-map選項即可生成Source Map:
uglifyjs hello.js \
-m toplevel=true \
-c unused=true,collapse_vars=true \
--source-map hello.min.js.map \
--source-map-include-sources \
--source-map-root \
-o hello.min.js
各種主流前端任務管理工具，打包工具都支持生成Source Map，具體可以查看生成Source Map - Fundebug文檔。
生成的hello.min.js多了sourceMappingURL，表示Source Map文件的位置。
function o(){var o="Hello, "+Name;console.log(o)}o();
//# sourceMappingURL=hello.min.js.map
生成的Source Map為hello.min.js.map:
{
"version": 3,
"sources": ["hello.js"],
"names": ["sayHello", "greeting", "Name", "console", "log"],
"mappings": "AAAA,QAASA,KAEL,GACIC,GAAW,UAAYC,IAC3BC,SAAQC,IAAIH,GAGhBD",
"file": "hello.min.js",
"sourceRoot": "",
"sourcesContent": ["function sayHello()\n{\n var name = \"Fundebug\";\n var greeting = \"Hello, \" + Name;\n console.log(greeting);\n}\n\nsayHello();\n"]
}
由hello.min.js.map可知，Source Map是一個JSON文件，而它包含了代碼轉換前后的位置信息。也就是說，給定一個轉換之后的壓縮代碼的位置，就可以通過Source Map獲取轉換之前的代碼位置，反過來也一樣。Source Map各個屬性的含義如下:
- version：Source Map的版本號。
- sources：轉換前的文件列表。
- names：轉換前的所有變量名和屬性名。
- mappings：記錄位置信息的字符串，經過編碼。
- file：(可選)轉換后的文件名。
- sourceRoot：(可選)轉換前的文件所在的目錄。如果與轉換前的文件在同一目錄，該項為空。
- sourcesContent:(可選)轉換前的文件內容列表，與sources列表依次對應。
Source Map真正神奇之處在於mappings屬性，它記錄了位置是如何對應的。JavaScript Source Map 詳解已經有很好的解釋，這里不再贅述。
怎樣使用Source Map?
主流瀏覽器均支持Source Map功能，不過Chrome與Firefox需要一些簡單的配置，具體步驟請參考How to enable source maps。下面以MacBook上的Chrome瀏覽器為例，介紹一下配置方法:
1. 開啟開發者工具
使用快捷鍵option + command + i；或者在菜單欄選擇視圖->開發者->開發者工具
2. 打開設置
使用快捷鍵fn + F1；或者點擊右上角的三個點的圖標，選擇Settings
3. 開啟Source Map
在Sources中，選中Enable JavaScript source maps
為了測試，我寫了一個簡單的HTML文件hello.min.html
<head>
<script type="text/javascript" src="hello.min.js"></script>
</head>
使用Chrome打開hello.min.html，在控制台看到的錯誤如下:
Uncaught ReferenceError: Name is not defined
at o (hello.min.js:1)
at hello.min.js:1
報錯的文件仍然為hello.min.js，需要刷新一下Source Map才有作用:
Uncaught ReferenceError: Name is not defined
at o (hello.js:4)
at hello.js:8
注意，Chrome的報錯信息沒有列號，因此4為錯誤的行號。Chrome不僅可以通過Source Map還原真實的出錯位置，還可以根據Source Map的sourcesContent還原出錯的源代碼。點擊出錯位置，即可跳轉到源碼，這樣Debug將非常方便。
參考鏈接
版權聲明:
轉載時請注明作者Fundebug以及本文地址：
https://blog.fundebug.com/2017/03/13/sourcemap-tutorial/