ClaudeMap

Chrome DevTools MCP

Chrome DevTools 官方 MCP 服务器——给编程 agent 接上性能追踪、网络检查与实时调试。

MCP 服务器officialchromedebuggingbrowsergoogle
访问项目ChromeDevTools/chrome-devtools-mcp

Google Chrome DevTools 团队官方的 MCP 服务器，让 agent 直接操作浏览器调试：性能 trace 分析、网络请求检查、console 消息、截图与 DOM 访问，全部跑在真实 Chrome 实例上。当 Claude Code（或任何 MCP 客户端）需要查明页面为什么慢、为什么坏时，它是事实标准选择——与偏自动化的 Playwright MCP 互补。

它做什么

  • 性能追踪：录制 trace，让 agent 分析 Core Web Vitals、瓶颈与优化建议
  • 网络检查：任意页面交互的请求/响应头、响应体与耗时
  • Console + DOM：读取 console 消息、执行脚本、截图、模拟设备
  • 经 Puppeteer 驱动真实 Chrome 实例，以 stdio MCP 工具暴露

什么时候用

当 agent 写出的页面慢、报 console 错误、或在不同设备上行为不一致——把 Chrome DevTools 交给 agent，而不是对着代码猜。与 Playwright MCP 配套：Playwright 负责驱动流程，Chrome DevTools 负责解释发生了什么。

如何上手

claude mcp add chrome-devtools -- npx chrome-devtools-mcp@latest

需要本机安装 Chrome；server 会启动并驱动本地实例。工具示例：performance_start_trace、network_request_from_url、take_screenshot。

注意事项

定位是调试而非自动化框架——多步流程与表单填写请用 Playwright MCP。它驱动的是真实浏览器实例，别把它指到你不希望被操作的账号上。

代码仓库

ChromeDevTools/chrome-devtools-mcp

收录日期

地图上的相关资源

  • Exa MCP

    MCP 服务器

    Exa 官方 MCP 服务器——把实时网页搜索、抓取与深度研究接进 Claude。

    • official
    • search
    • web
    • mcp
    查看

  • Vercel MCP Handler

    MCP 服务器

    Vercel 官方 handler——在 Next.js、Nuxt、Svelte 等框架里快速起一个 MCP server。

    • deploy
    • vercel
    • serverless
    • edge
    查看

  • GitMCP

    MCP 服务器

    把任意 GitHub 项目转成 MCP 文档中心，无需服务端安装。

    • github
    • docs
    • per-project
    • no-install
    查看