用 chrome-devtools-mcp 讓 AI 接管瀏覽器5 分鐘從配置到跑通性能報告【免費下載鏈接】chrome-devtools-mcpChrome DevTools for coding agents項目地址: https://gitcode.com/GitHub_Trending/chr/chrome-devtools-mcp你寫代碼時用的 AI 編程助手Claude、Cursor 或 Copilot通常只看得到代碼看不到頁面。chrome-devtools-mcp 是一個 MCP 服務(wù)器它讓 AI 真正打開 Chrome、操作頁面、查網(wǎng)絡(luò)請求、采集性能數(shù)據(jù)省掉你手動開 DevTools 的重復勞動。先解決一個問題AI 看不到頁面你可能遇到過這些情況AI 給你寫好了頁面但渲染出來什么樣還得你自己刷新瀏覽器確認某個網(wǎng)絡(luò)請求一直報錯手動開 DevTools 復制響應(yīng)內(nèi)容太機械頁面卡慢不錄 trace 根本說不清卡在哪個環(huán)節(jié)。這些問題有個共同點AI 缺一個能看、能摸的真實瀏覽器。5 分鐘跑通環(huán)境要求很簡單Node.js LTS、穩(wěn)定版 Chrome、npm。第一步把下面這段配置貼進你的 MCP 客戶端設(shè)置里。{ mcpServers: { chrome-devtools: { command: npx, args: [-y, chrome-devtools-mcplatest] } } }第二步重新加載客戶端發(fā)送提示詞Check the performance of https://developers.chrome.com?？蛻舳藭詣訂?Chrome 并錄下性能追蹤看到報告就說明配置生效了。這段配置是通用的Gemini CLI、Claude Code、Cursor、Copilot、VS Code、Windsurf 等 10 客戶端都適用各客戶端的具體入口寫法見 README 里的配置說明。它能幫你干三類事讓 AI 自己操作頁面它會先拍頁面快照再用click、fill、fill_form點按鈕、填表單用navigate_page換頁面wait_for等結(jié)果落地。復雜的多字段表單一句話對話就能跑完。采集并分析性能數(shù)據(jù)performance_start_trace錄一段追蹤performance_analyze_insight再從中提取結(jié)論。它給你的不是一堆 JSON而是LCP 花了 3.2 秒瓶頸在 XX這類可以直接動手改的建議。遠程診斷與調(diào)試list_network_requests列請求、take_screenshot截圖、控制臺日志直接讀還能抓堆快照排查內(nèi)存泄漏。出問題的現(xiàn)場你不用自己截圖標注交給它看。完整工具清單在 工具參考。按需調(diào)優(yōu)默認情況下服務(wù)器會自動拉起一個獨立的 Chrome 實例。需要時再加參數(shù)如果你希望復用已經(jīng)打開的 Chrome可以加--browserUrl指向調(diào)試地址如果不想彈窗口加--headless跑無頭模式只想要導航、執(zhí)行腳本、截圖這三個基礎(chǔ)工具加--slim即可如果不想上報使用統(tǒng)計加--no-usage-statistics。用之前先看這里?? 隱私瀏覽器實例里的內(nèi)容會原樣暴露給 MCP 客戶端。別讓那個瀏覽器里留著登錄態(tài)、賬號、個人隱私。?? 遠程調(diào)試端口打開期間別用它訪問敏感網(wǎng)站且它官方只支持 Google Chrome 和 Chrome for Testing 的穩(wěn)定版。?? 連不上的話先在終端跑npx chrome-devtools-mcplatest --help確認服務(wù)本身能啟動更多常見報錯和日志收集方法見 故障排查指南。這個項目的核心就一件事給 AI 一個能用的 Chrome把那些本該你手動做的瀏覽器工作交給它。打開你的 MCP 客戶端配置把上面那段配置貼進去發(fā)第一個 prompt 試試?！久赓M下載鏈接】chrome-devtools-mcpChrome DevTools for coding agents項目地址: https://gitcode.com/GitHub_Trending/chr/chrome-devtools-mcp創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考