來源面板總覽

Kayce Basques
Sofia Emelianova
Sofia Emelianova
GitHub

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

查看檔案

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

頁面窗格。

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

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

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

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

編輯 CSS 和 JavaScript

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

「Editor」也可協助您偵錯。舉例來說，它會在語法錯誤和其他問題旁加上底線，並在語法錯誤和其他問題旁顯示內嵌錯誤工具提示，例如失敗的 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 程式庫插入頁面，以便 可以透過 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 視為檔案系統 但實際上不是基本上，這樣您就能使用開發人員工具做為程式碼編輯器。

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