將已處理的程式代碼對應至原始原始原始程式碼，以進行偵錯

若要在 DevTools 中偵錯 JavaScript 時查看並使用原始原始原始程式碼，而不需要使用網頁伺服器所傳回程式代碼的已編譯和縮製版本，請使用來源對應。

來源對應可讓用戶端程式代碼保持可讀取且可偵錯，即使在建置程式編譯並縮寫程式代碼並將它合併成單一檔案之後也一樣。來源對應會將已編譯的縮製程式代碼對應至原始原始原始程式碼檔案。在 DevTools 中，您可以接著讀取和偵錯熟悉的原始原始原始程式碼，而不是無法辨識的轉換和編譯程式代碼。

若要使用來源對應，您必須在建置可產生來源對應的程式代碼時使用工具。有許多工具可供使用，例如：

本文說明如何在 DevTools 中啟用來源對應，以及如何使用它們來偵錯您的程式代碼。其不會說明如何在建置程式中產生來源對應。若要深入瞭解如何將來源對應發佈至 Azure Artifacts 符號伺服器，請參閱透過發佈來源對應至 Azure Artifacts 符號伺服器來安全地偵錯原始程式代碼。

DevTools 中的來源對應

來自建置工具的來源對應會導致 DevTools 除了您縮製的檔案之外，還會載入原始檔案，並將縮製的程式代碼取代為原始程式碼。例如：

同時，Microsoft Edge 會實際執行您的縮製程式代碼來轉譯網頁。原始碼對應僅供DevTools使用，僅供開發人員顯示原始碼。

DevTools 知道如何在已編譯檔案中找到批注時 //# sourceMappingURL= 載入來源對應。例如，下列批注會指示 DevTools 從 http://example.com/path/to/your/sourcemap.map載入來源對應：

//# sourceMappingURL=http://example.com/path/to/your/sourcemap.map

依預設會啟用來源對應。

若要確定已啟用來源對應：

若要開啟 DevTools，請在 Microsoft Edge 中，以滑鼠右鍵按兩下網頁，然後選取 [ 檢查]。或者，按 Ctrl+Shift+I (Windows、Linux) 或 Command+Option+I (macOS) 。
在 DevTools 中，按兩下 [自定義並控制 DevTools] ([) > [設定] ( [設定] ) >[喜好設定]。
在 [ 喜好設定] 頁面的 [ 來源] 區段中，確定已選取 [ 啟用 JavaScript 來源對應 ] 複選框和 [ 啟用 CSS 來源對應 ] 複選框：
在 [ 設定] 的右上方，按兩下 [ 關閉 () ] 按鈕。

根據預設，當來源對應 URL 是遠端檔案路徑時，DevTools 不會載入來源對應，例如當來源對應 URL 開頭為 file:// ，並以不在目前裝置上的檔案為目標時。

若要開啟從檔案路徑載入來源對應：

在 DevTools 中，按兩下 [自定義並控制 DevTools] ([) > [設定] ( [設定] ) >[喜好設定]。
在 [ 喜好設定] 頁面的 [ 來源] 區 段中，選取 [ 允許 DevTools 從遠端檔案路徑載入資源，例如來源對應] 複選框。基於安全性考慮，預設為停用。

偵錯程式代碼和啟用來源對應時，來源對應會用於數個位置：

在 主控台 工具中，從記錄訊息到來源檔案的連結會移至原始檔案，而不是編譯的檔案。
在 [來源 ] 工具中逐步執行程式碼時，原始檔案會顯示在左側的 [ 導覽器 ] 窗格中。當您開啟原始檔案時，會顯示其原始程序代碼，而且您可以在其中設定斷點。若要深入瞭解在來源工具中使用斷點進行偵錯，請參閱使用斷點暫停程序代碼。
在 [來源] 工具中，出現在 [調試程式] 窗格的 [呼叫堆棧] 中的原始程式檔連結會開啟原始程序檔。
在效能工具中，圖表會顯示原始函式名稱，而不是已編譯的函式名稱。

注意事項

此頁面的部分是根據Google所建立和共用的工作進行修改，並根據 Creative Commons Attribution 4.0 國際授權中所述的條款使用。原始頁面可在這裡找到，並由 Meggin Kearney 和 Paul Bakaus 撰寫。