部署前端之前，開發(fā)者通常會對代碼進(jìn)行打包壓縮，這樣可以減少代碼大小，從而有效提高訪問速度。然而，壓縮代碼的報錯信息是很難Debug的，因為它的行號和列號已經(jīng)失真。這時就需要Source Map來還原真實的出錯位置了。

公司主營業(yè)務(wù)：成都網(wǎng)站設(shè)計、成都做網(wǎng)站、移動網(wǎng)站開發(fā)等業(yè)務(wù)。幫助企業(yè)客戶真正實現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競爭能力。成都創(chuàng)新互聯(lián)公司是一支青春激揚、勤奮敬業(yè)、活力青春激揚、勤奮敬業(yè)、活力澎湃、和諧高效的團(tuán)隊。公司秉承以“開放、自由、嚴(yán)謹(jǐn)、自律”為核心的企業(yè)文化，感謝他們對我們的高要求，感謝他們從不同領(lǐng)域給我們帶來的挑戰(zhàn)，讓我們激情的團(tuán)隊有機會用頭腦與智慧不斷的給客戶帶來驚喜。成都創(chuàng)新互聯(lián)公司推出米脂免費做網(wǎng)站回饋大家。

為啥變換代碼？

前端代碼越來越復(fù)雜的情況下，開發(fā)者通常會使用webpack、UglifyJS2等工具對代碼進(jìn)行打包變換，這樣可以減少代碼大小，有效提高訪問速度。關(guān)于變換代碼的原因，這里不妨引用一下大神阮一峰的JavaScript Source Map 詳解:

• 壓縮，減小體積。比如jQuery 1.9的源碼，壓縮前是252KB，壓縮后是32KB。
• 多個文件合并，減少HTTP請求數(shù)。
• 其他語言編譯成JavaScript。最常見的例子就是CoffeeScript。

如何變換代碼？

下面是一個簡單的“hello World”程序hello.js

function sayHello()
{
    var name = "Fundebug";
    var greeting = "Hello, " + Name;
    console.log(greeting);
}

sayHello();

使用UglifyJS2對源代碼進(jìn)行壓縮變換:

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執(zhí)行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

對比壓縮前后的出錯信息，我們會發(fā)現(xiàn)，錯誤行號和列號已經(jīng)失真，且函數(shù)名也經(jīng)過了變換。而對于真實的前端項目，開發(fā)者會將數(shù)十個源文件壓縮為一個文件，這時，錯誤的列號可能多達(dá)數(shù)千，且出錯的真實文件名也是很難確定的，這樣的話，壓縮代碼的報錯信息是很難Debug的。

而Source Map則可以用于還原真實的出錯位置，幫助開發(fā)者更快的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

各種主流前端任務(wù)管理工具，打包工具都支持生成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文件，而它包含了代碼轉(zhuǎn)換前后的位置信息。也就是說，給定一個轉(zhuǎn)換之后的壓縮代碼的位置，就可以通過Source Map獲取轉(zhuǎn)換之前的代碼位置，反過來也一樣。Source Map各個屬性的含義如下:

• version：Source Map的版本號。
• sources：轉(zhuǎn)換前的文件列表。
• names：轉(zhuǎn)換前的所有變量名和屬性名。
• mappings：記錄位置信息的字符串，經(jīng)過編碼。
• file：(可選)轉(zhuǎn)換后的文件名。
• sourceRoot：(可選)轉(zhuǎn)換前的文件所在的目錄。如果與轉(zhuǎn)換前的文件在同一目錄，該項為空。
• sourcesContent:(可選)轉(zhuǎn)換前的文件內(nèi)容列表，與sources列表依次對應(yīng)。

Source Map真正神奇之處在于mappings屬性，它記錄了位置是如何對應(yīng)的。JavaScript Source Map 詳解已經(jīng)有很好的解釋，這里不再贅述。

怎樣使用Source Map?

主流瀏覽器均支持Source Map功能，不過Chrome與Firefox需要一些簡單的配置，具體步驟請參考How to enable source maps。下面以MacBook上的Chrome瀏覽器為例，介紹一下配置方法:

1. 開啟開發(fā)者工具

使用快捷鍵option + command + i；或者在菜單欄選擇視圖->開發(fā)者->開發(fā)者工具

2. 打開設(shè)置

使用快捷鍵fn + F1；或者點擊右上角的三個點的圖標(biāo)，選擇Settings

3. 開啟Source Map

在Sources中，選中Enable JavaScript source maps

為了測試，我寫了一個簡單的HTML文件hello.min.html

使用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還原真實的出錯位置，還可以根據(jù)Source Map的sourcesContent還原出錯的源代碼。點擊出錯位置，即可跳轉(zhuǎn)到源碼，這樣Debug將非常方便。

參考鏈接

• JavaScript Source Map 詳解
• Source Map Revision 3 Proposal
• How to enable source maps

關(guān)于Fundebug

Fundebug專注于JavaScript、微信小程序、微信小游戲、支付寶小程序、React Native、Node.js和Java實時BUG監(jiān)控。 自從2016年雙十一正式上線，F(xiàn)undebug累計處理了6億+錯誤事件，得到了Google、360、金山軟件等眾多知名用戶的認(rèn)可。歡迎免費試用！

版權(quán)聲明

轉(zhuǎn)載時請注明作者Fundebug以及本文地址：
https://blog.fundebug.com/2017/03/13/sourcemap-tutorial/