本頁面由 Cloud Translation API 翻譯而成。

來源面板總覽

Kayce Basques

Sofia Emelianova

您可以使用 Chrome 開發人員工具的「來源」面板：

查看檔案。
編輯 CSS 和 JavaScript。
建立並儲存 JavaScript 程式碼片段，即可在任何網頁上執行。摘要與書籤小程式類似，
為 JavaScript 偵錯。
設定工作區，這樣您在開發人員工具中所做的變更就會儲存至檔案系統中的程式碼。

查看檔案

使用「頁面」窗格即可查看該頁面載入的所有資源。

頁面窗格。

「Page」(網頁) 窗格的整理方式如下：

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

在「Page」窗格中按一下檔案，即可在「Editor」窗格中查看其內容。您可以查看任何類型的檔案如為圖片，則顯示圖片預覽畫面。

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

編輯 CSS 和 JavaScript

使用「Editor」窗格編輯 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') 則會執行。

在「Editor」窗格中編輯 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 程式庫插入網頁的程式碼片段。