User Guides¶

Welcome to the RapidTriageME user guides! This section provides comprehensive tutorials, best practices, and advanced techniques for getting the most out of your AI-powered browser debugging platform.

Guide Categories¶

graph TB
    subgraph "Getting Started"
        SETUP[🚀 IDE Integration]
        CONFIG[⚙️ Configuration]
    end

    subgraph "Core Skills"
        DEBUG[🔍 Debugging Techniques]
        PERF[📈 Performance Optimization]
    end

    subgraph "Advanced Topics"
        SECURITY[🔒 Security & Privacy]
        AUTOMATION[🤖 AI Automation]
    end

    subgraph "Best Practices"
        WORKFLOWS[📋 Workflows]
        TIPS[💡 Pro Tips]
    end

    SETUP --> DEBUG
    CONFIG --> PERF
    DEBUG --> SECURITY
    PERF --> AUTOMATION
    SECURITY --> WORKFLOWS
    AUTOMATION --> TIPS

    style SETUP fill:#e8f5e8
    style DEBUG fill:#e1f5fe
    style SECURITY fill:#fce4ec
    style WORKFLOWS fill:#fff3e0

Available Guides¶

Quick Start Workflows¶

1. Basic Debugging Workflow¶

flowchart LR
    A[🌐 Open Website] --> B[🔍 Encounter Issue]
    B --> C[🤖 Ask AI Assistant]
    C --> D[📸 Take Screenshot]
    D --> E[📋 Check Console Logs]
    E --> F[🌐 Analyze Network]
    F --> G[✅ Identify Solution]

    style A fill:#e3f2fd
    style G fill:#c8e6c9

Example Commands:

1. "Take a screenshot of this page"
2. "Show me all console errors"
3. "What network requests are failing?"
4. "Run a performance audit"

2. Performance Analysis Workflow¶

flowchart TD
    START[📈 Performance Issue] --> LIGHTHOUSE[🚀 Run Lighthouse Audit]
    LIGHTHOUSE --> METRICS[📊 Analyze Core Web Vitals]
    METRICS --> OPPORTUNITIES[🔍 Identify Opportunities]
    OPPORTUNITIES --> IMPLEMENT[⚙️ Implement Fixes]
    IMPLEMENT --> VERIFY[✅ Verify Improvements]

    style START fill:#ffecb3
    style VERIFY fill:#c8e6c9

AI Prompts:

1. "Run a comprehensive Lighthouse audit"
2. "Analyze the Core Web Vitals scores"
3. "What are the biggest performance opportunities?"
4. "Help me optimize the largest contentful paint"

3. Error Investigation Workflow¶

sequenceDiagram
    participant Dev as 👨‍💻 Developer
    participant AI as 🤖 AI Assistant
    participant RT as 🔧 RapidTriageME
    participant Browser as 🌐 Browser

    Dev->>AI: "Something is broken on this page"
    AI->>RT: Check console logs
    RT->>Browser: Fetch console data
    Browser-->>RT: Error logs
    RT-->>AI: Formatted errors
    AI->>RT: Take screenshot
    RT->>Browser: Capture screen
    Browser-->>RT: Screenshot data
    RT-->>AI: Visual context
    AI-->>Dev: Analysis + recommendations

Common Use Cases¶

Frontend Development¶

QA Testing¶

DevOps & Monitoring¶

Best Practices¶

📝 Documentation Practices¶

1. Screenshot Everything Important

   "Take a screenshot before and after the fix"
   "Document the current state visually"
   

2. Capture Context

   "Show console logs from the last 5 minutes"
   "Include network requests in the analysis"
   

3. Save Audit Results

   "Run full audit and save results for comparison"
   "Track performance metrics over time"
   

🤖 AI Interaction Tips¶

1. Be Specific
2. Good: "Show errors from the checkout process"

3. Better: "Show JavaScript errors that occurred in the last 2 minutes during checkout"

4. Provide Context

5. "I'm seeing a blank page after login"
6. "The mobile navigation isn't working on iOS"

7. "Performance degraded after latest deployment"

8. Ask Follow-up Questions

9. "What could be causing this error?"
10. "How can I fix this performance issue?"
11. "Are there any security concerns here?"

🔄 Workflow Optimization¶

1. Create Custom Commands

   // VS Code settings.json
   {
     "rapidtriage.customCommands": {
       "full-debug": "Take screenshot, get console logs, run performance audit",
       "error-check": "Show all errors from the last 10 minutes",
       "mobile-test": "Capture mobile screenshot and check responsive design"
     }
   }
   

2. Set Up Monitoring Dashboards

3. Configure regular performance audits
4. Set up error alerts

5. Track key metrics automatically

6. Integrate with CI/CD

7. Run automated audits on deployments
8. Compare performance before/after changes
9. Block deployments with critical issues

Advanced Techniques¶

Automated Testing with AI¶

// Example: Automated accessibility testing
const auditResults = await rapidtriage.runAccessibilityAudit({
  url: 'https://myapp.com',
  standards: ['WCAG2A', 'WCAG2AA'],
  includeScreenshot: true
});

// AI analysis
const analysis = await ai.analyze(`
  Please review this accessibility audit and prioritize the issues:
  ${JSON.stringify(auditResults, null, 2)}
`);

Performance Regression Detection¶

// Track performance over time
const currentMetrics = await rapidtriage.runPerformanceAudit();
const baselineMetrics = loadBaseline('v1.2.0');

// AI comparison
const regression = await ai.compare(`
  Compare these performance metrics and identify any regressions:
  Current: ${JSON.stringify(currentMetrics)}
  Baseline: ${JSON.stringify(baselineMetrics)}
`);

Custom Debugging Workflows¶

// Create custom debugging sequence
class CustomDebugger {
  async fullAnalysis(url) {
    const results = {};

    // Capture initial state
    results.screenshot = await rapidtriage.captureScreenshot();
    results.console = await rapidtriage.getConsoleLogs();
    results.network = await rapidtriage.getNetworkRequests();

    // Run audits
    results.performance = await rapidtriage.runPerformanceAudit();
    results.accessibility = await rapidtriage.runAccessibilityAudit();
    results.seo = await rapidtriage.runSEOAudit();

    // AI analysis
    const analysis = await ai.analyze(`
      Perform comprehensive analysis of this web page:
      ${JSON.stringify(results, null, 2)}
    `);

    return { raw: results, analysis };
  }
}

Integration Examples¶

With Testing Frameworks¶

Jest Integration¶

// test/debug.helper.js
const { RapidTriageClient } = require('@yarlisai/rapidtriage-client');

class DebugHelper {
  constructor() {
    this.client = new RapidTriageClient();
  }

  async debugOnFailure(testName, error) {
    console.log(`🔍 Debugging failed test: ${testName}`);

    const screenshot = await this.client.captureScreenshot();
    const logs = await this.client.getConsoleLogs({ level: 'error' });

    // Save debug artifacts
    fs.writeFileSync(`debug/${testName}-screenshot.png`, screenshot);
    fs.writeFileSync(`debug/${testName}-logs.json`, JSON.stringify(logs));

    return { screenshot, logs };
  }
}

// Usage in tests
afterEach(async () => {
  if (this.currentTest.state === 'failed') {
    await debugHelper.debugOnFailure(this.currentTest.title, this.currentTest.err);
  }
});

Cypress Integration¶

// cypress/support/commands.js
Cypress.Commands.add('debugWithAI', (prompt) => {
  cy.window().then(async (win) => {
    // Capture state
    const screenshot = await rapidtriage.captureScreenshot();
    const logs = await rapidtriage.getConsoleLogs();

    // Send to AI
    const analysis = await ai.analyze(`
      ${prompt}

      Screenshot and console logs are attached.
    `);

    cy.log('AI Analysis:', analysis);
  });
});

// Usage
it('should debug login failure', () => {
  cy.visit('/login');
  cy.get('[data-testid=login-btn]').click();
  cy.debugWithAI('Why did the login fail?');
});

Troubleshooting Integration¶

If you encounter issues while following these guides:

1. Check Prerequisites
2. Ensure RapidTriageME is properly installed
3. Verify browser extension is loaded

4. Confirm server is running on port 3025

5. Review Configuration

6. Double-check IDE settings
7. Verify environment variables

8. Test MCP connection

9. Get Help

10. Check troubleshooting guide
11. Join our Discord community
12. Open an issue on GitHub

What's Next?¶

Choose the guide that matches your current needs:

• New to RapidTriageME? Start with IDE Integration
• Want to debug better? Check out Debugging Techniques
• Performance issues? Read Performance Guide
• Security concerns? Review Security Guide

These guides will help you master RapidTriageME and become more efficient at browser debugging with AI assistance.