用途：在用户明确要求使用 DevTools 技能时，借助 Chrome DevTools MCP 服务器诊断并修复前端问题。它强调先观察实时页面、收集证据（控制台、网络、性能），再提出针对性且最小的代码改动。
快速开始：确认用户希望使用 DevTools（或用户已主动提出）；打开目标页面并获取无障碍快照；结合控制台、网络与快速 DOM 检查进行分诊；选择对应工作流并完整执行；最后总结发现并给出最小且安全的修复方案。
工作流决策：UI/交互类问题（布局、悬停/点击、文本缺失）走 UI/交互工作流；性能卡顿（加载慢、掉帧、TTI 长）走性能工作流；API/网络问题（fetch 失败、数据错误）走网络工作流；运行时错误（崩溃、白屏、堆栈跟踪）走控制台/错误工作流。
核心步骤：分诊始终优先，先捕获状态（list_pages → select_page → take_snapshot），扫描可见错误，检查控制台消息（list_console_messages、get_console_message）与网络请求（list_network_requests、get_network_request），形成假设后进入相应工作流。UI 工作流用 take_snapshot 定位元素、take_screenshot 辅助、evaluate_script 读取 DOM 属性，用 click、hover、press_key 复现问题。性能工作流使用 performance_start_trace（reload=true）复现后 performance_stop_trace，再用 performance_analyze_insight 定位主要问题。网络工作流列出请求、查看失败端点详情与状态/耗时/载荷，交叉检查 CORS 或运行时 fetch 错误。控制台工作流完整阅读错误与堆栈，定位首个失败模块并给出最小改动与安全回滚。
使用与安全限制：需以通俗语言向经验较少的用户解释操作；未经明确确认，避免提交表单或执行破坏性操作；修复保持最小化、可回退，并说明风险。更多细节见 references 下的 mcp-cheatsheet.md、debug-workflows.md、performance.md、network.md、ui-debug.md。具体价格、平台支持等信息资料暂未提供。