來源面板總覽

Kayce Basques
Sofia Emelianova
Sofia Emelianova
GitHub

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

總覽

「Sources」(來源) 面板可讓您執行下列操作：

開啟「來源」面板

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

  1. 開啟開發人員工具。
  2. 按下以下指令開啟「Command」選單：
    • macOS：Command + Shift + P 鍵
    • Windows、Linux 和 ChromeOS：Control + Shift + P 鍵
  3. 開始輸入 sources，選取「Show 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 相關變更。請參閱設定工作區，瞭解如何將變更儲存至檔案系統。

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

程式碼片段是可在任何頁面上執行的程式碼。假設您在主控台中重複輸入下列程式碼，以便將 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 程式庫插入網頁的程式碼片段。

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

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

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

為 JavaScript 偵錯

請改用 Chrome 開發人員工具進行偵錯，而非使用 console.log() 推測 JavaScript 發生錯誤的位置。一般而言，我們會先設定中斷點 (在程式碼中刻意停止)，然後逐步執行程式碼 (一次一行執行)。

在中斷點暫停。

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

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

全心投入程式碼

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

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

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

如需更多資訊，請參閱：

設定工作區

根據預設，如果在「Sources」面板中編輯檔案，在重新載入頁面時，這些變更會遺失。工作區可讓您將在開發人員工具中所做的變更儲存至檔案系統。基本上，這可讓您使用開發人員工具做為程式碼編輯器。

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