溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
部署前端之前，開發者通常會對代碼進行打包壓縮，這樣可以減少代碼大小，從而有效提高訪問速度。然而，壓縮代碼的報錯信息是很難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();使用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。
使用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各個屬性的含義如下:
Source Map真正神奇之處在于mappings屬性，它記錄了位置是如何對應的。JavaScript Source Map 詳解已經有很好的解釋，這里不再贅述。
主流瀏覽器均支持Source Map功能，不過Chrome與Firefox需要一些簡單的配置，具體步驟請參考How to enable source maps。下面以MacBook上的Chrome瀏覽器為例，介紹一下配置方法:
使用快捷鍵option + command + i；或者在菜單欄選擇視圖->開發者->開發者工具
使用快捷鍵fn + F1；或者點擊右上角的三個點的圖標，選擇Settings
在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專注于JavaScript、微信小程序、微信小游戲、支付寶小程序、React Native、Node.js和Java實時BUG監控。 自從2016年雙十一正式上線，Fundebug累計處理了6億+錯誤事件，得到了Google、360、金山軟件等眾多知名用戶的認可。歡迎免費試用！
轉載時請注明作者Fundebug以及本文地址：
https://blog.fundebug.com/2017/03/13/sourcemap-tutorial/
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
