Fundebug支持通過Source Map還原錯誤棧(stacktrace)

Fundebug支持使用Source Map還原真正的錯誤位置。這樣的話，開發者能夠迅速定位出錯的源代碼。另外，Fundebug還能夠展示出錯的代碼塊，幫助開發者更快地解決問題。

爲什麼需要壓縮代碼?

部署JavaScript腳本前，開發者通常會使用UglifyJS2等工具對代碼壓縮變換:

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

在生產環境中使用壓縮的代碼，能夠有效加快訪問速度。

爲什麼需要Source Map?

壓縮代碼的錯誤的位置信息(文件，行號和列號)已經失真，開發者很難定位源代碼的位置。而且，壓縮代碼的變量以及函數名稱都會進行變換，這也增加了開發者Debug的難度。

Source Map是一個JSON文件，其中包含了代碼轉換前後的位置信息。給定一個轉換之後的壓縮代碼的位置，就可以通過Source Map獲取轉換之前的代碼位置，反過來也一樣。

Fundebug支持使用Source Map還原真正的錯誤位置。這樣的話，開發者能夠迅速定位出錯的源代碼。另外，Fundebug還能夠展示出錯的代碼塊，幫助開發者更快地解決問題。

如何生成Source Map？

各種主流前端任務管理工具，打包工具都支持生成Source Map。具體請參考Fundebug文檔 - 生成Source Map:

• UglifyJS2
• Grunt
• Gulp
• Webpack
• SystemJS

如何使用Source Map?

默認情況下，Fundebug會根據壓縮代碼中的sourceMappingURL下載Source Map文件，用戶僅需要將生成的Source Map文件部署在服務器上，不需要額外操作。

如果用戶不希望公開Source Map，則可以主動上傳Source Map文件。Fundebug提供了兩種不同的上傳方式:

通過Fundebug的前端UI上傳

1. 進入『控制檯』
2. 選擇『項目設置』
3. 點擊『Source Map』
4. 選中需要上傳的Source Map文件(支持上傳多個Source Map文件)
5. 點擊『上傳』

通過Fundebug的API上傳

curl https://fundebug.com/javascript/sourcemap/upload \
     -X POST \
     -F apikey=195497e8297718ef87304f4d6f9783e4718e1d97200f87f28c7a28e34a6c1461 \
     -F sourceMap=@dist/app.js.map

其中:

• apikey爲項目的apikey
• sourceMap爲需要上傳的Source Map文件

具體請參考Fundebug文檔 - 上傳Source Map:

參考鏈接

• JavaScript Source Map 詳解
• Source Map Revision 3 Proposal
• Fundebug文檔 - Source Map