该技能是一个 Chrome DevTools MCP Skill，用于通过 Chrome DevTools Protocol 完成浏览器自动化与调试，适用于 Web 开发、测试和调试。主要能力分为几类：导航与自动化（页面导航、标签页管理、等待条件）；页面交互（点击、输入、拖拽、填表、上传文件）；调试与检查（查看控制台日志、网络请求、执行脚本）；性能分析（录制 trace 并获取洞察）；模拟（设备、网络条件、视口）；视觉测试（截图与 DOM 快照）。
工具分类概览：输入自动化 8 个（click、drag、fill、fill_form、handle_dialog、hover、press_key、upload_file）；导航 6 个（navigate_page、new_page、close_page、list_pages、select_page、wait_for）；模拟 2 个（emulate、resize_page）；性能 3 个（performance_start_trace、performance_stop_trace、performance_analyze_insight）；网络 2 个（list_network_requests、get_network_request）；调试 5 个（evaluate_script、take_screenshot、take_snapshot、list_console_messages、get_console_message）。
常见工作流包括：Web 测试（navigate_page → click/fill/press_key → take_screenshot 或 list_console_messages → list_network_requests）；性能分析（performance_start_trace → 导航或交互 → performance_stop_trace → performance_analyze_insight）；调试（导航 → list_console_messages → list_network_requests → evaluate_script → 截图）；表单测试（导航 → fill 或 fill_form → upload_file → 提交并验证）。
关键要求：使用任何 Chrome DevTools 工具前，必须先用 Read 工具加载相关参考文件——导航任务先读 references/NAVIGATION.md，交互任务读 INTERACTION.md，调试读 DEBUGGING.md，性能读 PERFORMANCE.md，模拟读 EMULATION.md，视觉测试读 VISUAL.md，否则不要使用工具。
配置需在 Claude Code 的 MCP 设置中声明 chrome-devtools 服务器：command 为 npx，args 为 ["chrome-devtools-mcp@latest"]，可选标志有 --headless false、--categoryEmulation、--categoryPerformance、--categoryNetwork。最佳实践包括：用 wait_for 确保页面就绪、检查控制台与网络错误、截图确认、按逻辑串联操作、完成后关闭页面、使用可靠的选择器。