【aigc】chrome-devtools-mcp怎么玩？

https://github.com/ChromeDevTools/chrome-devtools-mcp

之前在我的文章中介绍了如何一键安装
https://mp.weixin.qq.com/s/7p658E07ACl1oCrJV2acNw

本文介绍一下，chrome-devtools-mcp有哪些玩法？

打开网页

截图

⏺ chrome-devtools - take_screenshot (MCP)(fullPage: true)

Chrome DevTools MCP 完全使用指南

一、什么是 Chrome DevTools MCP?

Chrome DevTools MCP 是 Google Chrome 官方推出的 Model Context Protocol (MCP) 服务器,它让 AI 编程助手(如 Claude、Cursor、Copilot 等)能够控制和检查实时运行的 Chrome 浏览器。通过这个工具,AI 可以获得 Chrome DevTools 的全部能力,实现可靠的自动化测试、深度调试和性能分析。

核心优势

• 性能洞察:使用 Chrome DevTools 录制性能追踪,提取可操作的性能优化建议
• 高级浏览器调试:分析网络请求、截图、检查浏览器控制台
• 可靠的自动化:基于 Puppeteer 实现 Chrome 自动化操作,自动等待操作结果

二、工作原理

Chrome DevTools MCP 充当 AI 助手和 Chrome 浏览器之间的桥梁。通过这个桥梁,AI 可以自主完成以下操作:

• 打开网页
• 点击按钮和元素
• 读取 DOM/CSS 结构
• 捕获性能指标
• 读取控制台日志
• 分析网络请求
• 截取页面截图
• 等等更多功能

##三、安装配置

3.1 基本安装

Chrome DevTools MCP 已发布到 npm,可以通过以下方式使用:

# 直接使用 npx 运行(推荐) npx chrome-devtools-mcp@latest 

3.2 配置

怎么配置不说了，可以参考the office site

3.3 浏览器启动说明

重要: MCP 服务器会在 MCP 客户端首次使用需要浏览器的工具时自动启动浏览器。仅仅连接到 Chrome DevTools MCP 服务器不会自动启动浏览器。

四、核心功能详解

(本质是tool call能力)
demo1:
│ chrome-devtools - list_pages() (MCP) │
│ Get a