來源面板總覽

Sofia Emelianova
Sofia Emelianova

Chrome 開發人員工具「Sources」面板可用來:

查看檔案

在「網頁」窗格中,您可以查看頁面已載入的所有資源。

頁面窗格。

「頁面」窗格的編排方式:

  • 頂層 (例如上方螢幕截圖中的 top) 代表一個 HTML 頁框。可以在以下產品上找到「top」: 所造訪的網頁top 代表主要文件頁框。
  • 第二層 (例如上方螢幕截圖中的 developers.google.com) 代表來源
  • 第三層、第四層等等,代表載入的目錄和資源 。例如,在上方的螢幕截圖中,資源的完整路徑 devsite-googler-buttondevelopers.google.com/_static/19aa27122b/css/devsite-googler-button

在「Page」(頁面) 窗格中點選檔案,即可在「Editor」窗格中查看檔案內容。您可以查看任何類型的 檔案。圖片的預覽畫面會顯示圖片的預覽畫面。

在編輯器窗格中查看檔案。

編輯 CSS 和 JavaScript

使用「編輯器」窗格編輯 CSS 和 JavaScript。開發人員工具會更新頁面以執行新的程式碼。

「Editor」也可協助您偵錯。舉例來說,它會在語法錯誤和其他問題旁加上底線,並在語法錯誤和其他問題旁顯示內嵌錯誤工具提示,例如失敗的 CSS @importurl() 陳述式,以及含有無效網址的 HTML href 屬性。

內嵌語法錯誤工具提示。

如果編輯元素的 background-color,就會發現變更生效了 立即生效

在編輯器窗格中編輯 CSS。

如要讓 JavaScript 變更生效,請按下 Command + S 鍵 (Mac) 或 Control + S 鍵 (Windows、Linux)。開發人員工具不會重新執行指令碼,因此只有您在函式中進行的 JavaScript 變更才會生效。例如,請注意 console.log('A') 不會執行,console.log('B') 則不會。

在編輯器窗格中編輯 JavaScript。

如果開發人員工具在變更完成後重新執行整個指令碼,系統則會將 A 文字記錄到 控制台

當您重新載入網頁時,開發人員工具會清除 CSS 和 JavaScript 相關變更。如需操作說明,請參閱設定 Workspace,瞭解如何儲存檔案系統的變更。

建立、儲存及執行程式碼片段

「程式碼片段」是可以在任何網頁上執行的指令碼。假設您重複輸入 管理主控台中下列程式碼,將 jQuery 程式庫插入頁面,以便 可以透過 Console 執行 jQuery 指令:

let script = document.createElement('script');
script.src = 'https://code.jquery.com/jquery-3.2.1.min.js';
script.crossOrigin = 'anonymous';
script.integrity = 'sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=';
document.head.appendChild(script);

您可以改為將這段程式碼儲存在程式碼片段中,只要按幾下按鈕就能執行程式碼, 您需要的開發人員工具會將程式碼片段儲存到您的檔案系統。例如檢查程式碼片段 這個外掛程式能在網頁中插入 jQuery 程式庫

將 jQuery 程式庫插入網頁的程式碼片段。

如要執行程式碼片段,請按照下列步驟操作:

  • 在「Snippets」 窗格中開啟檔案,然後按一下底部動作列中的「執行」圖示 「Run」按鈕。
  • 開啟指令選單、刪除 > 字元,輸入 !,然後輸入 「文字片段」,然後按下 Enter 鍵。

詳情請參閱「從任何網頁執行程式碼片段」。

為 JavaScript 偵錯

與其使用 console.log() 來推斷 JavaScript 錯誤,建議您使用 改用 Chrome 開發人員工具偵錯工具。一般而言,我們會先設定中斷點 蓄意停止將程式碼插入程式碼,然後逐步執行程式碼,這一行 讓應用程式從可以最快做出回應的位置 回應使用者要求

在中斷點暫停。

逐步執行程式碼時,您可以查看及變更所有目前定義的值 在控制台執行 JavaScript 等等。

請參閱「開始使用 JavaScript 偵錯」,瞭解開發人員工具中的偵錯基本概念。

全心投入程式碼

Chrome 開發人員工具可以過濾架構產生的雜訊,並提供建構網頁應用程式時使用的工具,讓您專心編寫程式碼。

為提供新型網路偵錯服務,開發人員工具會執行以下操作:

此外,如果架構支援,偵錯工具中的「Call Stack」「Console」中的堆疊追蹤會顯示非同步作業的完整記錄。

詳情請參閱:

設定工作區

根據預設,如果在「來源」面板中編輯檔案,系統會在您重新載入時遺失這些變更 該網頁。工作區可讓您將在開發人員工具中所做的變更儲存至檔案 有些人會將 Cloud Storage 視為檔案系統 但實際上不是基本上,這樣您就能使用開發人員工具做為程式碼編輯器。

如要開始使用,請參閱「使用工作區編輯檔案」。