DevTools
Chrome 開發人員工具是直接內建於 Google Chrome 瀏覽器的網頁開發人員工具，開發人員工具可協助您即時編輯網頁並診斷問題，協助您更快打造出更優質的網站。
指令和快速鍵
快速完成工作。
在指令選單中執行指令
說明如何開啟指令選單、執行指令、開啟檔案、查看其他動作等。
鍵盤快速鍵
Chrome 開發人員工具的鍵盤快速鍵標準說明文件。
停用 JavaScript
查看網頁在 JavaScript 停用時的外觀和行為。
使用裝置模式模擬行動裝置
在 Chrome 的裝置模式中使用虛擬裝置，建立行動版優先的網站。
搜尋已載入的資源
使用「搜尋」分頁在所有載入的資源中尋找文字。
面板
探索每個開發人員工具面板的功能。
元素 - DOM
瞭解如何使用 Chrome 開發人員工具查看及變更網頁的 DOM。
元素 - CSS
瞭解如何使用 Chrome 開發人員工具查看及變更網頁的 CSS。
控制台
記錄訊息並執行 JavaScript。
來源
查看及編輯檔案、建立程式碼片段、對 JavaScript 進行偵錯，以及設定工作區。
網路
記錄網路要求。
效能
使用開發人員工具評估網站效能。
記憶體
找出影響頁面效能的記憶體問題，包括記憶體流失、記憶體消耗量和頻繁的垃圾收集。
應用程式
檢查、修改及偵錯網頁應用程式、測試快取，以及查看儲存空間。
錄音工具
記錄、重播、評估使用者流程，以及編輯步驟。
算繪
探索一系列會影響網路內容轉譯的選項。
問題
找出網站問題並加以修正。
安全性
透過「安全性」面板確保網頁受到 HTTPS 完整保護。
記憶體檢查器
在 JavaScript 中檢查 ArrayBuffer、TypedArray 或 DataView，以及 WebAssembly 和 C++ Wasm 應用程式的記憶體。
網路狀況
覆寫使用者代理程式字串。停用「自動選取」功能，然後從清單中選取或輸入自訂字串。
媒體
使用媒體面板，即可查看每個瀏覽器分頁的媒體播放器資訊，並進行偵錯。
動畫
透過「Animations」分頁檢查及修改動畫。
異動
追蹤 HTML、CSS 和 JavaScript 的變更。
涵蓋範圍
在 Chrome 開發人員工具中尋找並分析未使用的 JavaScript 和 CSS 程式碼。
開發人員資源
使用「開發人員資源導覽匣」分頁，檢查來源地圖是否成功載入，並手動載入。
CSS 總覽
利用 CSS 總覽面板找出 CSS 可能的改善項目。
燈塔
利用 Lighthouse 面板改善網站速度。
效能深入分析資訊
透過「效能深入分析」面板取得可做為行動依據的洞察資料，瞭解網站成效。
感應器
模擬裝置感應器。
WebAuthn
模擬驗證器。