Chrome DevTools MCP入门

git地址 https://github.com/ChromeDevTools/chrome-devtools-mcp

配置mcp服务，这里我用的cline,建议用版本号，不要用@latest，截至2025国庆前是0.4版本

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": ["chrome-devtools-mcp@0.4.0"]
    }
  }
}

提示语

#chrome-devtools 检查 https://www.cnblogs.com/qcy-blog 的 LCP 问题。

结果大概是

Chrome DevTools MCP 共提供 26 个工具，分为六大功能类别。下表对各类别及主要功能进行说明：

类别 主要功能
输入自动化 click、drag、fill、fill_form、handle_dialog、hover、upload_file
导航自动化 close_page、list_pages、navigate_page、navigate_page_history、new_page、select_page、wait_for
性能 performance_analyze_insight、performance_start_trace、performance_stop_trace
调试 evaluate_script、list_console_messages、take_screenshot、take_snapshot
网络 get_network_request、list_network_requests
仿真 emulate_cpu、emulate_network、resize_page