# Basic logging
console.log('Variable value:', variable);
console.log('Object state:', JSON.stringify(object, null, 2));
console.log('Function called with:', arguments);

# Debug logging
console.debug('Debug info:', debugInfo);
console.info('Info message:', info);
console.warn('Warning:', warning);
console.error('Error:', error);

# Conditional logging
if (process.env.NODE_ENV === 'development') {
  console.log('Debug info:', debugInfo);
}

# Try-catch blocks
try {
  // Risky operation
  const result = await riskyOperation();
} catch (error) {
  console.error('Operation failed:', error);
  // Handle error appropriately
}

# Error boundaries
class ErrorBoundary extends React.Component {
  componentDidCatch(error, errorInfo) {
    console.error('Error caught:', error);
    console.error('Error info:', errorInfo);
  }
}

# Global error handling
window.onerror = function(message, source, lineno, colno, error) {
  console.error('Global error:', {message, source, lineno, colno, error});
  return true;
};

# Browser DevTools
// Breakpoint
debugger;

// Console methods
console.table(array);
console.time('operation');
console.timeEnd('operation');
console.trace('Call stack');

// Network debugging
fetch('/api/data')
  .then(response => {
    console.log('Response:', response);
    return response.json();
  })
  .then(data => console.log('Data:', data))
  .catch(error => console.error('Error:', error));

# Performance measurement
const start = performance.now();
// Operation to measure
const end = performance.now();
console.log('Operation took:', end - start, 'ms');

# Memory profiling
// Chrome DevTools Memory tab
// Take heap snapshot
// Record allocation timeline

# CPU profiling
// Chrome DevTools Performance tab
// Record CPU profile
// Analyze flame chart

# Network monitoring
// Chrome DevTools Network tab
// Filter by type
// Analyze timing
// Check headers

# API debugging
fetch('/api/endpoint', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify(data),
})
.then(response => {
  console.log('Status:', response.status);
  console.log('Headers:', response.headers);
  return response.json();
})
.then(data => console.log('Response:', data))
.catch(error => console.error('Error:', error));

# Redux debugging
// Redux DevTools
// Action logging
// State inspection
// Time travel debugging

# React state debugging
useEffect(() => {
  console.log('Component state:', state);
}, [state]);

# Vue state debugging
watch(() => state.value, (newValue, oldValue) => {
  console.log('State changed:', {newValue, oldValue});
});

# Jest debugging
test('should handle error', () => {
  expect(() => {
    throw new Error('Test error');
  }).toThrow('Test error');
});

# Test coverage
// Jest coverage report
// Istanbul coverage
// Code coverage analysis

# Test debugging
describe('Component', () => {
  it('should render correctly', () => {
    console.log('Test state:', state);
    expect(component).toBeTruthy();
  });
});

# API test debugging
describe('API', () => {
  it('should return data', async () => {
    const response = await request(app)
      .get('/api/data')
      .expect(200);
    console.log('Response:', response.body);
  });
});

# Component test debugging
describe('Component', () => {
  it('should update state', () => {
    const wrapper = mount(Component);
    console.log('Initial state:', wrapper.state());
    wrapper.find('button').simulate('click');
    console.log('Updated state:', wrapper.state());
  });
});

# Cypress debugging
describe('Feature', () => {
  it('should work end-to-end', () => {
    cy.visit('/');
    cy.get('[data-testid="button"]').click();
    cy.get('[data-testid="result"]').should('be.visible');
  });
});

# Playwright debugging
test('should work end-to-end', async ({ page }) => {
  await page.goto('/');
  await page.click('[data-testid="button"]');
  await page.waitForSelector('[data-testid="result"]');
});

# Chrome DevTools
// Elements panel
// Console panel
// Network panel
// Performance panel
// Memory panel

# Firefox Developer Tools
// Inspector
// Console
// Network
// Performance
// Memory

# Safari Web Inspector
// Elements
// Console
// Network
// Timeline
// Storage

# VS Code debugging
{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Debug Program",
      "program": "${workspaceFolder}/index.js"
    }
  ]
}

# WebStorm debugging
// Run configuration
// Debug configuration
// Breakpoints
// Watches
// Variables

# Node.js debugging
node --inspect index.js
node --inspect-brk index.js

# Chrome debugging
chrome-devtools://devtools/bundled/inspector.html?ws=127.0.0.1:9229

# Logging tools
winston
pino
debug
morgan

# Systematic approach
1. Reproduce the issue
2. Isolate the problem
3. Identify the cause
4. Fix the issue
5. Verify the fix

# Debugging checklist
- Check error messages
- Review logs
- Inspect state
- Test assumptions
- Verify fixes

# Input validation
function validateInput(input) {
  if (!input) throw new Error('Input required');
  if (typeof input !== 'string') throw new Error('String expected');
  return input;
}

# Type checking
function processData(data) {
  if (!Array.isArray(data)) {
    throw new TypeError('Array expected');
  }
  return data.map(item => {
    if (typeof item !== 'object') {
      throw new TypeError('Object expected');
    }
    return item;
  });
}

# General tips
- Use source maps
- Enable strict mode
- Add proper logging
- Use debugger statements
- Check browser console

# Performance tips
- Use performance marks
- Monitor memory usage
- Profile CPU usage
- Check network requests
- Analyze bundle size