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

Meggin Kearney
Meggin Kearney
Paul Bakaus
Paul Bakaus
Sofia Emelianova
Sofia Emelianova

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

開始使用預先處理器

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

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

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

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

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

使用支援的預先處理器

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

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

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

。 設定 >中偏好設定 >來源,請務必勾選 核取方塊。「JavaScript 來源對應」

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

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

使用來源對應進行偵錯

準備好啟用來源對應後,您就能執行以下操作:

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

    原始檔案會在「已編寫」部分中開啟。

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

    記錄點在編寫的檔案中。

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

    在狀態列中已部署 CSS 檔案的連結。

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

    含有原始檔案連結的控制台訊息。

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

    已在一般中斷點暫停執行作業。

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

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

含有 sourceMappingURL 註解的已部署檔案。

當您開啟任何已部署的檔案時,開發人員工具會通知您是否有 //# 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. 如要開啟來源檔案,請按一下「編輯器」狀態列中的連結。

sourceURL 註解,以及狀態列中的來源檔案連結。