Console Patrol

ConsolePatrol Skill

Name

console-patrol

Description

AI-First Console Error & Warning Detector for Web Applications. Automatically scans web pages to detect console errors and warnings, with framework-specific rules for Ant Design, React, and Element UI.

When to Use

Use this skill when the user asks to:

Prerequisites

The skill uses console-patrol package:

pip install console-patrol
playwright install chromium

Core Workflow

1. Quick Scan (Recommended)

from console_patrol import ConsolePatrol
patrol = ConsolePatrol()
result = patrol.scan(
    url="http://localhost:3000",
    routes=[
        "http://localhost:3000/",
        "http://localhost:3000/dashboard",
        "http://localhost:3000/settings",
    ],
    wait_time=2.0,
)
print(f"Issues found: {result.report.total_issues}")
for issue in result.issues:
    print(f"[{issue.severity.value}] {issue.rule_id}")
    print(f"  Fix: {issue.suggestion}")

2. Auto-Discover Routes

from console_patrol import ConsolePatrol
patrol = ConsolePatrol()
result = patrol.scan(
    url="http://localhost:3000",
    router_type="react",
    base_path="/admin",
    auto_discover=True,  # Auto-discover common routes
)

3. With Framework Auto-Detection

result = patrol.scan(
    url="http://localhost:3000",
    routes=["http://localhost:3000/"],
    detect_framework=True,  # Auto-detect UI framework
)
print(f"Detected: {result.framework_info.ui_framework}")

4. CLI Usage

# Scan with auto-discovery
console-patrol scan http://localhost:3000 --router-type react --auto-discover
Scan specific routes
console-patrol scan http://localhost:3000 --routes "/,/dashboard,/about"
With screenshots on errors
console-patrol scan http://localhost:3000 --screenshot
Output formats
console-patrol scan http://localhost:3000 --format markdown

Detection Rules

Severity Levels

| Level | Meaning | Exit Code | |-------|---------|-----------| | P0 | Fatal (crashes, JS exceptions) | 2 | | P1 | Warning (framework issues) | 1 | | P2 | Hint (code smell) | 0 |

Built-in Rules

#### Ant Design

#### React

Response Format

When issues are found, respond with:

## ConsolePatrol Scan Results
Pages Scanned: N
Total Issues: N
| Severity | Count |
|----------|-------|
| P0 (Fatal) | N |
| P1 (Warning) | N |
| P2 (Hint) | N |
Issues
[P0] react-uncaught-error
Message: Error description
Location: page URL
Fix: Suggestion
[P1] antd-useForm-unhooked
Message: Error description
Location: page URL
Fix: Use state instead of form.getFieldValue() in render

Important Notes

1. Wait Time: Default 2s after page load. Increase for SPAs with lazy loading. 2. Screenshots: Use --screenshot flag to capture error screenshots. 3. Frameworks: Pass --frameworks antd,react to limit rule scope. 4. Exit Codes: Use in CI/CD: if [ $? -gt 0 ]; then echo "Issues found"; fi

Installation for Agent

If console-patrol is not installed:

import subprocess
subprocess.run(["pip", "install", "console-patrol"], check=True)
subprocess.run(["playwright", "install", "chromium"], check=True)

Edge Cases

The skill uses console-patrol package:

pip install console-patrol
playwright install chromium