cdp扩展mcp
一个MCP（模型上下文协议）服务器，它公开 5个强大的Chrome DevTools协议域 现有工具中缺少的：
- 获取 --拦截和修改飞行中的HTTP请求（模拟API、块跟踪、注入标头）
- 仿真 --设备模拟（iPhone/Pixel/iPad预设、地理位置、时区、黑暗模式、视力缺陷）
- 无障碍 --A11y树检查和自动审计（缺少标签、替代文本、ARIA合规性）
- 演出 --运行时指标、CPU性能分析、堆快照、核心Web重要信息
- 层叠样式表 --计算样式、匹配规则、字体检查、覆盖率跟踪、实时修改
38种可用工具
连接
| 工具 | 说明 |
|---|
connect_cdp | 通过WebSocket URL连接到Chrome |
discover_targets | 列出可用的Chrome调试目标 |
disconnect_cdp | 断开与Chrome的连接 |
Fetch（请求拦截）
| 工具 | 说明 |
|---|
fetch_enable | 使用URL模式启用请求拦截 |
fetch_disable | 禁用拦截 |
fetch_continue | 使用可选修改继续暂停的请求 |
fetch_fulfill | 使用自定义/模拟响应进行响应 |
fetch_fail | 请求失败，出现错误 |
fetch_get_body | 获取被拦截请求的响应正文 |
fetch_list_paused | 列出所有暂停的请求 |
仿真（设备仿真）
| 工具 | 说明 |
|---|
emulate_device | 模拟iPhone、Pixel、iPad、Galaxy、台式机 |
emulate_custom_device | 自定义视口、DPR、移动模式 |
emulate_geolocation | 任何坐标的虚假地理位置 |
emulate_timezone | 覆盖时区 |
emulate_locale | 覆盖i18n测试的区域设置 |
emulate_user_agent | 覆盖用户代理字符串 |
emulate_dark_mode | 切换暗模式 |
emulate_reduced_motion | 切换减少运动 |
emulate_vision_deficiency | 模拟色盲、视力模糊 |
emulate_cpu_throttle | 节流CPU用于低端设备模拟 |
emulate_touch | 切换触摸模拟 |
emulate_clear_all | 重置所有仿真覆盖 |
emulate_list_devices | 列出可用的设备预设 |
无障碍
| 工具 | 说明 |
|---|
a11y_audit | 自动审计（缺少标签、替代文本等） |
a11y_tree | 获取完整的可访问性树 |
a11y_query | 按角色/名称搜索11y树 |
演出
| 工具 | 说明 |
|---|
perf_metrics | 运行时性能指标 |
perf_web_vitals | 带有评级的核心网络重要信息 |
perf_cpu_profile_start | 启动CPU性能分析 |
perf_cpu_profile_stop | 停止分析，获取热点分析 |
perf_heap_snapshot | 获取堆内存快照 |
层叠样式表
| 工具 | 说明 |
|---|
css_computed_style | 获取计算样式（可选过滤） |
css_matched_rules | 获取所有匹配的CSS规则 |
css_background_colors | 背景颜色+字体信息 |
css_force_pseudo | 力：悬停、：聚焦、：活动状态 |
css_fonts | 获取实际渲染字体 |
css_media_queries | 列出所有媒体查询 |
css_coverage_start | 启动CSS覆盖率跟踪 |
css_coverage_stop | 使用与未使用CSS报告 |
css_set_property | 实时修改CSS属性 |
快速开始
安装
npm install -g cdp-extended-mcp
使用Claude代码进行配置
添加到您的克劳德代码设置(~/.claude/settings.json):
{
"mcpServers": {
"cdp-extended": {
"command": "cdp-extended-mcp"
}
}
}
使用Claude Desktop进行配置
添加 ~/Library/Application Support/Claude/claude_desktop_config.json:
{
"mcpServers": {
"cdp-extended": {
"command": "npx",
"args": ["cdp-extended-mcp"]
}
}
}
用法
- 在启用调试的情况下启动Chrome：
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222
- 使用
discover_targets 查找可用页面
- 使用
connect_cdp 使用WebSocket URL
- 使用38种工具中的任何一种！
与cdp工具配合使用效果很好
此服务器旨在 补充 现有 cdp工具 MCP服务器。使用cdp工具进行导航、单击、截图和断点。使用cdp扩展的5个领域cdp工具没有涵盖。
用例
- API模拟：拦截获取请求并返回模拟数据——不需要后端
- 移动测试：使用一个命令模拟任何设备
- A11y审计：自动查找缺失的标签、alt文本和ARIA问题
- 性能分析：获取核心Web重要信息、CPU热点和内存泄漏
- CSS调试：查看适用的规则，查找未使用的CSS，检查字体渲染
- i18n测试：在不更改系统的情况下切换时区、区域设置和语言
- 视觉可达性：测试您的网站在色盲情况下的外观
许可证
麻省理工学院
