Agent Skills
› ChromeDevTools/chrome-devtools-mcp
ChromeDevTools/chrome-devtools-mcp
GitHub基于Chrome DevTools MCP进行Web无障碍调试与审计。涵盖Lighthouse自动化检测、控制台错误分析、语义结构验证及键盘导航测试,确保符合web.dev标准。
Install All Skills
npx skills add ChromeDevTools/chrome-devtools-mcp --all -g -y
Skills in Collection (6)
基于Chrome DevTools MCP进行Web无障碍调试与审计。涵盖Lighthouse自动化检测、控制台错误分析、语义结构验证及键盘导航测试,确保符合web.dev标准。
检查网页无障碍合规性
调试屏幕阅读器兼容性问题
验证键盘导航和焦点状态
npx skills add ChromeDevTools/chrome-devtools-mcp --skill a11y-debugging -g -y
通过CLI自动化浏览器操作,支持页面检查、元素交互及文件上传。
需要自动化执行浏览器点击或输入任务
需要从终端脚本控制Chrome DevTools
npx skills add ChromeDevTools/chrome-devtools-mcp --skill chrome-devtools-cli -g -y
通过 MCP 使用 Chrome DevTools 进行网页调试、故障排查及浏览器自动化。支持页面导航、元素交互、性能分析与网络请求检查,适用于前端开发与测试场景。
调试网页问题
分析页面性能
检查网络请求
自动化浏览器操作
npx skills add ChromeDevTools/chrome-devtools-mcp --skill chrome-devtools -g -y
指导使用 Chrome DevTools MCP 工具调试和优化最大内容绘制(LCP),涵盖性能追踪、洞察分析及瓶颈识别。
用户询问 LCP 性能或页面加载速度问题
需要优化 Core Web Vitals (CWV)
希望提升首屏主要内容的渲染速度
npx skills add ChromeDevTools/chrome-devtools-mcp --skill debug-optimize-lcp -g -y
针对JavaScript/Node.js应用内存泄漏的诊断与修复技能,指导使用Chrome DevTools MCP工具进行堆快照捕获、对比及对象链分析。
用户报告高内存占用或OOM错误
需要捕获、比较或检查堆快照
npx skills add ChromeDevTools/chrome-devtools-mcp --skill memory-leak-debugging -g -y
用于排查 Chrome DevTools MCP 服务器配置及连接问题的诊断向导。通过检查配置文件、识别常见错误(如端口未找到或参数拼写错误)并提供修复步骤,解决页面列表获取失败或服务启动异常等问题。
list_pages, new_page 或 navigate_page 调用失败
Chrome DevTools MCP 服务器初始化或启动失败
npx skills add ChromeDevTools/chrome-devtools-mcp --skill troubleshooting -g -y


