利用Chrome DevTools 对浏览器指定页面进行性能分析

一、Chrome 开发者工具 MCP 介绍

Chrome DevTools MCP（Model Context Protocol）是一个专业的浏览器自动化解决方案，它为 AI 编程助手（如 Gemini、Claude、Cursor 或 Copilot）提供了对实时 Chrome 浏览器的完整控制能力。作为标准化的 MCP 服务器实现，该工具使 AI 编码助手能够深度集成 Chrome DevTools 的全部功能，实现高可靠性的浏览器自动化、深度调试分析和全面的性能监控。

核心功能特性

1. 性能分析与监控

• 利用 Chrome DevTools 的原生性能分析引擎，记录详细的执行轨迹
• 提供可操作的性能洞察和优化建议
• 支持 Core Web Vitals 指标的实时监测和分析

2.高级调试能力

• 全面的网络请求分析，包括请求/响应详情、时序分析
• 高质量屏幕截图捕获，支持全页面和元素级别截图
• 完整的浏览器控制台日志监控和错误追踪

3.智能自动化操作

• 基于 Puppeteer 引擎的可靠浏览器操作自动化
• 智能等待机制，确保操作的准确性和稳定性
• 支持复杂的用户交互场景模拟

二、环境要求

建议使用nvm管理node版本

• node ≥ v22.21.1
• npm ≥ 10.9.4
• cursor=2.0.43
• chrome=141.0.7390.125

三、Cursor 配置

Files->首选项->Cursor Settings -> MCP -> New MCP Server添加下面的提供的配置。

{
   
   
  "mcpServers": {
   
   
    "chrome-devtools": {