來源面板總覽

Kayce Basques
Kayce Basques
X GitHub
Sofia Emelianova
Sofia Emelianova
GitHub

使用「來源」面板查看及編輯網站資源，例如樣式表、JavaScript 檔案和圖片。

總覽

您可以在「來源」面板中執行下列操作：

開啟「來源」面板

如要開啟「來源」面板，請按照下列步驟操作：

  1. 開啟開發人員工具。
  2. 按下下列按鍵開啟「命令」選單：
    • macOS：Command+Shift+P 鍵
    • Windows、Linux、ChromeOS：Ctrl+Shift+P
  3. 開始輸入 sources，選取「顯示來源面板」，然後按下 Enter 鍵。

你也可以依序選取右上角的 more_vert「更多選項」 >「更多工具」 >「來源」。

查看檔案

按一下「頁面」分頁標籤，即可查看網頁載入的所有資源。

「網頁」分頁。

「頁面」分頁的編排方式：

  • 頂層 (如上方的螢幕截圖中的 top) 代表 HTML 框架。您造訪的每個頁面都會顯示 top。top 代表主要文件框架。
  • 第二層 (例如上方螢幕截圖中的 developers.google.com) 代表「來源」。
  • 第三層、第四層等代表從該來源載入的目錄和資源。舉例來說，在上述螢幕截圖中，資源 devsite-googler-button 的完整路徑為 developers.google.com/_static/19aa27122b/css/devsite-googler-button。

按一下「頁面」分頁中的檔案，即可在「編輯器」分頁中查看檔案內容。你可以查看任何類型的檔案。如果是圖片，系統會顯示預覽畫面。

在「編輯器」分頁中查看檔案。

編輯 CSS 和 JavaScript

按一下「編輯器」分頁標籤，即可編輯 CSS 和 JavaScript。開發人員工具會更新網頁，執行新程式碼。

編輯器也能協助您執行偵錯。舉例來說，如果 CSS @import 和 url() 陳述式失敗，以及 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 程式庫插入網頁，以便從「控制台」執行 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 程式庫插入網頁的程式碼片段。

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

  • 在「程式碼片段」分頁中開啟檔案，然後按一下底部動作列中的「執行」「執行」按鈕。。
  • 開啟指令選單，刪除 > 字元，輸入 !，輸入程式碼片段的名稱，然後按下 Enter 鍵。

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

偵錯 JavaScript

建議您改用 Chrome 開發人員工具的偵錯工具，而不是使用 console.log() 推斷 JavaScript 的錯誤位置。一般來說，您會先設定中斷點 (程式碼中刻意停止執行的位置)，然後逐行逐步執行程式碼。

在中斷點暫停。

逐步執行程式碼時，您可以查看及變更所有目前定義的屬性和變數值，在「控制台」中執行 JavaScript 等等。

如要瞭解開發人員工具的偵錯基本知識，請參閱「開始偵錯 JavaScript」。

專心編寫程式碼

Chrome 開發人員工具可讓您篩除架構和建構工具產生的干擾，只專注於您編寫的程式碼。

為了提供新式網頁偵錯體驗，開發人員工具會執行下列操作：

此外，如果架構支援，偵錯工具中的「呼叫堆疊」和「控制台」中的堆疊追蹤會顯示非同步作業的完整記錄。

詳情請參閱：

設定 Workspace

根據預設，在「來源」面板中編輯檔案時，重新載入頁面會導致變更遺失。工作區可讓您將在開發人員工具中進行的變更儲存至檔案系統。這項功能可讓您將開發人員工具當做程式碼編輯器使用。

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