開發(fā)人員可以使用源映射將轉譯的代碼映射回其原始源代碼。這五個技巧可幫助開發(fā)人員在JavaScript中使用源地圖，從而使他們可以花費更少的時間進行調試，而將更多的時間花在編寫軟件上。

根據(jù)GitHub的說法，JavaScript是世界上最受歡迎的編程語言。這是因為開發(fā)人員轉向JavaScript來構建僅在瀏覽器中提供的引人注目的用戶體驗。為了支持這些復雜的應用程序，已經(jīng)出現(xiàn)了有助于加快Web開發(fā)速度的新工具和框架：您可能聽說過React，TypeScript和Webpack。

這些新興工具雖然可以極大地提高生產力，但也帶來了新的挑戰(zhàn)，尤其是在調試生產JavaScript應用程序時。開發(fā)人員現(xiàn)在必須使用編譯后的代碼調試實時軟件，這些編譯后的代碼與他們熟悉的原始源代碼幾乎沒有相似之處。這使得修復生產問題的速度變慢，可能會給用戶帶來糟糕的體驗。

好消息是，開發(fā)人員可以使用源映射將轉譯的代碼映射回其原始源代碼。正確配置源映射后，Web瀏覽器和可觀察性工具會將堆棧跟蹤，源文件和其他有價值的調試信息轉換為原始形式。

所有這些都取決于正確設置源地圖，這可能比您預期的更具挑戰(zhàn)性。以下是五個技巧，可幫助開發(fā)人員使源地圖正常工作，從而使他們可以花費更少的時間進行調試，而將更多的時間用于執(zhí)行自己喜歡的事情：編寫軟件。

實際生成源地圖

源映射聽起來很復雜，但是它們只是JSON文件，其中包含瀏覽器和其他工具可以理解的映射定義。但是它們并不會突然出現(xiàn)-由開發(fā)人員來生成這些源映射是他們應用程序構建過程的一部分。幸運的是，幾乎每個生成JavaScript的編譯器都有生成它們的選項。

例如，如果原始源代碼在TypeScript中，則可以在編譯過程中使用TypeScript編譯器生成隨附的源映射。

$ tsc example.ts --outFile=example.js --source-map

上面的示例命令通過TypeScript編譯器發(fā)送example.ts，輸出一個名為example.js的JavaScript文件，還輸出一個名為example.js.map的隨附源映射文件。

無論您使用的是TypeScript，還是像Elm一樣編譯為JavaScript的另一種語言，還是像Webpack一樣的捆綁程序，請查看工具的文檔以獲取如何生成源地圖。像上面的示例一樣，它通常像單個命令行參數(shù)一樣簡單。

驗證sourceMappingURL指令

使源映射正常工作的下一步是確保正確聲明了sourceMappingURL指令。這是已編譯的JavaScript文件末尾的一行，表示源映射可用以及在何處可以找到。

//# sourceMappingURL=example.js.map

當瀏覽器看到此行時，他們將下載源映射，以確認在瀏覽器中運行的代碼與生成它的原始源代碼是一致的?？梢詫⑵渎暶鳛橥耆薅ǖ腢RL（即，它包括http：//或https：//），也可以相對于包含指令的源文件進行解析。

啟用源地圖生成時，生成JavaScript的編譯器會自動將此行插入最終的編譯文件中。但是，從最初對代碼進行轉換到到達用戶要下載的Web服務器或CDN，通常要經(jīng)過一段漫長的旅程。例如，后續(xù)的構建工具可能會移動此行的位置或將其刪除。某些CDN為了最大程度地減少線上字節(jié)傳輸，甚至已知自動從JavaScript文件中刪除該行。

為確保您做的正確，重要的是要檢查sourceMappingURL不僅在構建時生成，而且在用戶通過網(wǎng)絡下載此文件時也可以顯示。您可以使用瀏覽器，甚至使用cURL之類的工具來驗證其是否存在：

$ curl -s http://example.com/static/example.js | tail -1 //# sourceMappingURL=example.js.map

驗證指令存在后，請解析其指向的URL，以確保源映射存在并且可以通過網(wǎng)絡訪問。

將您的源文件嵌入到源圖中

源圖可能會出現(xiàn)問題，因為可以使用不同級別的粒度來構建源圖。例如，可以在不引用任何原始源文件的情況下創(chuàng)建“最小”源映射，這使瀏覽器僅能夠轉換基本元數(shù)據(jù)，如文件名和行/列位置。

如果要從源地圖中獲得最大價值，建議將原始源代碼嵌入源地圖中。這樣，您不僅可以獲得基本位置轉換的好處，而且還為瀏覽器和其他監(jiān)視工具提供了逐步瀏覽原始源代碼的功能。這在調試生產JavaScript時非常重要–否則，您會發(fā)現(xiàn)自己逐步遍歷了比人可讀的代碼更接近于匯編的已編譯和最小化的代碼。

大多數(shù)可生成JavaScript的編譯器都提供了將源代碼直接嵌入到源映射中的功能。例如，流行的JavaScript縮小工具UglifyJS使您可以在命令行上指定此選項。

$ uglifyjs --output=example.min.js example.js --source-map includeSources

運行此命令不僅會生成源映射并指定sourceMappingURL指令，而且還會將整個輸入文件（example.js）嵌入到源映射本身中。這為瀏覽器提供了關于如何向后處理原始代碼的最清晰畫面。

查看工具的源地圖文檔，以了解如何將源代碼嵌入到源地圖中。（注意：如果您不想與世界共享您的源代碼，請確保不要在公共互聯(lián)網(wǎng)上共享您的源地圖-請考慮在VPN后面對其進行保護。）

使用一個工具來管理JavaScript轉換

JavaScript開發(fā)人員使用多個編譯器來生成最終的編譯文件并不少見。例如，開發(fā)人員可能首先通過TypeScript編譯器運行其TypeScript代碼，然后使用UglifyJS縮小輸出。這些工具中的每一個都會生成一個源映射。將一種工具的輸出輸入另一種工具時會發(fā)生什么？

答案是：通常轉換會變得混亂，并且看起來您已經(jīng)生成了“有效的”源映射，但實際情況是，映射指向源代碼中的錯誤位置。瀏覽器將讓您瀏覽完全不正確的源代碼，因為它不了解映射是不正確的-只是它們是“有效的”。

最簡單的解決方案是使用一個工具在一個地方管理所有轉換，以生成單個，最終的，正確的源地圖。Webpack是一種實現(xiàn)此目的的工具，它是一種流行的JavaScript捆綁程序。

Webpack的配置可能有些陳舊，因此這里沒有提供示例。如果您遇到了錯誤的映射，我的建議是確認您沒有背對背使用多種工具。如果是這樣，請?zhí)剿魇褂肳ebpack之類的工具來管理您的轉換，而不是單獨使用輸出JavaScript的編譯器。

版本文件和源映射

即使您已經(jīng)完成了我們所討論的所有內容，但是有一種最終的方法可以讓您被殘破的源映射咬?。喊姹静黄ヅ洹．敒g覽器下載轉換后的文件的一個版本，然后下載其隨附的源地圖的更新的，不兼容的版本時，就會發(fā)生這種情況。因為源映射是從文件的不同版本生成的，所以即使文件稍有更改，瀏覽器最終仍會顯示不正確的轉換。

這看似罕見的情況，但是它可以通過多種方式發(fā)生。例如，如果在調試瀏覽器先前緩存的文件時觸發(fā)了代碼部署，則會發(fā)生這種情況。

為了阻止這種情況的發(fā)生，開發(fā)人員需要通過對每個文件名，URL的查詢字符串或文件的父目錄進行版本控制來對文件和源映射進行版本控制。每個編譯文件和源映射都應共享相同的版本和版本方案，以確保每個瀏覽器都下載屬于每個編譯文件的源映射。

// example.v1337.js *code goes here* //# sourceMappingURL=example.v1337.js.map

在上面的示例中，編譯文件的文件名（v1337）中嵌入了一個版本。sourceMappingURL指令指向嵌入了相同版本的源映射。只要此文件的新版本的文件名中帶有顛簸的版本號，瀏覽器就不可能錯誤地下載錯誤的附帶源映射。

總結

JavaScript繼續(xù)流行。在無數(shù)新框架和新技術的輔助下，它不僅用于為動態(tài)網(wǎng)頁提供動力，現(xiàn)在還為移動應用程序，游戲和服務器端代碼提供動力。使用源映射的開發(fā)人員可以更好地調試生產中的已編譯JavaScript代碼，從而使他們更快地修復應用程序問題并減少對用戶的影響。