playwright-console-monitor
Compare original and translation side by side
🇺🇸
Original
English🇨🇳
Translation
ChinesePlaywright Console Monitor
Playwright控制台监控
Quick Start
快速开始
Monitor console errors during a login workflow:
1. Navigate to application
2. Execute login steps
3. Check console for errors after each critical operation
4. Generate error report with screenshots
5. Provide debugging contextImmediate value: Catch JavaScript errors during automation that would otherwise go unnoticed.
在登录工作流中监控控制台错误：
1. 导航至应用程序
2. 执行登录步骤
3. 在每个关键操作后检查控制台是否有错误
4. 生成包含截图的错误报告
5. 提供调试上下文直接价值： 捕获自动化过程中原本会被忽略的JavaScript错误。
Table of Contents
目录
- When to Use This Skill
- What This Skill Does
- Console Error Monitoring Workflow 3.1 Setup and Navigation 3.2 Execute with Monitoring 3.3 Error Detection and Categorization 3.4 Report Generation
- Console Message Levels
- Supporting Files
- Expected Outcomes
- Integration Points
- Success Metrics
- Requirements
- Red Flags to Avoid
- Notes
- 何时使用本技能
- 本技能的功能
- 控制台错误监控工作流 3.1 设置与导航 3.2 带监控的执行 3.3 错误检测与分类 3.4 报告生成
- 控制台消息级别
- 支持文件
- 预期结果
- 集成点
- 成功指标
- 要求
- 需避免的问题
- 注意事项
When to Use This Skill
何时使用本技能
Explicit Triggers
显式触发
- User says "check for console errors"
- User says "monitor JavaScript errors during [workflow]"
- User says "validate error-free execution"
- User says "debug this workflow"
- User requests "console monitoring"
- 用户说“检查控制台错误”
- 用户说“在[工作流]期间监控JavaScript错误”
- 用户说“验证无错误执行”
- 用户说“调试这个工作流”
- 用户请求“控制台监控”
Implicit Triggers
隐式触发
- Executing critical browser workflows (checkout, form submission, data operations)
- Testing new features or deployments
- Debugging intermittent failures
- Validating application health
- QA automation scenarios
- 执行关键浏览器工作流（结账、表单提交、数据操作）
- 测试新功能或部署版本
- 调试间歇性故障
- 验证应用程序健康状态
- QA自动化场景
Debugging Context
调试场景
- When workflows fail without obvious cause
- When investigating "works for me" issues
- When validating frontend error handling
- When checking third-party script integration
- 工作流无明显原因失败时
- 调查“在我这里正常”的问题时
- 验证前端错误处理逻辑时
- 检查第三方脚本集成时
What This Skill Does
本技能的功能
This skill wraps browser automation workflows with console monitoring to:
- Proactive Error Detection - Catch JavaScript errors during workflow execution
- Error Categorization - Classify errors by severity (critical/warning/info/debug)
- Context Capture - Take screenshots and snapshots at error states
- Report Generation - Provide structured error reports with debugging context
- Continuous Monitoring - Check console after each critical operation
本技能为浏览器自动化工作流添加控制台监控，实现以下功能：
- 主动错误检测 - 在工作流执行过程中捕获JavaScript错误
- 错误分类 - 按严重程度（严重/警告/信息/调试）对错误进行分类
- 上下文捕获 - 在错误状态下截取屏幕截图和页面快照
- 报告生成 - 提供包含调试上下文的结构化错误报告
- 持续监控 - 在每个关键操作后检查控制台
Console Error Monitoring Workflow
控制台错误监控工作流
3.1 Setup and Navigation
3.1 设置与导航
Step 1: Navigate to application
Use: mcp__playwright__browser_navigate
- Navigate to target URL
- Wait for page loadStep 2: Clear initial console messages (optional)
Use: mcp__playwright__browser_console_messages
- Read and discard initial load messages
- Establishes clean baseline for workflow monitoring步骤1：导航至应用程序
使用: mcp__playwright__browser_navigate
- 导航至目标URL
- 等待页面加载完成步骤2：清除初始控制台消息（可选）
使用: mcp__playwright__browser_console_messages
- 读取并丢弃页面加载时的初始消息
- 为工作流监控建立干净的基准3.2 Execute with Monitoring
3.2 带监控的执行
Step 3: Execute workflow with checkpoints
For each critical operation:
- Execute the action (click, type, navigate)
- Wait for expected state
- Check console messages
- Log any new errors/warnings
Example pattern:
Action: Click "Submit Order" button
→ mcp__playwright__browser_click
Wait: Order confirmation appears
→ mcp__playwright__browser_wait_for
Check: Console errors
→ mcp__playwright__browser_console_messages({ level: "error" })Critical operation checkpoints:
- Form submissions
- Navigation between pages
- AJAX/fetch requests
- Third-party script loads
- Authentication flows
- Payment processing
- Data mutations
步骤3：带检查点的工作流执行
针对每个关键操作：
- 执行操作（点击、输入、导航）
- 等待预期状态
- 检查控制台消息
- 记录所有新的错误/警告
示例模式：
操作: 点击“提交订单”按钮
→ mcp__playwright__browser_click
等待: 订单确认页面出现
→ mcp__playwright__browser_wait_for
检查: 控制台错误
→ mcp__playwright__browser_console_messages({ level: "error" })关键操作检查点：
- 表单提交
- 页面间导航
- AJAX/fetch请求
- 第三方脚本加载
- 认证流程
- 支付处理
- 数据变更
3.3 Error Detection and Categorization
3.3 错误检测与分类
Step 4: Categorize detected errors
Use console message levels to filter:
| Level | Includes | When to Use |
|---|---|---|
| Critical errors only | After critical operations (checkout, submit) |
| Warnings + errors | During form validation, feature usage |
| Info + warnings + errors | General workflow monitoring |
| All messages | Detailed debugging scenarios |
Step 5: Capture error context
For each error detected:
- Take screenshot of current state
mcp__playwright__browser_take_screenshot - Capture page snapshot
mcp__playwright__browser_snapshot - Record error message, timestamp, and operation
步骤4：对检测到的错误进行分类
使用控制台消息级别进行过滤：
| 级别 | 包含内容 | 适用场景 |
|---|---|---|
| 仅严重错误 | 关键操作后（结账、提交） |
| 警告 + 错误 | 表单验证、功能使用期间 |
| 信息 + 警告 + 错误 | 常规工作流监控 |
| 所有消息 | 详细调试场景 |
步骤5：捕获错误上下文
针对每个检测到的错误：
- 截取当前状态的屏幕截图
mcp__playwright__browser_take_screenshot - 捕获页面快照
mcp__playwright__browser_snapshot - 记录错误消息、时间戳和触发操作
3.4 Report Generation
3.4 报告生成
Step 6: Generate structured error report
Report format:
Console Error Report
====================
Workflow: [workflow name]
Executed: [timestamp]
Total Errors: [count]
Critical Errors (level: error):
- [timestamp] [message]
Context: [operation that triggered]
Screenshot: [filename]
Warnings (level: warning):
- [timestamp] [message]
Context: [operation that triggered]
Info Messages:
- [summary if relevant]
Debugging Context:
- URL at time of error
- Page snapshot
- Network state (if available via browser_network_requests)
Recommendations:
- [specific debugging suggestions]步骤6：生成结构化错误报告
报告格式：
控制台错误报告
====================
工作流: [工作流名称]
执行时间: [时间戳]
总错误数: [数量]
严重错误（级别: error）:
- [时间戳] [消息内容]
上下文: [触发的操作]
截图: [文件名]
警告（级别: warning）:
- [时间戳] [消息内容]
上下文: [触发的操作]
信息消息:
- [相关摘要]
调试上下文:
- 错误发生时的URL
- 页面快照
- 网络状态（若可通过browser_network_requests获取）
建议:
- [具体调试建议]Console Message Levels
控制台消息级别
Playwright console messages follow browser console API levels:
error - Critical errors that prevent functionality
- Uncaught exceptions
- Failed network requests (4xx/5xx from critical APIs)
- Missing required resources
- Use after: Checkout, payment, form submission, authentication
warning - Non-fatal issues that may cause problems
- Deprecated API usage
- Failed optional resources
- Validation warnings
- Use after: Form interactions, navigation, feature usage
info - Informational messages
- Application lifecycle events
- Successful operations
- Debug information from application
- Use for: General monitoring, understanding application flow
debug - Verbose debugging output
- All console.log, console.debug calls
- Framework/library debug messages
- Use for: Deep debugging, understanding detailed behavior
Default recommendation: Use after critical operations, for general monitoring.
level: "error"level: "warning"Playwright控制台消息遵循浏览器控制台API级别：
error - 会阻止功能运行的严重错误
- 未捕获的异常
- 失败的网络请求（关键API返回4xx/5xx状态码）
- 缺失必需资源
- 适用时机： 结账、支付、表单提交、认证操作后
warning - 可能引发问题的非致命问题
- 已弃用的API使用
- 可选资源加载失败
- 验证警告
- 适用时机： 表单交互、导航、功能使用期间
info - 信息性消息
- 应用程序生命周期事件
- 成功完成的操作
- 应用程序输出的调试信息
- 适用场景： 常规监控、了解应用程序流程
debug - 详细的调试输出
- 所有console.log、console.debug调用
- 框架/库的调试消息
- 适用场景： 深度调试、了解详细行为
默认建议： 关键操作后使用，常规监控使用。
level: "error"level: "warning"Supporting Files
支持文件
This skill includes:
- references/playwright-console-api.md - Detailed Playwright console API reference, message formats, and advanced patterns
- examples/examples.md - 5+ real-world monitoring scenarios (e-commerce checkout, form submission, SPA navigation, authentication, third-party integrations)
- assets/error-report-template.md - Template for structured error reports
本技能包含：
- references/playwright-console-api.md - 详细的Playwright控制台API参考、消息格式和高级模式
- examples/examples.md - 5个以上真实监控场景（电商结账、表单提交、SPA导航、认证、第三方集成）
- assets/error-report-template.md - 结构化错误报告模板
Expected Outcomes
预期结果
Successful Monitoring (No Errors)
监控成功（无错误）
✅ Console Monitoring Complete
Workflow: User Login Flow
Operations Monitored: 5
Console Errors: 0
Warnings: 0
All operations completed without console errors.✅ 控制台监控完成
工作流: 用户登录流程
监控的操作数: 5
控制台错误数: 0
警告数: 0
所有操作均无控制台错误完成。Error Detection
检测到错误
❌ Console Errors Detected
Workflow: Checkout Process
Operations Monitored: 8
Console Errors: 2 critical, 1 warning
Critical Errors:
1. [14:32:15] Uncaught TypeError: Cannot read property 'total' of undefined
Context: After "Apply Discount Code" click
Screenshot: checkout-error-1.png
2. [14:32:18] Failed to load resource: POST /api/payment 500
Context: After "Submit Payment" click
Screenshot: checkout-error-2.png
Warnings:
1. [14:32:10] [Deprecation] Synchronous XMLHttpRequest on the main thread
Context: During address validation
Debugging Recommendations:
- Investigate cart.total property initialization
- Check /api/payment endpoint for server errors
- Review discount code application logic❌ 检测到控制台错误
工作流: 结账流程
监控的操作数: 8
控制台错误数: 2个严重错误，1个警告
严重错误:
1. [14:32:15] Uncaught TypeError: Cannot read property 'total' of undefined
上下文: 点击“应用折扣码”后
截图: checkout-error-1.png
2. [14:32:18] Failed to load resource: POST /api/payment 500
上下文: 点击“提交支付”后
截图: checkout-error-2.png
警告:
1. [14:32:10] [Deprecation] Synchronous XMLHttpRequest on the main thread
上下文: 地址验证期间
调试建议:
- 调查cart.total属性的初始化逻辑
- 检查/api/payment端点的服务器错误
- 审核折扣码应用逻辑Integration Points
集成点
With Browser Automation Workflows
与浏览器自动化工作流集成
- Wrap existing automation with console monitoring
- Add checkpoints after critical operations
- Enhance test suites with error detection
- 为现有自动化添加控制台监控
- 在关键操作后添加检查点
- 为测试套件增强错误检测功能
With Debugging Workflows
与调试工作流集成
- Console monitoring identifies error sources
- Screenshots provide visual debugging context
- Network requests correlate with console errors
- 控制台监控识别错误来源
- 截图提供可视化调试上下文
- 网络请求与控制台错误关联
With QA Processes
与QA流程集成
- Automated error detection in test runs
- Regression testing for console errors
- Performance monitoring (console.time/timeEnd messages)
- 测试运行中的自动化错误检测
- 控制台错误的回归测试
- 性能监控（console.time/timeEnd消息）
With CI/CD Pipelines
与CI/CD流水线集成
- Fail builds on critical console errors
- Track error trends across deployments
- Validate error-free user flows
- 出现严重控制台错误时触发构建失败
- 跟踪不同版本部署的错误趋势
- 验证无错误的用户流程
Success Metrics
成功指标
| Metric | Before (Manual) | After (Skill) | Improvement |
|---|---|---|---|
| Error Detection | Reactive (user reports) | Proactive (during automation) | +95% early detection |
| Debugging Time | 30-60 min (reproduce + debug) | 5-10 min (context provided) | 80% reduction |
| False Negatives | High (errors missed) | Low (systematic checking) | 90% reduction |
| Context Quality | Minimal (user description) | Rich (screenshots, state, messages) | 10x improvement |
| 指标 | 之前（手动） | 之后（使用本技能） | 提升效果 |
|---|---|---|---|
| 错误检测 | 被动（用户反馈） | 主动（自动化过程中） | 提前检测率提升95% |
| 调试时间 | 30-60分钟（重现+调试） | 5-10分钟（提供上下文） | 减少80% |
| 漏报率 | 高（错误被遗漏） | 低（系统性检查） | 减少90% |
| 上下文质量 | 极少（用户描述） | 丰富（截图、状态、消息） | 提升10倍 |
Requirements
要求
Required Tools
必需工具
- Playwright MCP browser automation
mcp__playwright__browser_navigatemcp__playwright__browser_console_messagesmcp__playwright__browser_snapshotmcp__playwright__browser_take_screenshot- (for workflows)
mcp__playwright__browser_click mcp__playwright__browser_wait_for
- Playwright MCP浏览器自动化
mcp__playwright__browser_navigatemcp__playwright__browser_console_messagesmcp__playwright__browser_snapshotmcp__playwright__browser_take_screenshot- （用于工作流）
mcp__playwright__browser_click mcp__playwright__browser_wait_for
Environment
环境
- Playwright browser configured and accessible
- Target application URL
- 已配置并可访问的Playwright浏览器
- 目标应用程序URL
Knowledge
知识
- Basic understanding of JavaScript console API
- Familiarity with browser automation workflows
- Understanding of error severity levels
- 对JavaScript控制台API的基本理解
- 熟悉浏览器自动化工作流
- 了解错误严重程度级别
Red Flags to Avoid
需避免的问题
- Checking console only at end - Check after each critical operation
- Ignoring warnings - Warnings often predict future critical errors
- Not capturing context - Always take screenshots at error states
- Wrong severity level - Use level for critical operations
error - Skipping wait states - Ensure operations complete before checking console
- Not clearing initial messages - Page load messages contaminate workflow monitoring
- Missing operation context - Always note which operation triggered errors
- Overly verbose monitoring - Don't check console after every single action
- Ignoring network correlation - Console errors often correlate with network failures
- Not providing recommendations - Error reports should suggest debugging steps
- 仅在最后检查控制台 - 应在每个关键操作后检查
- 忽略警告 - 警告通常预示未来会出现严重错误
- 不捕获上下文 - 错误状态下务必截取截图
- 使用错误的严重级别 - 关键操作后使用级别
error - 跳过等待状态 - 确保操作完成后再检查控制台
- 不清除初始消息 - 页面加载消息会干扰工作流监控
- 遗漏操作上下文 - 务必记录触发错误的操作
- 监控过于繁琐 - 不要在每个操作后都检查控制台
- 忽略网络关联 - 控制台错误通常与网络失败相关
- 不提供建议 - 错误报告应包含调试步骤建议
Notes
注意事项
Key Principles:
- Monitor critical operations - Focus on checkout, submit, auth, payment
- Categorize by severity - Use appropriate console levels
- Capture rich context - Screenshots + snapshots + messages
- Provide actionable reports - Include debugging recommendations
- Balance coverage vs noise - Strategic checkpoints, not every action
Console Message Persistence:
- Messages accumulate during page lifetime
- Page navigation clears console (new document)
- Consider clearing messages between checkpoints for clarity
Performance Considerations:
- Console checks add minimal overhead (~100-200ms)
- Screenshot capture is slower (~500ms-1s)
- Balance monitoring thoroughness with workflow speed
Common Patterns:
- Critical operations: Check immediately after
level: "error" - Form workflows: Check after validation
level: "warning" - Debugging: Use or
level: "info"for full visibilitylevel: "debug" - Regression testing: Establish baseline, detect new errors
Integration with Network Monitoring:
- Combine with for complete debugging context
browser_network_requests - Network failures often manifest as console errors
- 500-series responses typically generate console errors
- CORS issues appear in console, not network tab
核心原则：
- 监控关键操作 - 重点关注结账、提交、认证、支付流程
- 按严重程度分类 - 使用合适的控制台级别
- 捕获丰富上下文 - 截图 + 快照 + 消息
- 提供可执行报告 - 包含调试建议
- 平衡覆盖范围与噪音 - 设置关键检查点，而非每个操作都检查
控制台消息持久性：
- 消息在页面生命周期内累积
- 页面导航会清空控制台（新文档加载）
- 为清晰起见，可在检查点之间清除消息
性能考虑：
- 控制台检查的额外开销极小（约100-200ms）
- 截图捕获较慢（约500ms-1s）
- 在监控全面性与工作流速度之间取得平衡
常见模式：
- 关键操作： 操作完成后立即检查
level: "error" - 表单工作流： 验证后检查
level: "warning" - 调试： 使用或
level: "info"获取完整可见性level: "debug" - 回归测试： 建立基准，检测新出现的错误
与网络监控的集成：
- 结合获取完整调试上下文
browser_network_requests - 网络失败通常会表现为控制台错误
- 500系列响应通常会生成控制台错误
- CORS问题会出现在控制台中，而非网络标签页