Source Map入門教程

archieyang 發(fā)布于2019-08-21 11:38 / 634人閱讀

摘要：多個(gè)文件合并，減少請(qǐng)求數(shù)。生成的多了，表示文件的位置。轉(zhuǎn)換前的所有變量名和屬性名。自從年雙十一正式上線，累計(jì)處理了億錯(cuò)誤事件，得到了金山軟件等眾多知名用戶的認(rèn)可。

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

為啥變換代碼？

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

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

如何變換代碼？

下面是一個(gè)簡(jiǎn)單的“hello World”程序hello.js

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

sayHello();

使用UglifyJS2對(duì)源代碼進(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的報(bào)錯(cuò)信息是這樣:

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的報(bào)錯(cuò)信息是這樣:

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

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

而Source Map則可以用于還原真實(shí)的出錯(cuò)位置，幫助開發(fā)者更快的Debug。

什么是Source Map?

使用UglifyJS2時(shí)指定source-map選項(xiàng)即可生成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()
{
    var name = "Fundebug";
    var greeting = "Hello, " + Name;
    console.log(greeting);
}

sayHello();
"]
}

由hello.min.js.map可知，Source Map是一個(gè)JSON文件，而它包含了代碼轉(zhuǎn)換前后的位置信息。也就是說，給定一個(gè)轉(zhuǎn)換之后的壓縮代碼的位置，就可以通過Source Map獲取轉(zhuǎn)換之前的代碼位置，反過來也一樣。Source Map各個(gè)屬性的含義如下:

version：Source Map的版本號(hào)。

sources：轉(zhuǎn)換前的文件列表。

names：轉(zhuǎn)換前的所有變量名和屬性名。

mappings：記錄位置信息的字符串，經(jīng)過編碼。

file：(可選)轉(zhuǎn)換后的文件名。

sourceRoot：(可選)轉(zhuǎn)換前的文件所在的目錄。如果與轉(zhuǎn)換前的文件在同一目錄，該項(xiàng)為空。

sourcesContent:(可選)轉(zhuǎn)換前的文件內(nèi)容列表，與sources列表依次對(duì)應(yīng)。

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

怎樣使用Source Map?

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

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

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

2. 打開設(shè)置

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

3. 開啟Source Map

在Sources中，選中Enable JavaScript source maps

為了測(cè)試，我寫了一個(gè)簡(jiǎn)單的HTML文件hello.min.html

使用Chrome打開hello.min.html，在控制臺(tái)看到的錯(cuò)誤如下:

Uncaught ReferenceError: Name is not defined
    at o (hello.min.js:1)
    at hello.min.js:1

報(bào)錯(cuò)的文件仍然為hello.min.js，需要刷新一下Source Map才有作用:

Uncaught ReferenceError: Name is not defined
    at o (hello.js:4)
    at hello.js:8

注意，Chrome的報(bào)錯(cuò)信息沒有列號(hào)，因此4為錯(cuò)誤的行號(hào)。Chrome不僅可以通過Source Map還原真實(shí)的出錯(cuò)位置，還可以根據(jù)Source Map的sourcesContent還原出錯(cuò)的源代碼。點(diǎn)擊出錯(cuò)位置，即可跳轉(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實(shí)時(shí)BUG監(jiān)控。自從2016年雙十一正式上線，F(xiàn)undebug累計(jì)處理了6億+錯(cuò)誤事件，得到了Google、360、金山軟件等眾多知名用戶的認(rèn)可。歡迎免費(fèi)試用！

版權(quán)聲明

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

GPU云服務(wù)器云服務(wù)器 source-map Source webrtc source source insight

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/86949.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

archieyang

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

常見的編譯器

閱讀 2935·2021-10-14 09:42
寶塔面板安裝pdftoolbox – 一個(gè)好用的PDF在線工具箱

閱讀 1285·2021-09-24 10:32
C語言深層理解：函數(shù)中棧幀的創(chuàng)建與銷毀

閱讀 3003·2021-09-23 11:21
阿里云：云上年中鉅惠 - 輕量應(yīng)用服務(wù)器60元/年 ECS云服務(wù)器72元/年

閱讀 2877·2021-08-27 13:10
CSS動(dòng)畫優(yōu)雅降級(jí)的簡(jiǎn)單總結(jié)

閱讀 3359·2019-08-29 18:41
flask基礎(chǔ)之一

閱讀 2223·2019-08-29 15:16
這些國外前端周刊值得你收藏一下

閱讀 1240·2019-08-29 13:17
多圖片展開收縮實(shí)例

閱讀 915·2019-08-29 11:22

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！

Source Map入門教程

相關(guān)文章

[Webpack并不難]使用教程（一）--- entry，devtool，output，resol

babel6 入門-配置安裝使用_byKL

webpack4詳細(xì)教程，從無到有搭建react腳手架（四）

webpack -> vue Component 從入門到放棄（四）

webpack -> vue Component 從入門到放棄（四）

發(fā)表評(píng)論

0條評(píng)論

archieyang

男|高級(jí)講師

TA的文章

常見的編譯器

寶塔面板安裝pdftoolbox – 一個(gè)好用的PDF在線工具箱

C語言深層理解：函數(shù)中棧幀的創(chuàng)建與銷毀

阿里云：云上年中鉅惠 - 輕量應(yīng)用服務(wù)器60元/年 ECS云服務(wù)器72元/年

CSS動(dòng)畫優(yōu)雅降級(jí)的簡(jiǎn)單總結(jié)

flask基礎(chǔ)之一

這些國外前端周刊值得你收藏一下

多圖片展開收縮實(shí)例

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！

Source Map入門教程

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！