Chrome DevTools MCP 讓 Agent 檢查繪製後的頁面、讀取主控台、查看請求及錄製效能 trace。從具體症狀追到請求或程式碼。本例在本機重現按鈕載入失敗，只修改請求路徑，再驗證結果。
選擇瀏覽器連線方式
不熟悉的應用程式或練習先使用隔離瀏覽器。官方工具也支援 browserUrl 或 wsEndpoint 連到可偵錯瀏覽器，合適的 Chrome 環境可用 autoConnect。既有工作階段可能曝露登入內容和儲存資料，應限定授權的設定檔與來源。本機實測明確指定 Tabbit Browser Dev 執行檔和隔離設定檔。這是已觀察到的自訂環境，不代表官方支援所有版本。
註冊固定版本並啟動練習
在用戶端註冊本機 stdio MCP。實測為 chrome-devtools-mcp 1.12.0 與下方明確路徑，依你的環境調整。測試停用伺服器使用統計和 CrUX 查詢。將兩個檔案放在同一練習目錄，用 Python 啟動，再請 MCP 開啟終端機印出的迴路網址。
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": [
"-y",
"chrome-devtools-mcp@1.12.0",
"--executablePath",
"/Applications/Tabbit Browser Dev.app/Contents/MacOS/Tabbit Browser Dev",
"--isolated",
"--headless",
"--viewport=1000x565",
"--usageStatistics=false",
"--performanceCrux=false"
]
}
}
}python3 fixture.py --port 8765重現後取得兩種證據
開啟頁面，擷取快照，點一次 Load records。從目前工具回執讀取 pageId 和元素 uid。頁面顯示 Could not load records。list_console_messages 回傳 F02 load failed: HTTP 404，list_network_requests 篩選 fetch 後顯示 GET /api/record [404]，再用 get_network_request 看詳情。另一個 favicon 404 與這次故障無關。
| 步驟 | 工具 | 預期結果 |
|---|---|---|
| 1 | take_snapshot + click | Could not load records |
| 2 | list_console_messages | F02 load failed: HTTP 404 |
| 3 | list_network_requests + get_network_request | GET /api/record [404] |
Chrome DevTools MCP · Tool reference
只改路徑，再驗證相同動作
練習伺服器提供 /api/records，但指令碼寫的是 /api/record。修改 fixture.html 的 fetch 路徑後儲存。重整同頁、取得新快照、再點一次相同控制項。正確請求回傳 200，頁面顯示 Loaded: F02-FIXED，原本的應用程式主控台錯誤未再出現。保存前後回執便於比較。
- const response = await fetch("/api/record");
+ const response = await fetch("/api/records");
效能 trace 用來回答另一個問題
驗證功能後，我們對修好的頁面執行 performance_start_trace，啟用 reload 和 autoStop。單次本機數據為 LCP 386 毫秒、TTFB 2 毫秒、CLS 0.00，無 CPU 或網路限制，也沒有實際使用者資料。這個樣本只驗證 trace 可用。調查效能時應固定工作量與環境並重複採樣。
| 工具 | 預期結果 |
|---|---|
| LCP | 386 ms |
| TTFB | 2 ms |
| CLS | 0.00 |
社群的兩個經驗
一位 r/ClaudeAI 使用者用網路與主控台區分遺失資源和另一個例外。一位 r/mcp 使用者說 MCP 啟動的瀏覽器比平常慢。兩者是不同環境的個案，提醒我們保存請求回執、標明執行模式，並另外量測效能。
可以連到正在執行的瀏覽器嗎？
瀏覽器提供授權的偵錯端點且環境支援時可以連線。若不需要既有工作階段，先用隔離環境。
常見問題
可以連到正在執行的瀏覽器嗎？
瀏覽器提供授權的偵錯端點且環境支援時可以連線。若不需要既有工作階段，先用隔離環境。
Chrome DevTools MCP 能檢查什麼？
Chrome DevTools MCP 讓 Agent 檢查繪製後的頁面、讀取主控台、查看請求及錄製效能 trace。從具體症狀追到請求或程式碼。本例在本機重現按鈕載入失敗，只修改請求路徑，再驗證結果。
如何註冊伺服器？
在用戶端註冊本機 stdio MCP。實測為 chrome-devtools-mcp 1.12.0 與下方明確路徑，依你的環境調整。測試停用伺服器使用統計和 CrUX 查詢。將兩個檔案放在同一練習目錄，用 Python 啟動，再請 MCP 開啟終端機印出的迴路網址。
如何驗證修正？
練習伺服器提供 /api/records，但指令碼寫的是 /api/record。修改 fixture.html 的 fetch 路徑後儲存。重整同頁、取得新快照、再點一次相同控制項。正確請求回傳 200，頁面顯示 Loaded: F02-FIXED，原本的應用程式主控台錯誤未再出現。保存前後回執便於比較。
一次本機 trace 能說明什麼？
驗證功能後，我們對修好的頁面執行 performance_start_trace，啟用 reload 和 autoStop。單次本機數據為 LCP 386 毫秒、TTFB 2 毫秒、CLS 0.00，無 CPU 或網路限制，也沒有實際使用者資料。這個樣本只驗證 trace 可用。調查效能時應固定工作量與環境並重複採樣。