即使您已合併、縮減或編譯,仍可讓用戶端程式碼保持可讀及可偵錯的狀態。使用來源對應檔,在「Sources」面板中將原始碼對應至編譯的程式碼。
開始使用預處理器
來自預處理器的來源對應會導致開發人員工具除了載入經過壓縮的檔案外,也載入原始檔案。
Chrome 實際上會執行已精簡的程式碼,但「Sources」面板會顯示您編寫的程式碼。您可以設定中斷點,並逐步執行來源檔案中的程式碼,所有錯誤、記錄和中斷點都會自動對應。
這樣一來,您就能在編寫程式碼時進行偵錯,而非由開發伺服器提供並由瀏覽器執行的程式碼。
如要在「來源」面板中使用來源對應,請按照下列步驟操作:
- 請只使用可產生原始碼對照圖的預處理器。
- 確認網路伺服器可提供原始碼圖。
使用支援的預處理器
常見的預處理器與來源對應圖搭配使用時,包括但不限於:
如需完整清單,請參閱「來源對應:語言、工具和其他資訊」。
在「設定」中啟用來源地圖
在 中,依序點選「設定」 >「偏好設定」 >「來源」,然後勾選
「JavaScript 來源對應圖」。
檢查是否已成功載入來源對應
請參閱「開發人員資源:手動查看及載入原始碼地圖」。
使用來源對應偵錯
- 在「來源」面板中開啟網站來源。
如要專注於您編寫的程式碼,請在檔案樹狀結構中將已編寫和已部署的檔案分組。接著展開
「Authored」部分,並在「Editor」中開啟原始來源檔案。