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

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

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

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

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

實(shí)際生成源地圖

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

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

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

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

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

驗(yàn)證sourceMappingURL指令

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

//# sourceMappingURL=example.js.map

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

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

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

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

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

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

源圖可能會(huì)出現(xiàn)問題，因?yàn)榭梢允褂貌煌墑e的粒度來構(gòu)建源圖。例如，可以在不引用任何原始源文件的情況下創(chuàng)建“最小”源映射，這使瀏覽器僅能夠轉(zhuǎn)換基本元數(shù)據(jù)，如文件名和行/列位置。

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

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

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

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

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

使用一個(gè)工具來管理JavaScript轉(zhuǎn)換

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

答案是：通常轉(zhuǎn)換會(huì)變得混亂，并且看起來您已經(jīng)生成了“有效的”源映射，但實(shí)際情況是，映射指向源代碼中的錯(cuò)誤位置。瀏覽器將讓您瀏覽完全不正確的源代碼，因?yàn)樗涣私庥成涫遣徽_的-只是它們是“有效的”。

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

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

版本文件和源映射

即使您已經(jīng)完成了我們所討論的所有內(nèi)容，但是有一種最終的方法可以讓您被殘破的源映射咬住：版本不匹配。當(dāng)瀏覽器下載轉(zhuǎn)換后的文件的一個(gè)版本，然后下載其隨附的源地圖的更新的，不兼容的版本時(shí)，就會(huì)發(fā)生這種情況。因?yàn)樵从成涫菑奈募牟煌姹旧傻?，所以即使文件稍有更改，瀏覽器最終仍會(huì)顯示不正確的轉(zhuǎn)換。

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

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

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

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

總結(jié)

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