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

Meggin Kearney

Paul Bakaus

Sofia Emelianova

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

開始使用預先處理器

預先處理工具的來源對應會讓開發人員工具除了壓縮檔案外，也會載入原始檔案。

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

這有助於您在編寫程式碼時對程式碼進行偵錯，而不是由開發伺服器提供並執行由瀏覽器執行的程式碼。

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

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

使用支援的預先處理器

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

• 轉頻器：Babel
• 編譯器：TypeScript 和 Dart
• Minifier：terser
• 套裝組合和開發伺服器：Webpack、Vite、esbuild 和 Parcel

如需延伸清單，請參閱「來源對應：語言、工具和其他資訊」。

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

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

注意：建議您一併勾選 「啟用 CSS 來源對應」。

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

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

使用來源對應進行偵錯

注意：本教學課程使用此示範做為範例。

準備好和啟用來源對應後，您就能執行以下操作：

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

2. 如果只要將重點放在您編寫的程式碼上，請在檔案樹狀結構中將編寫及部署的檔案分組。接著展開 「已編寫」部分，然後在「編輯器」中開啟原始來源檔案。

   

3. 照常設定中斷點。例如記錄點。接著執行程式碼。

   

4. 請注意，編輯器會在底部的狀態列中提供已部署檔案的連結。同樣地，已部署的 CSS 檔案也會執行此操作。

   

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

   

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

   

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

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

當您開啟任何已部署的檔案時，開發人員工具會通知您是否有 //# sourceMappingURL 註解和相關聯的原始檔案。

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

為 eval() 通話加上 #sourceURL 名稱

#sourceURL 可讓您在處理 eval() 呼叫時簡化偵錯作業。這個輔助程式看起來與 //# sourceMappingURL 屬性十分相似。詳情請參閱來源對應 V3 規格。

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

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

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