開發人員資源:查看及手動載入來源對應

索菲亞艾梅利安諾瓦
Sofia Emelianova

您可以使用「開發人員資源」分頁,檢查開發人員工具是否成功載入來源對應。如有需要,您可以手動載入這些素材資源。

開啟開發人員工具時,系統會嘗試載入來源對應 (如果有的話)。如果失敗,主控台會記錄類似以下的錯誤。

控制台中的來源地圖載入錯誤。

在「開發人員資源」導覽匣分頁中,您可以查看來源地圖載入狀態,甚至手動載入來源地圖。

開啟「開發人員資源」並檢查狀態

如何查看來源地圖的載入狀態:

  1. 開啟開發人員工具,並請務必啟用來源對應,然後依序前往 三點圖示選單。 >「更多工具」 >「開發人員資源」
  2. 在表格中,檢查下列資料欄的值:

    • Status (狀態):查看來源對應載入成功或失敗。
    • Error:讀取錯誤訊息 (如果有的話)。

「狀態」和「錯誤」欄。

依網址或錯誤篩選資源

如要讓焦點放在您感興趣的來源地圖,請在頂端的文字方塊中輸入文字,篩選出網址或錯誤訊息中不含這段文字的來源地圖。

篩除網址中沒有「js」的來源對應。

疑難排解

根據預設,開發人員工具會要求來源對應,而不是網站。系統可能會將這類要求視為跨來源,而且可能無法通過。

如果要先讓網站要求來源對應,請在「開發人員資源」的右上角,勾選「啟用透過目標載入的功能」核取方塊。

如果還是無法順利載入來源地圖,請嘗試按照下文說明手動載入地圖。

手動載入來源對應

如果載入失敗,或是想要在沒有原始碼對應的實際執行環境中對原始程式碼進行偵錯,您可以手動載入這些檔案:

  1. 使用支援這些技術的工具產生來源地圖
  2. 在本機代管來源對應。
  3. 在您的網頁上開啟開發人員工具,並確定啟用來源對應
  4. 在「Sources」中開啟已部署 (已處理) 的檔案,在「Editor」中對該檔案按一下滑鼠右鍵,然後從選單中選取「Add source map」

    從選單中選取「新增來源對應」。

  5. 在文字方塊中指定來源對應網址,然後按一下「新增」

    指定來源對應網址。

  6. 檢查來源對應是否顯示在「Developer Resources」(開發人員資源) 中,而檔案樹狀結構中是否顯示原始檔案 (與部署的檔案對應)。

    手動載入的來源對應會讓原始檔案顯示在檔案樹狀結構中。

  7. 請參閱為原始檔案進行偵錯一節的說明。