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

指令和快速鍵

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

面板

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