Frontend Debugging Tools and Techniques

// Select elements
document.querySelector('.button')
document.querySelectorAll('div.item')

// Computed styles
getComputedStyle(element)

// Force state
// Right-click element > Force State > :hover

// Basic logging
console.log('Variable:', variable);

// Grouped logging
console.group('User Data');
console.log('Name:', user.name);
console.log('Email:', user.email);
console.groupEnd();

// Table for objects
console.table(users);

// Timing operations
console.time('Fetch data');
fetch('/api/data')
  .then(data => {
    console.timeEnd('Fetch data');
  });

// Assertion
console.assert(condition, 'Error message');

// Tracing
console.trace('Function call stack');

// Counting
console.count('ButtonClick');

// Filter requests
// - XHR/fetch
// - JS, CSS, Img
// - All

// Check status codes
// 200: OK
// 301: Redirect
// 404: Not found
// 500: Server error

// Inspect response
// Headers, Payload, Preview, Response

// Add breakpoint
// Click line number in Sources panel

// Conditional breakpoint
// Right-click > Edit breakpoint
// condition: x > 100

// Logpoint (no pause)
// console.log(variable)

// Debugging keywords
debugger; // Pauses execution

npm install --save-dev react-devtools

import { Profiler } from 'react';

function onRenderCallback(
  id, phase, actualDuration,
  baseDuration, startTime, commitTime
) {
  console.log({
    id,
    phase, // 'mount' or 'update'
    actualDuration, // Time spent rendering
  });
}

<Profiler id="App" onRender={onRenderCallback}>
  <App />
</Profiler>

import { configureStore } from '@reduxjs/toolkit';

const store = configureStore({
  reducer: rootReducer,
  devTools: process.env.NODE_ENV !== 'production'
});

// Measure performance
performance.mark('start');

// Your code
fetchData().then(() => {
  performance.mark('end');
  performance.measure('fetchData', 'start', 'end');

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

// Mark important moments
performance.mark('component-mount');
performance.mark('data-loaded');

// Measure between marks
performance.measure(
  'data-loading-time',
  'component-mount',
  'data-loaded'
);

// Get measures
const measures = performance.getEntriesByType('measure');
console.table(measures);

// Observe long tasks
const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    console.log('Long task detected:', entry);
  }
});

observer.observe({ entryTypes: ['longtask'] });

// Take memory snapshot
// DevTools > Memory > Take Snapshot

// Look for:
// - Detached DOM nodes
// - Event listeners
// - Global variables

// Force garbage collection
// (in Chrome, with --js-flags flag)

// Compare snapshots
// Snapshot 1 > Use app > Snapshot 2
// Compare to find leaks

fetch('/api/data')
  .then(response => {
    // Log response
    console.log('Status:', response.status);
    console.log('Headers:', response.headers);

    return response.json();
  })
  .then(data => {
    console.log('Data:', data);
  })
  .catch(error => {
    console.error('Error:', error);
  });

// Service Worker for debugging
self.addEventListener('fetch', (event) => {
  console.log('Fetch:', event.request.url);

  event.respondWith(
    fetch(event.request).then(response => {
      console.log('Response:', response.status);
      return response;
    })
  );
});

try {
  riskyOperation();
} catch (error) {
  console.error('Caught error:', error);
  // Log to error tracking service
  logError(error);
}

// Catch unhandled errors
window.addEventListener('error', (event) => {
  console.error('Global error:', event.error);
  logError(event.error);
});

// Catch unhandled promise rejections
window.addEventListener('unhandledrejection', (event) => {
  console.error('Unhandled rejection:', event.reason);
  event.preventDefault(); // Prevent default handling
});

class ErrorBoundary extends React.Component {
  state = { hasError: false };

  static getDerivedStateFromError(error) {
    return { hasError: true };
  }

  componentDidCatch(error, info) {
    console.error('Error boundary caught:', error, info);
    logError(error, info);
  }

  render() {
    if (this.state.hasError) {
      return <h1>Something went wrong.</h1>;
    }
    return this.props.children;
  }
}

// vite.config.js
export default defineConfig({
  build: {
    sourcemap: true
  }
});

<script src="//cdn.jsdelivr.net/npm/eruda"></script>
<script>eruda.init();</script>

// Bad: Direct mutation
state.items.push(item); // Won't trigger re-render

// Good: Immutable update
setState({
  ...state,
  items: [...state.items, item]
});

// Bad: Race condition
useEffect(() => {
  fetchData(userId);
}, [userId]);

// Good: Cleanup
useEffect(() => {
  let cancelled = false;

  fetchData(userId).then(data => {
    if (!cancelled) {
      setState(data);
    }
  });

  return () => {
    cancelled = true;
  };
}, [userId]);

// Bad: Not cleaning up
useEffect(() => {
  const interval = setInterval(() => {
    updateData();
  }, 1000);
  // Missing cleanup!
}, []);

// Good: Cleanup function
useEffect(() => {
  const interval = setInterval(() => {
    updateData();
  }, 1000);

  return () => {
    clearInterval(interval);
  };
}, []);