對原始程式碼 (而非使用來源對應) 進行偵錯

即使用戶端程式碼經過合併、壓縮或編譯，也都應確保程式碼可供讀取及偵錯。使用來源對應將原始碼對應至「Sources」面板中的編譯程式碼。

開始使用預先處理工具

預先處理工具的來源對應會使開發人員工具一併載入原始檔案，以及壓縮的檔案。

Chrome 會實際執行壓縮的程式碼，但「來源」面板會顯示您編寫的程式碼。 你可以在來源檔案中設定中斷點並逐步檢查程式碼，所有錯誤、記錄和中斷點都會自動對應。

這樣可讓你在編寫程式碼時看到偵錯的外觀，而不是由開發伺服器提供及執行瀏覽器執行的程式碼。

如何在「Sources」面板中使用來源對應：

• 僅使用可以產生來源地圖的預先處理器。
• 確認您的網路伺服器可提供來源對應。

使用支援的預先處理器

與來源對應搭配使用的常見預先處理器包括但不限於：

• 轉頻器：Babel
• 編譯器：TypeScript 和 Dart
• 擴大器：terser
• Bundler 和開發伺服器：Webpack、Vite、esbuild 和 Parcel

如需擴充項目清單，請參閱「來源地圖：語言、工具和其他資訊」。

在「設定」中啟用來源對應

在 「設定」 >「偏好設定」 >「來源」中，請務必勾選 「啟用 JavaScript 來源對應」。

檢查來源對應是否成功載入

請參閱開發人員資源：手動查看及載入來源對應。

使用來源對應偵錯

已就緒和啟用來源地圖後，您可以執行下列操作：

1. 在「來源」面板中開啟網站的來源。

2. 如果只想聚焦在您編寫的程式碼，請在檔案樹狀結構中將編寫和部署的檔案分組。接著，展開 「Authored」部分，並在「Editor」中開啟原始來源檔案。

   

3. 照常設定中斷點。例如，記錄點。然後執行程式碼。

   

4. 請注意，「Editor」會在底部的狀態列中加入已部署檔案的連結。同樣地，對於已部署的 CSS 檔案，系統也會執行這項作業。

   

5. 開啟「Console」導覽匣。在此範例中，控制台的訊息旁邊會顯示原始檔案的連結，而非已部署檔案的連結。

   

6. 將中斷點類型變更為一般類型，然後再次執行程式碼。執行作業會這次暫停。

   

   請注意，「Call Stack」窗格會顯示原始檔案的名稱，而不是部署的檔案。

7. 在「Editor」(編輯器) 底部的狀態列中，按一下已部署檔案的連結。「Sources」(來源) 面板會將您導向對應的檔案。

開啟任何已部署的檔案時，如果找到 //# sourceMappingURL 註解及相關聯的原始檔案，開發人員工具就會通知您。

請注意，「Editor」(編輯器) 會自動美化已部署的檔案。實際上，這個程式碼在一行中包含所有程式碼，但 //# sourceMappingURL 註解除外。

為 eval() 通話命名 #sourceURL

#sourceURL 可讓您在處理 eval() 呼叫時簡化偵錯作業。這個輔助程式與 //# sourceMappingURL 屬性非常類似。詳情請參閱來源地圖第 3 版規格。

//# sourceURL=/path/to/source.file 註解會指示瀏覽器在您使用 eval() 時尋找來源檔案。這可協助您為評估作業和內嵌指令碼和樣式命名。

請在這個示範頁面上進行測試：

1. 開啟開發人員工具，然後前往「來源」面板。
2. 在頁面的「為代碼命名：」輸入欄位中輸入任意檔案名稱。
3. 按一下「Compile」按鈕。系統會顯示快訊，內含 CoffeeScript 來源的評估總和。
4. 在「網頁」窗格的檔案樹狀結構中，使用您輸入的自訂檔案名稱開啟新檔案。其中包含已編譯的 JavaScript 程式碼，其中含有來源檔案原始名稱的 // #sourceURL 註解。
5. 如要開啟來源檔案，請按一下「Editor」狀態列中的連結。