Chrome 開發人員工具是直接內建在 Google Chrome 瀏覽器中的網頁開發人員工具。開發人員工具可讓您即時編輯網頁並快速診斷問題，更快打造出更優質的網站。
開始使用 瞭解最新功能
DevTools 支援多種常見的網路開發工作。請直接前往本頁，探索開發人員工具的一些重要功能。不知道該從何處著手，或是第一次使用開發人員工具？觀看開發人員工具簡介影片。
控制台洞察資料和 AI 輔助功能可協助您更有效率地偵錯及修正 JavaScript 錯誤、效能和樣式。
取得網頁成效的完整且可做為行動依據的檢視畫面。
瞭解如何檢查網頁載入的資源，並透過瀏覽器編輯這些資源。
即時分析及覆寫網路要求和回應。

AI 協助功能與控制台深入分析

瞭解開發人員工具中的 AI 創新如何協助您事半功倍。
讓 Gemini 協助您分析及改善網站的樣式、網路、來源和成效。
瞭解 Chrome 開發人員工具中 AI 輔助功能的用途，以及如何在樣式、效能等方面支援您的偵錯工作流程。
瞭解開發人員工具中的主控台訊息和錯誤，並瞭解如何修正這些問題，無須複製貼上。

開發人員工具提示

每月推出的影片系列，說明如何使用開發人員工具解決常見的網頁開發問題。
瞭解如何在 DevTools 中記錄效能追蹤記錄，並分析這些記錄來找出及修正效能問題。
偵錯 LCP 問題並使用 CrUX 資料，瞭解您是否為使用者偵錯類似的體驗
深入瞭解不同類型的瀏覽器快取，以及如何在 Chrome 開發人員工具中檢查及管理快取！
嘗試檢查元素，但它「咻」地消失了嗎？就像程式碼在跟您玩捉迷藏遊戲！

取得成效洞察

多種工具可協助您評估及改善各項執行階段效能：效能面板、Lighthouse 等。
瞭解「效能」面板中的所有功能，包括如何記錄效能追蹤記錄、如何查看及分析追蹤記錄等。
在過去 15 年，成效檢視畫面一直協助開發人員評估及最佳化執行階段效能。瞭解未來的發展方向。
直接在原地標註追蹤記錄，並直接儲存在追蹤記錄檔案中，方便分享。

最新消息與動態

檢查及編輯資源

瞭解「Sources」面板中的所有功能：如何查看及編輯檔案、偵錯 JavaScript 及設定工作區。
開始使用
Workspace 可讓您將在開發人員工具中所做的變更，儲存至儲存在電腦上的原始程式碼。瞭解如何在專案中設定工作區。
閱讀教學課程

分析網路活動

網路面板

瞭解「網路」面板中的所有功能：檢查回應和要求主體、覆寫標頭等。
開始使用
實作教學課程，引導您完成「Network」面板中的常見工作。
閱讀教學課程

更多工具

探索開發人員工具中的所有其他功能。
瞭解如何查看及變更頁面的 DOM。
瞭解如何查看及變更網頁的 CSS。
追蹤 HTML、CSS 和 JavaScript 的變更。
記錄訊息並執行 JavaScript。
評估網站成效。
找出影響網頁效能的記憶體問題，包括記憶體流失等。
檢查、修改及偵錯網頁應用程式、測試快取、查看儲存空間等等。
檢查及修改動畫。
記錄、重播、評估使用者流程，以及編輯步驟。
探索一系列會影響網路內容轉譯的選項。
檢查已儲存的地址並進行偵錯。
找出網站問題並加以修正。
確認網頁已完全受到 HTTPS 保護。
為每個瀏覽器分頁查看資訊和偵錯媒體播放器。
模擬裝置感應器。
模擬驗證器。