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