AI导哈

Chrome开发者工具协议扩展服务

一个扩展Chrome开发者工具协议功能的服务器，提供Fetch、Emulation、Accessibility、Performance和CSS等5个强大领域的工具，用于HTTP请求拦截、设备模拟、无障碍访问检查、性能分析和CSS调试。

  • by MahyarNemati
  • TypeScript
  • 本地部署
  • 更新于
在 GitHub 查看 MahyarNemati/cdp-extended-mcp

使用说明

cdp扩展mcp

一个MCP（模型上下文协议）服务器，它公开 5个强大的Chrome DevTools协议域 现有工具中缺少的：

  1. 获取 --拦截和修改飞行中的HTTP请求（模拟API、块跟踪、注入标头）
  2. 仿真 --设备模拟（iPhone/Pixel/iPad预设、地理位置、时区、黑暗模式、视力缺陷）
  3. 无障碍 --A11y树检查和自动审计（缺少标签、替代文本、ARIA合规性）
  4. 演出 --运行时指标、CPU性能分析、堆快照、核心Web重要信息
  5. 层叠样式表 --计算样式、匹配规则、字体检查、覆盖率跟踪、实时修改

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"]
    }
  }
}

用法

  1. 在启用调试的情况下启动Chrome：

    /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222

  2. 使用 discover_targets 查找可用页面

  3. 使用 connect_cdp 使用WebSocket URL

  4. 使用38种工具中的任何一种！

与cdp工具配合使用效果很好

此服务器旨在 补充 现有 cdp工具 MCP服务器。使用cdp工具进行导航、单击、截图和断点。使用cdp扩展的5个领域cdp工具没有涵盖。

用例

  • API模拟：拦截获取请求并返回模拟数据——不需要后端
  • 移动测试：使用一个命令模拟任何设备
  • A11y审计：自动查找缺失的标签、alt文本和ARIA问题
  • 性能分析：获取核心Web重要信息、CPU热点和内存泄漏
  • CSS调试：查看适用的规则，查找未使用的CSS，检查字体渲染
  • i18n测试：在不更改系统的情况下切换时区、区域设置和语言
  • 视觉可达性：测试您的网站在色盲情况下的外观

许可证

麻省理工学院

相关 MCP