Chrome 開發人員工具「Sources」面板可用來:
- 檢視檔案。
- 編輯 CSS 和 JavaScript。
- 建立並儲存 JavaScript 程式碼片段,且可在任何網頁上執行。摘要是 類似於書籤小程式
- 為 JavaScript 偵錯。
- 設定工作區,這樣您在開發人員工具中所做的變更,就會儲存至檔案的程式碼 有些人會將 Cloud Storage 視為檔案系統 但實際上不是
查看檔案
在「網頁」窗格中,您可以查看頁面已載入的所有資源。
「頁面」窗格的編排方式:
- 頂層 (例如上方螢幕截圖中的
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
,就會發現變更生效了
立即生效
如要讓 JavaScript 變更生效,請按下 Command + S 鍵 (Mac) 或 Control + S 鍵 (Windows、Linux)。開發人員工具不會重新執行指令碼,因此只有您在函式中進行的 JavaScript 變更才會生效。例如,請注意 console.log('A')
不會執行,console.log('B')
則不會。
如果開發人員工具在變更完成後重新執行整個指令碼,系統則會將 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 程式庫
如要執行程式碼片段,請按照下列步驟操作:
- 在「Snippets」 窗格中開啟檔案,然後按一下底部動作列中的「執行」圖示
。
- 開啟指令選單、刪除
>
字元,輸入!
,然後輸入 「文字片段」,然後按下 Enter 鍵。
詳情請參閱「從任何網頁執行程式碼片段」。
為 JavaScript 偵錯
與其使用 console.log()
來推斷 JavaScript 錯誤,建議您使用
改用 Chrome 開發人員工具偵錯工具。一般而言,我們會先設定中斷點
蓄意停止將程式碼插入程式碼,然後逐步執行程式碼,這一行
讓應用程式從可以最快做出回應的位置
回應使用者要求
逐步執行程式碼時,您可以查看及變更所有目前定義的值 在控制台執行 JavaScript 等等。
請參閱「開始使用 JavaScript 偵錯」,瞭解開發人員工具中的偵錯基本概念。
全心投入程式碼
Chrome 開發人員工具可以過濾架構產生的雜訊,並提供建構網頁應用程式時使用的工具,讓您專心編寫程式碼。
為提供新型網路偵錯服務,開發人員工具會執行以下操作:
此外,如果架構支援,偵錯工具中的「Call Stack」和「Console」中的堆疊追蹤會顯示非同步作業的完整記錄。
詳情請參閱:
設定工作區
根據預設,如果在「來源」面板中編輯檔案,系統會在您重新載入時遺失這些變更 該網頁。工作區可讓您將在開發人員工具中所做的變更儲存至檔案 有些人會將 Cloud Storage 視為檔案系統 但實際上不是基本上,這樣您就能使用開發人員工具做為程式碼編輯器。
如要開始使用,請參閱「使用工作區編輯檔案」。