国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

Source Map入門教程

archieyang / 607人閱讀

摘要：多個文件合并，減少請求數。生成的多了，表示文件的位置。轉換前的所有變量名和屬性名。自從年雙十一正式上線，累計處理了億錯誤事件，得到了金山軟件等眾多知名用戶的認可。

部署前端之前，開發者通常會對代碼進行打包壓縮，這樣可以減少代碼大小，從而有效提高訪問速度。然而，壓縮代碼的報錯信息是很難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()
{
    var name = "Fundebug";
    var greeting = "Hello, " + Name;
    console.log(greeting);
}

sayHello();
"]
}

由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

使用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將非常方便。

參考鏈接

JavaScript Source Map 詳解

Source Map Revision 3 Proposal

How to enable source maps

關于Fundebug

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

版權聲明

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/86949.html

相關文章

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

    摘要：這是局部安裝局部安裝的使用要帶路徑哇，要寫路徑，好麻煩哦，沒事，那就全局安裝吧。如果該值是一個相對路徑，它將相對于包含的文件。就相當于就相當于就相當于后面帶有意味著要完全匹配如果，因為沒完全匹配，那么加載的是下文件夾里的使用教程二 Webpack是什么,我就不過多介紹了，大家都有耳聞，不過還是配張圖讓大家體會下。showImg(https://segmentfault.com/img/...

    wudengzan 評論0 收藏0

  • babel6 入門-配置安裝使用_byKL

    摘要：入門什么是是一個廣泛使用的轉碼器，可以將代碼轉為代碼，從而在現有環境執行。 babel6 入門 什么是babel Babel是一個廣泛使用的轉碼器，可以將ES6代碼轉為ES5代碼，從而在現有環境執行。 因為es6比es5的代碼更為適合編寫程序,但是因為歷史的原因,現在普遍的瀏覽器并不支持es6代碼(普遍支持es5),即如果你寫es6代碼之后,在瀏覽器上運行出錯,因為瀏覽器的javas...

    qianfeng 評論0 收藏0

  • webpack4詳細教程，從無到有搭建react腳手架（四）

    摘要：相關鏈接詳細教程，從無到有搭建腳手架一詳細教程，從無到有搭建腳手架二詳細教程，從無到有搭建腳手架三管理打包后目錄結構打包結構如下修改配置通過相對目錄對資源命名前加上目錄名，效果后面的步驟在這里需要安裝一個大型的包，以為例安裝為第三 相關鏈接 webpack4詳細教程，從無到有搭建react腳手架（一） webpack4詳細教程，從無到有搭建react腳手架（二） webpack4詳細...

    chnmagnus 評論0 收藏0

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

    摘要：先展示一下文件目錄結構先把相關的依賴給裝好注意一下注釋只是為了解釋，在中不能寫注釋插件加載器預編譯語法跨平臺環境用來設置命令行安裝預編譯語法的配置中的對象，用于處理目錄的對象，提高開發效率。 Foreword 之前三篇大致介紹了webpack的用法，正如這個系列標題而言 從webpack 到 vue Component,所以最后一篇文章當然是要講 component, 不對應該說是結合...

    z2xy 評論0 收藏0

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

    摘要：先展示一下文件目錄結構先把相關的依賴給裝好注意一下注釋只是為了解釋，在中不能寫注釋插件加載器預編譯語法跨平臺環境用來設置命令行安裝預編譯語法的配置中的對象，用于處理目錄的對象，提高開發效率。 Foreword 之前三篇大致介紹了webpack的用法，正如這個系列標題而言 從webpack 到 vue Component,所以最后一篇文章當然是要講 component, 不對應該說是結合...

    MycLambert 評論0 收藏0

發表評論

0條評論

archieyang

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<