当前位置： 首页 > news >正文

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

news 2025/10/4 5:20:37

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 list of pages open in the browser.
demo2:
⏺ chrome-devtools - navigate_page (MCP)(url: “https://gitee.com”)

demo3:
⏺ chrome-devtools - new_page (MCP)(url: “https://gitee.com”)

demo4:
│ chrome-devtools - list_pages() (MCP) │
│ Get a list of pages open in the browser.

4.1 页面导航与管理

创建新页面
请打开网页 https://github.com/

AI 会使用 new_page 工具创建新的浏览器页面并导航到指定 URL。

页面列表管理
请列出当前打开的所有页面
切换页面
请切换到第 2 个页面
关闭页面
请关闭当前页面

4.2 页面交互

截图
请对当前页面截图

支持的截图选项:

  • 全页面截图
  • 特定元素截图
  • 不同格式(PNG、JPEG、WebP)
  • 自定义质量设置
获取页面快照
请获取当前页面的文本快照

页面快照会列出页面元素及其唯一标识符(uid),用于后续的精确操作。

点击元素
请点击登录按钮

AI 会先获取页面快照,找到对应元素的 uid,然后执行点击操作。

填充表单
请在搜索框中输入"Chrome DevTools"

支持单个表单元素填充和批量表单填充。

悬停操作
请将鼠标悬停在导航菜单上

4.3 性能分析

开始性能追踪
请开始性能追踪并重新加载页面
停止性能追踪
请停止性能追踪并分析结果

性能追踪会提供:

  • Core Web Vitals (LCP、FID、CLS 等)
  • 性能洞察和优化建议
  • 详细的性能指标
分析特定性能洞察
请详细分析 LCP 性能指标

4.4 网络请求分析

列出网络请求
请列出当前页面的所有网络请求

可以按资源类型过滤:

  • document
  • stylesheet
  • image
  • script
  • xhr/fetch
  • 等等
获取特定请求详情
请获取 https://example.com/api/data 的网络请求详情

可以查看:

  • 请求头和响应头
  • 请求体和响应体
  • 状态码
  • 响应时间

4.5 控制台监控

请列出控制台中的所有消息

可以查看:

  • 错误消息
  • 警告信息
  • 日志输出
  • 调试信息

4.6 脚本执行

请执行 JavaScript 获取页面标题

AI 会使用 evaluate_script 工具在页面上下文中执行自定义 JavaScript 代码。

4.7 设备模拟

CPU 节流
请模拟 4 倍 CPU 节流

可设置 1-20 倍的节流率,用于测试低性能设备。

网络节流
请模拟 Fast 3G 网络环境

支持的网络环境:

  • No emulation(无模拟)
  • Slow 3G
  • Fast 3G
  • Slow 4G
  • Fast 4G

五、实战案例

案例 1: 性能测试

请帮我测试 web.dev 网站的 LCP 性能指标

AI 会:

  1. 打开指定网站
  2. 开始性能追踪
  3. 重新加载页面
  4. 停止追踪
  5. 分析 LCP 指标
  6. 提供优化建议

案例 2: 自动化表单填充

请访问登录页面,填写用户名为 "test@example.com",密码为 "password123",然后点击登录按钮

AI 会:

  1. 导航到登录页面
  2. 获取页面快照识别表单元素
  3. 填充用户名和密码字段
  4. 点击登录按钮
  5. 等待页面响应

案例 3: 网络请求调试

请帮我分析当前页面的 API 请求,找出响应时间超过 1 秒的请求

AI 会:

  1. 列出所有网络请求
  2. 过滤 xhr/fetch 类型的请求
  3. 分析响应时间
  4. 列出慢速请求并提供优化建议

案例 4: 响应式设计测试

请在移动设备尺寸(375x667)下测试网站布局

AI 会:

  1. 调整页面窗口大小
  2. 截取页面截图
  3. 检查是否有布局问题

六、主要工具 API 参考

页面管理工具

  • new_page - 创建新页面
  • list_pages - 列出所有页面
  • select_page - 选择页面
  • close_page - 关闭页面
  • navigate_page - 导航到 URL
  • navigate_page_history - 前进/后退
  • resize_page - 调整页面大小

交互工具

  • take_snapshot - 获取页面快照
  • take_screenshot - 截图
  • click - 点击元素
  • fill - 填充输入框
  • fill_form - 批量填充表单
  • hover - 悬停
  • drag - 拖拽
  • upload_file - 上传文件
  • evaluate_script - 执行 JavaScript

性能工具

  • performance_start_trace - 开始性能追踪
  • performance_stop_trace - 停止性能追踪
  • performance_analyze_insight - 分析性能洞察

网络工具

  • list_network_requests - 列出网络请求
  • get_network_request - 获取请求详情

调试工具

  • list_console_messages - 列出控制台消息
  • handle_dialog - 处理浏览器对话框
  • wait_for - 等待特定文本出现

模拟工具

  • emulate_cpu - CPU 节流
  • emulate_network - 网络节流

七、最佳实践

1. 充分利用页面快照

在进行页面交互之前,先使用 take_snapshot 获取页面结构,这样可以更精确地定位元素。

2. 性能测试建议

  • 在性能追踪时建议重新加载页面,以获得完整的加载性能数据
  • 使用 CPU 和网络节流模拟真实用户环境
  • 重复多次测试取平均值

3. 自动化测试要点

  • 使用 wait_for 工具等待特定内容出现,确保页面加载完成
  • 截图保存测试结果作为证据
  • 合理使用页面快照避免重复获取

4. 调试技巧

  • 结合控制台日志和网络请求进行全面调试
  • 使用截图记录问题现场
  • 利用性能追踪定位性能瓶颈

5. 安全注意事项

  • 不要在公共场合或代码中暴露真实的登录凭据
  • 注意敏感信息的截图和日志记录
  • 自动化测试应在测试环境中进行

八、常见问题

Q1: 浏览器没有自动启动?

A: 浏览器只有在使用需要浏览器的工具时才会启动。尝试执行一个具体的操作,如"请打开 https://example.com"。

Q2: 如何查看所有可用的工具?

A: 可以查看官方文档的工具参考页面,或直接询问 AI “你可以使用哪些 Chrome DevTools MCP 工具?”

Q3: 性能追踪需要多长时间?

A: 取决于页面复杂度和网络条件,通常 5-30 秒。可以使用 autoStop 参数自动停止追踪。

Q4: 可以同时操作多个页面吗?

A: 可以。使用 list_pages 查看所有页面,使用 select_page 切换到目标页面,然后进行操作。

Q5: 如何处理弹窗?

A: 使用 handle_dialog 工具接受或关闭浏览器对话框。

九、相关资源

  • 官方 GitHub: https://github.com/ChromeDevTools/chrome-devtools-mcp
  • npm 包: https://www.npmjs.com/package/chrome-devtools-mcp
  • 官方博客: https://developer.chrome.com/blog/chrome-devtools-mcp
  • 工具参考文档: https://github.com/ChromeDevTools/chrome-devtools-mcp/blob/main/docs/tool-reference.md

十、总结

Chrome DevTools MCP 为 AI 编程助手带来了强大的浏览器控制能力,让自动化测试、性能优化、网页调试变得前所未有的简单。通过自然语言与 AI 对话,即可完成复杂的浏览器操作和分析任务。

无论你是前端开发者、测试工程师还是 SEO 专家,Chrome DevTools MCP 都能大幅提升你的工作效率。现在就配置你的 AI 助手,开始体验 AI 驱动的浏览器自动化吧!

关键词: Chrome DevTools MCP, MCP Server, 浏览器自动化, AI 编程助手, Claude, Cursor, 性能测试, Web 自动化

作者: [lineuman+ai]
日期: 2025年10月
版本: v1.0

如有错误，欢迎指正~

http://www.dtcms.com/a/438013.html

相关文章：

  • 从《Life of A Pixel》来看Chrome的渲染机制
  • 【项目实战 Day9】springboot + vue 苍穹外卖系统（用户端订单模块 + 商家端订单管理模块 完结）
  • Mac 安装Neo4j教程
  • blender 解决shift快捷键和中英切换重复的问题
  • 网站动态图怎么做阳明拍卖公司网站
  • 01_Docker 部署 Ollama 模型（支持 NVIDIA GPU）
  • 苏州新区网站制作wordpress视频格式
  • 一位Android用户的科技漫游手记
  • android中调用相册
  • 安卓基础组件031-Retrofit 网络请求框架
  • Redis 黑马点评-商户查询缓存
  • Android geckoview 集成，JS交互，官方demo
  • 【APK安全】Android 权限校验核心风险与防御指南
  • 单调队列与单调栈
  • 设计与优化Java API：构建高效、可维护的接口
  • Locality Sensitive Hashing (LSH) 详解：高效检测语言语句重复的利器
  • 阿里云网站开发零起步如何做设计师
  • 后端开发基础概念MVC以及Entity,DAO,DO,DTO,VO等概念
  • 七大排序算法的基本原理
  • Gateway-过滤器
  • 科普：Python 中，字典的“动态创建键”特性
  • Java 21 或 JavaFX 打包 exe 之 GraalVM Native Image 方案
  • 1.2.3 MCP（Model Context Protocol）
  • dede网站栏目管理网络科技是做什么的
  • 《Gdb 调试实战指南：不同风格于VS下的一种调试模式》
  • lua虚拟机的垃圾回收机制
  • 网站建设需要的材料wordpress自带的404
  • MPAndroidChart 用法解析和性能优化 - Kotlin Java 双版本
  • Qt中使用日志---Log4Qt
  • linux centos 7 解决终端提示符出现-bash-4.2的问题