Debugging Mastery: Advanced Debugging Techniques

// Inspect DOM elements
inspect(document.body);

// Monitor function calls
monitor(userService.getUser);

// Table view for arrays
console.table(users);

// Group logs
console.group('User Flow');
console.log('Step 1');
console.log('Step 2');
console.groupEnd();

// Time operations
console.time('fetch');
await fetchData();
console.timeEnd('fetch');

// Blackbox scripts (ignore library code)
Settings > Blackbox > Add pattern: jquery.min.js

// Conditional breakpoints
// Right-click line > Add conditional breakpoint
// Enter: user.id === 123

// Logpoints (no breakpoint, just log)
// Right-click > Add logpoint
// Enter: 'Current value:', user.name

// Throttle network
Network > Throttling > Slow 3G

// Block requests
Network > Request blocking > Add pattern

// Inspect props and state
// Filter components by name
// Trace component updates (Profiler tab)

// Debug hooks
useDebugValue('Loading', isLoading);

# Inspect mode
node --inspect app.js

# Chrome inspector
chrome://inspect

# VS Code debugger
# Create launch.json:
{
  "type": "node",
  "request": "launch",
  "program": "${workspaceFolder}/app.js"
}

// .vscode/launch.json
{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}"
    },
    {
      "type": "node",
      "request": "launch",
      "program": "${workspaceFolder}/server.js"
    }
  ]
}

// Narrow down bug location
// 1. Check if bug in first half or second half
// 2. Remove half that's working
// 3. Repeat until found

// Start with full code
// Remove parts until bug disappears
// Last removed part caused the bug
// Create minimal example

// Bad
console.log('Error');
console.log(data);

// Good
logger.error('Failed to fetch user', {
  userId: user.id,
  endpoint: '/api/users',
  status: response.status,
  error: error.message
});

// Sentry setup
import * as Sentry from "@sentry/browser";

Sentry.init({
  dsn: "YOUR-DSN",
  environment: "production"
});

try {
  riskyOperation();
} catch (error) {
  Sentry.captureException(error);
}

// Performance API
performance.mark('start');
runExpensiveOperation();
performance.mark('end');
performance.measure('operation', 'start', 'end');

const measure = performance.getEntriesByName('operation')[0];
console.log(`Duration: ${measure.duration}ms`);