Chrome DevTools MCP：将Chrome浏览器开发者工具接入AI编程助手-壹联网络

Chrome DevTools MCP是由Chrome官方开发团队推出的MCP（Model Context Protocol）服务器，让AI编程助手能够直接操控Chrome浏览器进行自动化操作和网页调试，堪称AI Agent的浏览器控制利器。

项目简介

Chrome DevTools MCP是Chrome DevTools团队为AI时代打造的浏览器自动化解决方案。它通过MCP协议将Chrome DevTools的能力暴露给AI Agent使用，使得AI可以像人类开发者一样打开网页、截图、检查元素、执行JavaScript、监听网络请求等。

核心功能

Puppeteer驱动的浏览器控制：基于Puppeteer引擎，提供完整的浏览器操控能力，支持页面导航、表单填写、点击交互等操作。

网络请求监控：AI可以实时监听和检查浏览器的所有网络请求与响应，便于调试API调用和数据流向。

控制台日志访问：读取浏览器控制台输出，获取JavaScript执行日志、错误信息等调试数据。

页面性能分析：支持获取页面性能指标，帮助AI理解网页加载性能表现。

截图与DOM查询：AI可以随时对页面进行截图，或者查询/修改DOM元素。

无头模式支持：支持无头浏览器模式，适合服务器端自动化任务执行。

安装步骤

前置要求：Node.js 18+

通过npm全局安装：

npm install -g chrome-devtools-mcp

或者在项目中安装：

npm install chrome-devtools-mcp

配置MCP客户端（如Claude Desktop、Cursor等）：

在MCP配置文件中添加：

{
“mcpServers”: {
“chrome-devtools”: {
“command”: “npx”,
“args”: [“chrome-devtools-mcp”]
}
}
}

使用方法

在支持MCP的AI编辑器中使用，通过对话让AI操控浏览器：

「打开https://github.com，给我截个图」
「填写这个搜索框并提交」
「监听这个页面的所有API请求」
「获取页面上所有图片元素的src属性」
「执行一段JavaScript代码获取页面数据」

适用场景

网页自动化测试：AI可以驱动浏览器执行复杂的前端测试流程。

数据采集场景：自动化采集需要登录或有JavaScript渲染的网页内容。

AI Agent网页操作：让AI Agent能够像人一样操作网页浏览器。

前端调试辅助：AI辅助分析和调试网页问题，查看网络请求和控制台输出。

开源协议

采用Apache License 2.0开源协议。

总结

Chrome DevTools MCP是AI与浏览器自动化的完美结合，它让AI真正拥有了「浏览网页」和「操控浏览器」的能力。相比传统的Selenium等自动化工具，MCP协议提供了更标准化的接口，特别适合需要AI Agent进行网页操作的各类应用场景。对于需要构建网页自动化或AI编程助手的开发者来说，这是一个不可多得的强大工具。

服务支持：如有兴趣不会搭建，可以联系微信：WRYD6166，开源项目搭建10-50元。

文章版权归作者所有，未经允许请勿转载。

THE END