Chrome Devtools MCP
C

Chrome Devtools MCP

Chrome DevTools MCP是一個模型上下文協議服務器,通過MCP集成Chrome開發者工具協議,允許用戶通過連接Chrome開發者工具來調試Web應用程序。
2.5分
0

什麼是Chrome DevTools MCP?

這是一個讓AI助手Claude能夠直接連接Chrome瀏覽器調試工具的橋樑。通過這個工具,你可以像專業開發者一樣調試網頁應用,但完全不需要編寫代碼或理解複雜的技術概念。

如何使用Chrome DevTools MCP?

只需安裝擴展,然後告訴Claude你要調試的網頁地址。Claude會自動啟動Chrome並連接到你的應用,讓你可以通過自然對話來查看網絡請求、分析錯誤和檢查頁面性能。

適用場景

適合網頁開發者、產品經理、測試人員或任何需要了解網頁應用運行狀況的用戶。特別適用於調試API調用問題、JavaScript錯誤、頁面性能分析和用戶登錄狀態檢查。

主要功能

網絡請求監控
即時查看網頁發出的所有API請求,包括成功和失敗的調用,幫助快速定位接口問題
控制檯錯誤分析
自動收集和分類JavaScript錯誤與警告,提供清晰的錯誤摘要和解決方案建議
頁面性能分析
檢查頁面加載時間、資源大小和內存使用情況,識別性能瓶頸
即時監控
在用戶與網頁交互時即時監控控制檯輸出,捕捉偶發性錯誤
JavaScript執行
在瀏覽器中運行JavaScript代碼,檢查變量狀態和測試功能
存儲數據檢查
查看Cookies、本地存儲等瀏覽器存儲數據,調試登錄狀態問題
優勢
無需技術背景:通過自然語言對話即可完成專業調試任務
一鍵安裝:提供預打包擴展,點擊即可安裝使用
即時交互:在調試過程中可以隨時與Claude對話獲取幫助
全面覆蓋:支持網絡、控制檯、性能、存儲等所有主要調試功能
安全可靠:僅在本地運行,不涉及外部服務器或數據上傳
侷限性
僅支持Chrome瀏覽器:需要安裝Google Chrome瀏覽器
本地調試:只能調試本地運行或可訪問的網頁應用
需要Claude Desktop:必須在Claude Desktop環境中使用
網絡要求:調試的網頁必須與調試工具在同一網絡環境下

如何使用

安裝擴展
在Claude Desktop中安裝Chrome DevTools MCP擴展,或通過命令行工具進行安裝
啟動你的網頁應用
確保你的網頁應用正在運行(如通過npm run dev啟動React應用)
連接調試
在Claude對話中輸入命令連接到你應用的URL地址
開始調試
使用各種調試命令查看網絡請求、分析錯誤或檢查性能

使用案例

調試API調用失敗
當網頁應用中的API調用返回錯誤時,快速定位問題原因
分析JavaScript錯誤
網頁出現白屏或功能異常時,檢查JavaScript錯誤信息
性能優化分析
網頁加載緩慢時,分析性能瓶頸和優化建議
登錄狀態調試
用戶登錄狀態異常時,檢查Cookies和存儲數據

常見問題

我需要是開發者才能使用這個工具嗎?
這個工具安全嗎?會不會洩露我的數據?
支持哪些瀏覽器?
我可以調試生產環境的網站嗎?
安裝後為什麼在Claude中看不到調試工具?

相關資源

GitHub項目地址
項目的源代碼和最新版本下載
擴展下載頁面
預打包的Claude Desktop擴展文件下載
Chrome瀏覽器下載
Google Chrome瀏覽器官方下載頁面
Claude Desktop下載
Claude Desktop客戶端下載頁面

安裝

複製以下命令到你的Client進行配置
{
  "mcpServers": {
    "chrome-devtools": {
      "command": "python",
      "args": ["/absolute/path/to/chrome-devtools-mcp/server.py"],
      "env": {
        "CHROME_DEBUG_PORT": "9222"
      }
    }
  }
}

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "python3",
      "args": ["/absolute/path/to/chrome-devtools-mcp/server.py"],
      "env": {
        "CHROME_DEBUG_PORT": "9222"
      }
    }
  }
}
注意:您的密鑰屬於敏感信息,請勿與任何人分享。

替代品

R
Rsdoctor
Rsdoctor 是一款專為 Rspack 生態系統打造的構建分析工具,全面兼容 webpack,提供可視化構建分析、多維度性能診斷及智能優化建議,幫助開發者提升構建效率與工程質量。
TypeScript
8.8K
5分
N
Next Devtools MCP
Next.js開發工具MCP服務器,為Claude、Cursor等AI編程助手提供Next.js開發工具和實用程序,包括運行時診斷、開發自動化和文檔訪問功能。
TypeScript
10.1K
5分
T
Testkube
Testkube是一個面向雲原生應用的測試編排與執行框架,提供統一平臺來定義、運行和分析測試,支持現有測試工具和Kubernetes基礎設施。
Go
6.1K
5分
M
MCP Windbg
一個MCP服務器,將AI模型與WinDbg/CDB集成,用於分析Windows崩潰轉儲文件和進行遠程調試,支持自然語言交互執行調試命令。
Python
9.4K
5分
R
Runno
Runno是一個JavaScript工具包集合,用於在瀏覽器和Node.js等環境中安全地運行多種編程語言的代碼,通過WebAssembly和WASI實現沙盒化執行,支持Python、Ruby、JavaScript、SQLite、C/C++等語言,並提供Web組件、MCP服務器等集成方式。
TypeScript
9.1K
5分
N
Netdata
Netdata是一個開源即時基礎設施監控平臺,提供每秒級指標收集、可視化、機器學習驅動的異常檢測和自動化告警,無需複雜配置即可實現全棧監控。
Go
9.9K
5分
M
MCP Server
Mapbox MCP服務器是一個Node.js實現的模型上下文協議服務器,為AI應用提供Mapbox地理空間API的訪問能力,包括地理編碼、興趣點搜索、路線規劃、等時線分析和靜態地圖生成等功能。
TypeScript
8.7K
4分
U
Uniprof
uniprof是一個簡化CPU性能分析的工具,支持多種編程語言和運行時,無需修改代碼或添加依賴,可通過Docker容器或主機模式進行一鍵式性能剖析和熱點分析。
TypeScript
8.8K
4.5分
M
Markdownify MCP
Markdownify是一個多功能文件轉換服務,支持將PDF、圖片、音頻等多種格式及網頁內容轉換為Markdown格式。
TypeScript
30.2K
5分
B
Baidu Map
已認證
百度地圖MCP Server是國內首個兼容MCP協議的地圖服務,提供地理編碼、路線規劃等10個標準化API接口,支持Python和Typescript快速接入,賦能智能體實現地圖相關功能。
Python
36.9K
4.5分
F
Firecrawl MCP Server
Firecrawl MCP Server是一個集成Firecrawl網頁抓取能力的模型上下文協議服務器,提供豐富的網頁抓取、搜索和內容提取功能。
TypeScript
113.0K
5分
S
Sequential Thinking MCP Server
一個基於MCP協議的結構化思維服務器,通過定義思考階段幫助分解複雜問題並生成總結
Python
29.9K
4.5分
M
Magic MCP
Magic Component Platform (MCP) 是一個AI驅動的UI組件生成工具,通過自然語言描述幫助開發者快速創建現代化UI組件,支持多種IDE集成。
JavaScript
18.9K
5分
N
Notion Api MCP
已認證
一個基於Python的MCP服務器,通過Notion API提供高級待辦事項管理和內容組織功能,實現AI模型與Notion的無縫集成。
Python
17.8K
4.5分
E
Edgeone Pages MCP Server
EdgeOne Pages MCP是一個通過MCP協議快速部署HTML內容到EdgeOne Pages並獲取公開URL的服務
TypeScript
22.5K
4.8分
C
Context7
Context7 MCP是一個為AI編程助手提供即時、版本特定文檔和代碼示例的服務,通過Model Context Protocol直接集成到提示中,解決LLM使用過時信息的問題。
TypeScript
75.3K
4.7分
AIBase
智啟未來,您的人工智慧解決方案智庫
© 2026AIBase