Visual Debugger 是一款使用 Playwright MCP 浏览器自动化进行交互式可视化调试的工具，主要用于检查、测试和调试 Web 应用与网站。
用途
该技能适用于需要对网站或应用进行可视化检查、测试 UI 元素、验证按钮等交互行为的场景。
主要能力
- 元素检查：检查 UI 元素的可见性、渲染和定位。
- 交互测试：点击按钮、填写表单、测试用户流程。
- 响应式设计验证：跨视口尺寸进行测试。
- 控制台监控：捕获 JavaScript 错误和警告。
- 认证支持：处理登录流程和已认证会话。
使用前提
使用前需确认 Playwright MCP 工具可用，例如检查 mcp__playwright__browser_navigate 工具是否可用。若不可用，需要启用 Playwright MCP 服务器；工具会提示用户运行 /plugins 并启用 'playwright'，在插件启用前应停止执行。若可用，则继续测试。
使用方式
- 初始化浏览器会话：先与用户确认目标和方法，说明将要执行的导航、动作、验证内容和截图/日志捕获，并询问是否继续。
- 导航与设置：使用 mcp__playwright__browser_navigate 访问目标页面，必要时使用 mcp__playwright__browser_wait_for 等待关键元素。对于需要认证的页面，先处理登录：导航到登录页，使用 browser_type 或 browser_fill_form 填写凭据，使用 browser_click 点击提交，等待重定向或进入仪表盘。
- 可视化检查与测试：使用 browser_take_screenshot 截图验证渲染，使用 browser_snapshot 检查元素状态；通过 browser_click 点击按钮、browser_type 填写表单字段、browser_select_option 选择下拉选项；使用 browser_resize 调整视口尺寸（如移动端 375x667、平板 768x1024、桌面 1920x1080）并配合全页截图进行响应式测试。
- 控制台监控：使用 browser_console_messages 获取控制台消息，分析错误、警告和相关日志，并按严重程度报告。
- 报告发现：输出结构化报告，包含执行的动作、发现（正常工作的项、发现的问题及严重程度和截图引用、控制台错误）、截图和可执行的后续建议。
常见调试模式
- 按钮功能测试：导航、定位按钮、截图记录点击前状态、点击、监控控制台错误、截图记录点击后结果、验证预期行为。
- 表单校验测试：导航到表单页、截图初始状态、填写有效和无效数据、提交、捕获校验消息、检查控制台错误、验证表单行为。
- 响应式布局测试：对移动端/平板/桌面等每个视口调整浏览器尺寸、全页截图、检查元素定位、记录布局问题、跨视口比较。
- 页面加载验证：导航到 URL、监控加载期间控制台、等待关键元素、稳定后截图、报告加载时间和错误、验证关键元素已渲染。
认证模式与安全注意
基础登录流程使用 browser_navigate 导航到登录页、browser_type 填写邮箱和密码、browser_click 提交、browser_wait_for 等待重定向。安全提示：切勿硬编码真实凭据，应向用户索要测试凭据或使用环境变量。
Playwright MCP 工具参考
- 导航：browser_navigate、browser_navigate_back、browser_navigate_forward
- 交互：browser_click、browser_type、browser_fill_form、browser_select_option、browser_hover、browser_drag、browser_press_key
- 检查：browser_take_screenshot、browser_snapshot、browser_console_messages、browser_evaluate
- 等待：browser_wait_for
- 视口：browser_resize
- 标签页：browser_tab_list、browser_tab_new、browser_tab_select、browser_tab_close
- 浏览器：browser_install、browser_close
最佳实践
应始终在开始前与用户确认方法、用截图作为证据、监控控制台错误、按严重程度清晰报告发现并提供可执行建议。不应在未确认时进行破坏性更改、未经许可在生产环境测试、硬编码真实用户凭据、忽略控制台错误或跳过截图证据。渐进式测试建议：从简单开始（页面能否加载）、增加复杂度（元素能否找到）、测试交互（按钮是否工作）、验证行为（输出是否正确）、检查边界情况（响应式、错误）。
故障排除
- 元素未找到：截图确认页面状态、检查选择器语法、等待动态内容加载、通过 DOM 快照检查实际选择器。
- 点击无效：确认元素可见且启用、检查是否存在覆盖元素、等待动画完成、尝试先悬停再点击。
- 超时错误：为慢页面增加等待超时、检查阻塞资源的网络请求、确认元素选择器正确、考虑页面加载与元素出现的区别。
参考文件
- references/playwright-patterns.md：高级 Playwright 使用模式
- references/common-issues.md：常见视觉缺陷和诊断方法
限制
该工具依赖 Playwright MCP 工具的可用性，若未启用则无法执行。资料中未提供关于收费、价格、平台支持范围或具体性能指标的更多信息。