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