chrome-devtools

用途：在前端开发过程中对实时网页进行可视化检查、控制台调试、性能分析与网络监控，可用于调试 React 应用、优化页面加载速度、验证 API 集成、检查响应式设计或核对前端改动。基于官方 Chrome DevTools Protocol 的 chrome-devtools-mcp 服务器，默认以无头模式启动 Chrome，激活技能后无需额外配置即可使用 26 个 MCP 工具，涵盖导航与标签页管理、输入自动化（点击、按键、填表、拖拽、上传、悬停）、性能（录制与解析轨迹，读取 LCP、FCP、TTI、TBT）、网络请求检查、调试（截图、无障碍快照、控制台消息、页面内执行 JavaScript）以及设备与视口模拟。工具统一以 mcp__plugin_chromedev-tools_cdt__ 为前缀，例如 navigate_page、take_screenshot、list_console_messages、take_snapshot、list_network_requests、evaluate_script。插件提供四个命令：/chromedev:inspect <url> 执行完整检查流程，/chromedev:screenshot <url> 截取整页截图，/chromedev:performance <url> 做性能分析并给出优化建议，/chromedev:console <url> 检查控制台错误与警告。用法上应提供带协议的完整 URL（如 http://localhost:3000），导航后按页面复杂度等待 1 至 10 秒；控制台消息可按 error、warning、info、debug 过滤，网络请求可用 includeStatic: false 排除静态资源；截图可通过 fullPage: true 捕获整页。性能轨迹建议按场景录制 5 至 30 秒。限制与注意：需本机安装 Chrome 并位于 PATH，MCP 服务器需要 Node.js v20.19 以上；命令超时需确认目标 URL 可访问、增加等待时间或先确认本地服务已启动；截图不保存需检查目录写权限、文件名与磁盘空间；控制台或网络为空时可延长等待或改用 includeStatic: true。其余平台与收费信息官方资料暂未提供。