Chrome將預處理的程式碼對映到原始碼 - Break易站
在你的程式碼合併，壓縮或編譯後，保持客戶端程式碼可讀性和可除錯性。使用Source Maps(原始碼對映)將原始碼對映到已編譯的程式碼。
這篇文章的內容為：
- 使用
Source Maps(原始碼對映)將壓縮程式碼對映到原始碼。然後，您可以在其原始原始碼中讀取和除錯編譯的程式碼。 - 僅使用能夠生成
Source Maps(原始碼對映)的前處理器。 - 驗證您的web 伺服器是否可以為
Source Maps(原始碼對映)提供服務。
開始使用前處理器
本文介紹在 DevTools 的 Sources(原始檔)面板中如何與JavaScript Source Maps(原始碼對映)互動。有關什麼是前處理器，它們起到什麼作用，Source Maps是如何工作的，請首先檢視 設定CSS和JS前處理器。
使用一個支援的前處理器
你需要使用一個能夠建立 Source Maps(原始碼對映) 的 minifier。對於最受歡迎的選擇，請參閱我們的前處理器支援部分。 對於擴充套件視野的話，可以在wiki上參閱Source Maps：語言，工具和其他資訊。
以下型別的前處理器通常與Source Maps(原始碼對映)結合使用：
- Transpilers(轉譯工具) (Babel, Traceur)
- Compilers(編譯工具) (Closure Compiler, TypeScript, CoffeeScript, Dart)
- Minifiers（壓縮工具） (UglifyJS)
DevTools Sources Source Maps(原始碼對映)
來自前處理器的Source Maps(原始碼對映)會使DevTools載入您的原始檔案，而不是壓縮後的檔案。然後你可以使用原始檔來設定斷點以及除錯程式碼。同時，Chrome實際上執行的是壓縮後的程式碼。這會讓你產生一種錯覺，執行生產環境的網站像在開發環境中一樣。
當在DevTools中執行Source Maps(原始碼對映)時，你會注意到JavaScript並沒有被編譯，你可以看到它引用的所有單獨的JavaScript檔案。這使用了Source Maps(原始碼對映)，但在幕後實際執行的是編譯後的程式碼。任何錯誤，日誌和斷點將對映到開發的程式碼中，這對於除錯代理來說非常方便！所以實際上它給你的錯覺，你在生產環境中執行一個開發環境中的網站。
在settings(設定)中啟用 Source Maps(原始碼對映)
預設情況下,Source Maps(原始碼對映)已啟用（從Chrome 39起）,但如果你想要仔細檢查或啟用它們，首先開啟DevTools並 開啟主選單，然後選擇Settings(設定)，如圖：
在開啟的設定對話方塊中，在Sources標籤下，勾選Enable JavaScript Source Maps(啟用JavaScript Source Maps)。您還可以勾選Enable CSS Source Maps(啟用 CSS Source Maps)。
使用Source Maps(原始碼對映)除錯
當除錯程式碼和Source Maps(原始碼對映)啟用時，Source Maps(原始碼對映)將顯示在兩個地方：
- 在
Console(控制檯)中（連結到源應該是原始檔案，而不是生成的） - 當單步執行程式碼（
call stack(呼叫堆疊)窗格中的連結應該開啟原始原始檔）
@sourceURL 和 displayName
雖然不是Source Maps(原始碼對映)規範的一部分，@sourceURL允許你使用evals時使開發變得更加容易。這個看起來非常類似於//# sourceMappingUR屬性，實際上在Source Map V3規範中提到。
通過在程式碼中包含以下特殊註釋，這將被評估，您可以命名evals和內聯指令碼和樣式，因此它們在您的DevTools中顯示為更為邏輯的名稱。
//# sourceURL=source.coffee
開啟demo，然後:
- 開啟 DevTools 並轉到
Sources(原始檔)面板。 - 在
Name your code:輸入框中，輸入一個檔名。 - 點選
Compile(完成)按鈕。 - 將顯示一條包含CoffeeScript原始碼中的求值總和的警告。
如果展開Sources(原始檔)面板中Sources窗格，您現在將將看到你之前輸入自定義檔名的新檔案。如果你雙擊檢視這個檔案，它將包含我們原始源的編譯的JavaScript。然而，在最後一行，將是一個// @sourceURL註釋，指示原始原始檔是什麼。當使用語言抽象時，這對於除錯有極大幫助。
愚人碼頭注：'//@ sourceURL' 和 '//@ sourceMappingURL' 已經過時, 請使用 '//# sourceURL=' 和 '//# sourceMappingURL=' 代替。
說明
翻譯自：https://developers.google.com/web/tools/chrome-devtools/javascript/watch-variables
本文內容來自：Chrome DevTools谷歌瀏覽器開發者工具如何遍歷你的程式碼 – Break易站
—Author: Arvin Chen —Web Address: www.breakyizhan.com (Break易站)
]