Debugging Techniques Guide¶

🔍 Master browser debugging with AI assistance¶

Learn advanced debugging techniques using RapidTriageME's powerful browser automation and AI integration capabilities.

Core Debugging Concepts¶

The Debugging Workflow¶

graph LR
    A[Identify Issue] --> B[Capture State]
    B --> C[Analyze Data]
    C --> D[Form Hypothesis]
    D --> E[Test Solution]
    E --> F{Fixed?}
    F -->|No| B
    F -->|Yes| G[Document Fix]

Essential Debugging Tools¶

1. Screenshot Capture¶

Capture visual state of your application at any moment:

// AI Command Examples:
"Take a screenshot of the current page"
"Capture the error state on localhost:3000"
"Screenshot the modal dialog that appears after clicking submit"

Advanced Options: - Full page capture - Element-specific screenshots - Mobile viewport simulation - Before/after comparisons

2. Console Log Analysis¶

Monitor and analyze browser console output:

// AI Command Examples:
"Show me all console errors"
"Get warning messages from the last 5 minutes"
"Find console logs related to API calls"

Log Levels: - error - Critical issues - warn - Potential problems - info - Informational messages - debug - Detailed debugging info - trace - Stack traces

3. Network Request Monitoring¶

Track and analyze HTTP requests:

// AI Command Examples:
"Show failed network requests"
"List all API calls to /api/users"
"Find slow requests taking over 1 second"
"Check for CORS errors"

Network Analysis: - Request/response headers - Status codes - Timing information - Payload inspection - WebSocket messages

4. Performance Profiling¶

Identify performance bottlenecks:

// AI Command Examples:
"Run performance audit"
"Check Core Web Vitals"
"Analyze JavaScript execution time"
"Find memory leaks"

Debugging Scenarios¶

Scenario 1: React Component Not Rendering¶

Problem: Component appears blank or doesn't update

Debugging Steps:

Capture Visual State

"Take a screenshot of the component area"

Check Console Errors
```
"Show any React errors in the console"
```

Inspect Props/State

"Check React DevTools for component props"

Network Analysis
```
"Are there any failed API calls?"
```

Common Solutions: - Missing dependencies in useEffect - Incorrect state updates - API endpoint issues - Conditional rendering bugs

Scenario 2: API Integration Issues¶

Problem: Data not loading or updating

Debugging Steps:

Monitor Network
```
"Show all API requests to the backend"
```
Check Status Codes
```
"List any 4xx or 5xx responses"
```

Inspect Payloads

"Show the request and response for POST /api/users"

CORS Analysis
```
"Check for CORS errors"
```

Common Solutions: - Authentication token issues - CORS configuration - Malformed request body - Rate limiting

Scenario 3: Performance Problems¶

Problem: Slow page load or interactions

Debugging Steps:

Run Lighthouse Audit
```
"Perform full Lighthouse audit"
```

Analyze Metrics

"What's the Largest Contentful Paint time?"

Resource Analysis
```
"Find the largest JavaScript bundles"
```
Runtime Performance
```
"Check for long-running scripts"
```

Common Solutions: - Code splitting - Image optimization - Lazy loading - Caching strategies

Scenario 4: Form Validation Errors¶

Problem: Form submission fails silently

Debugging Steps:

Capture Form State

"Screenshot the form after submission attempt"

Console Validation
```
"Show validation errors in console"
```
Network Inspection
```
"Check the form submission request"
```
Event Tracking
```
"Monitor form submit events"
```

Advanced Debugging Techniques¶

1. Automated Debugging Mode¶

Run comprehensive debugging workflow:

// AI Command:
"Run full debug mode on this page"

// This executes:
1. Screenshot capture
2. Console log collection
3. Network request analysis
4. Performance metrics
5. Accessibility check
6. Security scan

2. Comparative Debugging¶

Compare working vs broken states:

// AI Commands:
"Compare screenshots before and after clicking submit"
"Diff network requests between working and broken versions"
"Show console differences between two page loads"

3. Time-Travel Debugging¶

Analyze historical data:

// AI Commands:
"Show console logs from the last 10 minutes"
"Get network requests from before the error occurred"
"Track user interactions leading to the bug"

4. Cross-Browser Testing¶

Debug browser-specific issues:

// AI Commands:
"Test in Chrome, Firefox, and Safari"
"Check for browser-specific console errors"
"Compare rendering across browsers"

Debugging Patterns¶

Pattern 1: Binary Search Debugging¶

Narrow down the problem systematically:

graph TD
    A[Problem Occurs] --> B{Works with half code removed?}
    B -->|Yes| C[Problem in removed half]
    B -->|No| D[Problem in remaining half]
    C --> E[Repeat with problematic half]
    D --> E
    E --> F[Isolate exact cause]

Pattern 2: Hypothesis-Driven Debugging¶

Form hypothesis: "The issue is caused by X"
Design test: "If X is the cause, then Y should happen"
Execute test: Use RapidTriageME tools
Analyze results: Confirm or refute hypothesis
Iterate: Form new hypothesis based on findings

Pattern 3: Systematic Elimination¶

// Checklist approach:
const debugChecklist = [
  "Check browser console for errors",
  "Verify network requests succeed",
  "Confirm data structure is correct",
  "Test with minimal reproduction",
  "Check browser compatibility",
  "Review recent code changes"
];

Debugging Commands Reference¶

Quick Commands¶

Command	Purpose
`"debug"`	Run full debug suite
`"screenshot"`	Capture current state
`"console"`	Get console logs
`"network"`	Show network activity
`"audit"`	Run performance audit
`"errors"`	Show all errors

Detailed Commands¶

// Console Analysis
"Show console errors with stack traces"
"Filter console logs by 'user' keyword"
"Get console timing information"

// Network Analysis
"Show POST requests with 500 status"
"Find requests taking over 2 seconds"
"List WebSocket connections"

// Performance
"Measure First Contentful Paint"
"Check JavaScript bundle sizes"
"Analyze render-blocking resources"

// Visual Debugging
"Screenshot with device frame"
"Capture element #user-form"
"Take screenshots at breakpoints"

Debugging Best Practices¶

1. Systematic Approach¶

✅ Reproduce consistently before debugging
✅ Document steps to reproduce
✅ Isolate variables one at a time
✅ Keep a debugging log of attempts

2. Use AI Effectively¶

// Good AI prompts:
"Debug why the login form returns 401 error"
"Help me find what's causing the memory leak"
"Analyze why the page loads slowly on mobile"

// Include context:
"After upgrading React, the component stopped rendering"
"Users report errors only on Safari"
"The issue happens after 5 minutes of usage"

3. Preventive Debugging¶

Add comprehensive error boundaries
Implement detailed logging
Set up monitoring and alerts
Write debugging documentation

4. Team Debugging¶

Share debugging context:

// Create debugging report
const debugReport = {
  timestamp: new Date(),
  screenshot: "base64...",
  console: [...logs],
  network: [...requests],
  steps: ["Step 1", "Step 2"],
  hypothesis: "Possible cause...",
  environment: {
    browser: "Chrome 120",
    os: "macOS 14",
    viewport: "1920x1080"
  }
};

Common Issues and Solutions¶

Issue: "Cannot read property of undefined"¶

// Debugging approach:
1. "Show the exact error with stack trace"
2. "Screenshot when error occurs"
3. "Check the data structure being accessed"
4. "Verify API response format"

// Common fixes:
- Optional chaining: obj?.property
- Default values: const { data = {} } = response
- Null checks: if (data && data.user)
- Type validation: PropTypes or TypeScript

Issue: "Maximum update depth exceeded"¶

// Debugging approach:
1. "Find React rendering loops"
2. "Check useEffect dependencies"
3. "Monitor component re-renders"

// Common fixes:
- Fix dependency arrays
- Memoize expensive computations
- Use useCallback for functions
- Prevent state updates in render

Issue: "CORS blocked request"¶

// Debugging approach:
1. "Show the exact CORS error"
2. "Check request and response headers"
3. "Verify allowed origins"

// Common fixes:
- Configure server CORS headers
- Use proxy in development
- Check credentials flag
- Verify API endpoint URL

Debugging Workflow Automation¶

Create Custom Workflows¶

// .rapidtriage/workflows/e2e-debug.js
module.exports = {
  name: "E2E Debug Workflow",
  steps: [
    {
      name: "Initial State",
      tool: "screenshot_capture",
      params: { fullPage: true }
    },
    {
      name: "Clear Errors",
      tool: "get_console_logs",
      params: { level: "error", clear: true }
    },
    {
      name: "User Journey",
      sequence: [
        { action: "navigate", url: "/login" },
        { action: "fill", selector: "#email", value: "[email protected]" },
        { action: "fill", selector: "#password", value: "password" },
        { action: "click", selector: "#submit" },
        { action: "wait", time: 2000 }
      ]
    },
    {
      name: "Capture Results",
      parallel: [
        { tool: "screenshot_capture" },
        { tool: "get_console_logs" },
        { tool: "get_network_requests", params: { failed: true } }
      ]
    },
    {
      name: "Analysis",
      tool: "run_lighthouse_audit",
      params: { categories: ["performance", "accessibility"] }
    }
  ]
};

Use Workflow in IDE¶

"Run the E2E debug workflow"
"Execute custom debugging sequence for checkout flow"

Debugging Tools Integration¶

Browser DevTools Enhancement¶

RapidTriageME enhances native DevTools:

Auto-capture: Automatically captures state on errors
Time markers: Marks timeline when issues occur
Correlation: Links console errors to network requests
Export: Saves debugging session for sharing

External Tools Integration¶

Works alongside: - Sentry: Error tracking - LogRocket: Session replay - Datadog: APM monitoring - New Relic: Performance monitoring

Learning Resources¶

Debugging Tutorials¶

Basic Debugging: Understanding browser DevTools
Advanced Techniques: Memory profiling and performance
Framework-Specific: React, Vue, Angular debugging
API Debugging: REST, GraphQL, WebSocket

Practice Scenarios¶

Try these debugging challenges:

Challenge 1: Find why a button click doesn't work
Challenge 2: Debug slow page load
Challenge 3: Fix data not updating
Challenge 4: Resolve authentication issues

Next Steps¶

🚀 IDE Integration - Set up your environment
⚡ Performance Guide - Optimize applications
🔒 Security Guide - Secure debugging practices
📊 API Reference - Complete tool documentation

Support¶

Having debugging issues?