Chrome 開發人員工具是直接內建在 Google Chrome 瀏覽器中的網頁開發人員工具。開發人員工具可讓您即時編輯網頁並快速診斷問題，更快打造出更優質的網站。
瞭解詳情
各種開啟 Chrome 開發人員工具的方法。
隨時掌握開發人員工具的最新異動。
一系列短片可協助您瞭解開發人員工具中的各項功能。

指令和快速鍵

快速完成工作。
開啟指令選單、執行指令、開啟檔案、查看其他動作，以及執行其他操作。
閱讀說明文件
完整的鍵盤快速鍵參考資料。
閱讀說明文件
查看網頁在 JavaScript 停用時的外觀和行為。
閱讀說明文件
模擬裝置，建構行動優先的網站。
使用「搜尋」面板在所有已載入的資源中尋找文字。

面板

探索每個開發人員工具面板的功能。

元素 - DOM

瞭解如何查看及變更頁面的 DOM。
閱讀說明文件

元素 - CSS

瞭解如何查看及變更網頁的 CSS。
閱讀說明文件
記錄訊息並執行 JavaScript。
閱讀說明文件
查看及編輯檔案、建立程式碼片段、偵錯 JavaScript，以及設定工作區。
閱讀說明文件
記錄網路要求。
閱讀說明文件
評估網站成效。
閱讀說明文件
找出影響網頁效能的記憶體問題，包括記憶體流失等。
閱讀說明文件
檢查、修改及偵錯網頁應用程式、測試快取、查看儲存空間等等。
閱讀說明文件
記錄、重播、評估使用者流程，以及編輯步驟。
閱讀說明文件
探索一系列會影響網路內容轉譯的選項。
閱讀說明文件
檢查已儲存的地址並進行偵錯。
找出網站問題並加以修正。
確認網頁已完全受到 HTTPS 保護。
在 JavaScript 中檢查 ArrayBuffer、TypedArray 或 DataView，以及 WebAssembly 和 C++ Wasm 應用程式的記憶體。
覆寫使用者代理程式字串。
封鎖網路要求，測試網站。
為每個瀏覽器分頁查看資訊和偵錯媒體播放器。
檢查及修改動畫。
追蹤 HTML、CSS 和 JavaScript 的變更。
尋找並分析未使用的 JavaScript 和 CSS 程式碼。
請檢查來源地圖是否成功載入，並手動載入。
找出 CSS 改進空間。
利用 Lighthouse 面板改善網站速度。
取得網站成效的可做為行動依據的洞察資料。
監控負載和執行階段效能。
可在使用其他面板時查看及編輯來源檔案。
模擬裝置感應器。
查看 WebAudio API 指標。
模擬驗證器。

設定參考資料