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

指令和快速鍵

快速完成工作。
說明如何開啟指令選單、執行指令、開啟檔案、查看其他動作等。
Chrome 開發人員工具的鍵盤快速鍵標準說明文件。
查看網頁在 JavaScript 停用時的外觀和行為。
在 Chrome 的裝置模式中使用虛擬裝置,建立行動版優先的網站。
使用「搜尋」分頁在所有載入的資源中尋找文字。

面板

探索每個開發人員工具面板的功能。
瞭解如何使用 Chrome 開發人員工具查看及變更網頁的 DOM。
瞭解如何使用 Chrome 開發人員工具查看及變更網頁的 CSS。
記錄訊息並執行 JavaScript。
查看及編輯檔案、建立程式碼片段、對 JavaScript 進行偵錯,以及設定工作區。
記錄網路要求。
使用開發人員工具評估網站效能。
找出影響頁面效能的記憶體問題,包括記憶體流失、記憶體消耗量和頻繁的垃圾收集。
檢查、修改及偵錯網頁應用程式、測試快取,以及查看儲存空間。
記錄、重播、評估使用者流程,以及編輯步驟。
探索一系列會影響網路內容轉譯的選項。
找出網站問題並加以修正。
透過「安全性」面板確保網頁受到 HTTPS 完整保護。
在 JavaScript 中檢查 ArrayBuffer、TypedArray 或 DataView,以及 WebAssembly 和 C++ Wasm 應用程式的記憶體。
覆寫使用者代理程式字串。停用「自動選取」功能,然後從清單中選取或輸入自訂字串。
使用媒體面板,即可查看每個瀏覽器分頁的媒體播放器資訊,並進行偵錯。
透過「Animations」分頁檢查及修改動畫。
追蹤 HTML、CSS 和 JavaScript 的變更。
在 Chrome 開發人員工具中尋找並分析未使用的 JavaScript 和 CSS 程式碼。
使用「開發人員資源導覽匣」分頁,檢查來源地圖是否成功載入,並手動載入。
利用 CSS 總覽面板找出 CSS 可能的改善項目。
利用 Lighthouse 面板改善網站速度。
透過「效能深入分析」面板取得可做為行動依據的洞察資料,瞭解網站成效。
模擬裝置感應器。
模擬驗證器。