Debugging Overview

Overview

Debugging is an essential skill for developers. It allows us to identify, understand, and fix issues in our code, leading to more stable applications and a smoother development process. In simple terms, debugging is like being a detective for your code – finding clues about what’s going wrong and solving the mystery.

This guide covers the importance of debugging, the steps to approach it, the best tools to use, and common errors you might encounter.

Why is Debugging Important?

Debugging is crucial because:

• Improves Code Quality: Identifying and fixing issues ensures that the software runs as expected and delivers a better user experience.
• Increases Efficiency: Helps developers quickly address problems instead of guessing what’s wrong, saving hours of frustration.
• Saves Time in the Long Run: Prevents bugs from escalating into bigger issues that might require complete rewrites.
• Builds Developer Confidence: Successfully solving issues boosts the developer’s skills and confidence in tackling future problems.

As a beginner, developing strong debugging skills will set you apart and help you progress faster than simply writing more code without understanding how it works.

How to Approach Debugging

Debugging is most effective when approached systematically rather than through trial and error. Random changes to code often lead to more problems or temporary fixes that break later. Follow these steps for more efficient troubleshooting:

1. Reproduce the Error

Ensure that you can consistently reproduce the error before attempting a fix. This helps you understand the conditions under which the problem occurs.

// Example: Reproducing a login form error
function loginUser() {
  const username = document.getElementById('username').value;
  const password = document.getElementById('password').value;
  
  // Try with a specific input that causes the problem
  console.log(`Attempting login with: ${username}`);
  
  if (username.includes('@')) {
    // This might be where the error occurs
    authenticateUser(username, password);
  } else {
    console.error('Invalid username format');
  }
}

Code walkthrough:

1. We have a function that handles user login
2. We’re explicitly logging the username to see what value is being processed
3. We’re checking if the username includes an ‘@’ symbol
4. By running this with different inputs, we can see when the error occurs

Real-world example: Imagine you’re building a login form and users report they can’t log in with certain email addresses. By trying different email formats, you can identify which specific pattern causes the issue.

2. Reading the Error Message/Stack Trace

Error messages and stack traces provide valuable information about what went wrong. Look for the file and line number where the error occurred, and pay attention to the specific error type.

Note: A “Stack Trace” is a list of function calls that led to the error. It’s like a timeline of what happened before the error occurred. Here’s an example of a stack trace:

TypeError: Cannot read properties of null (reading 'profile')
    at displayUserProfile (userProfile.js:5:25)
    at getUserData (userData.js:25:10)
    at handleProfileClick (main.js:42:12)
    at HTMLButtonElement.onclick (index.html:1:1)

In the above stack trace, the error occurred at displayUserProfile (userProfile.js:5:25). This means that the error happened in the displayUserProfile function, on line 5, column 25. Reading from bottom to top, we can see the function call sequence that led to the error.

// This would be in userProfile.js
function displayUserProfile(user) {
  try {
    // Line 5 →             ↓ Column 25 starts here
    const userDetails = user.profile.details; // TypeError occurs here
    
    document.getElementById('profile-name').textContent = userDetails.name;
    document.getElementById('profile-email').textContent = userDetails.email;
  } catch (error) {
    // Extracting useful information from the error
    console.error('Error type:', error.name); // Shows: "TypeError"
    console.error('Error message:', error.message); // Shows: "Cannot read properties of null (reading 'profile')"
    console.error('Where it happened:', error.stack); // Shows the full stack trace
    
    // More user-friendly display
    showErrorToUser('Something went wrong loading your profile. Please try again.');
  }
}

// This would be in userData.js (line 25)
function getUserData(userId) {
  // Several lines of code would be here...
  
  // Line 26 (this is where the stack trace points to)
  return displayUserProfile(fetchUser(userId)); // If fetchUser returns null, this causes the error
}

// This is just a mock function to illustrate the error
function fetchUser(id) {
  // Simulating a situation where the server returns null
  return null; // Missing user data causes our error
}

Code walkthrough:

1. We have a function displayUserProfile that tries to access user.profile.details
2. If user is null (as in our example), this causes a TypeError
3. The catch block captures this error and extracts useful information
4. We log the error type, message, and stack trace to understand what happened
5. We also show a user-friendly message, since users don’t need to see technical details

Real-world example: When your app tries to display a user profile but the server returns null instead of user data (perhaps due to an expired session or deleted account), this TypeError occurs. The stack trace helps you identify that the problem started in the fetchUser function which returned null, then propagated through getUserData to finally cause an error in displayUserProfile. Without proper error handling, users would see a blank screen or cryptic error; with it, they get a helpful message to try again or log back in.

🎥 Video: Reading a Stack Trace

3. Identifying the Source of the Error

Pinpoint where the problem originates. Start from where the error is logged and trace backwards to find the root cause.

function displayUserData(userId) {
  // Add checkpoints to trace the flow
  console.log('1. Starting to fetch user data for ID:', userId);
  
  const userData = fetchUserData(userId);
  console.log('2. Received user data:', userData);
  
  // The error might be happening here if userData is incomplete
  const formattedData = formatUserData(userData);
  console.log('3. Formatted user data:', formattedData);
  
  return renderUserProfile(formattedData);
}

// Helper functions that could contain the bug
function fetchUserData(id) {
  console.log('Fetching data for user:', id);
  // ...fetching logic
}

function formatUserData(data) {
  console.log('Formatting user data, received:', data);
  // ...formatting logic that might fail
}

Code walkthrough:

1. We add numbered console logs as “checkpoints” throughout the code flow
2. Each log shows what stage of the process we’ve reached and what the data looks like at that point
3. By seeing which logs appear and which don’t, we can narrow down where the failure happens
4. We can also inspect the data at each stage to see if it’s what we expect

Real-world example: If your user profile page is showing blank information, these checkpoints help you determine if the problem is with fetching the data, formatting it, or rendering it to the page. If you see log number 1, but not log number 2, you know the problem is in the fetchUserData function.

4. Identifying What Changed Since the Code Last Worked

If the issue is new, figure out what code or environment changes may have led to the issue. Version control systems like Git can help you identify what changed.

# Terminal command to see recent changes to a file
$ git diff HEAD~1 HEAD -- src/components/Cart.js

diff --git a/src/components/Cart.js b/src/components/Cart.js
index a83d991..b4c05e7 100644
--- a/src/components/Cart.js
+++ b/src/components/Cart.js
@@ -42,7 +42,7 @@ function calculateTotal(items) {
   let total = 0;
   for (const item of items) {
-    total += item.price;
+    total += item.price * (item.taxRate || 1);
   }
   return total;
 }

Code walkthrough:

1. The command git diff HEAD~1 HEAD compares the current commit (HEAD) with the previous commit (HEAD~1)
2. The -- flag followed by the file path limits the comparison to just that file
3. The output shows:
   • Lines starting with - were removed (the old version)
   • Lines starting with + were added (the new version)
   • The line numbers help locate exactly where the change was made

In this case, we can see that the calculation changed from simply adding the price to multiplying by a tax rate. If some items don’t have a tax rate defined, this could cause errors. The || 1 fallback was added, but it might not work as expected in all cases.

Real-world example: If your shopping cart suddenly shows incorrect totals after a recent update, this diff immediately reveals that tax calculation was added. You can check if all your product data includes tax rates, or if the fallback value is appropriate for your business logic.

⚠️ Common mistake: When looking at diffs, pay special attention to:

• Added/removed conditions (if statements)
• Changed mathematical operations
• Modified default values
• Renamed variables or properties

5. Simplifying the Problem

Isolate the problematic code. Simplify the scenario to reduce the complexity and focus on the error.

// Complex original function with a bug somewhere
function processUserData(userData) {
  validateUserData(userData);
  transformUserData(userData);
  saveUserToDatabase(userData);
  notifyUserByEmail(userData.email);
}

// Simplified test to isolate the issue
function testTransformFunction() {
  // Create minimal test data
  const testUser = {
    name: "Test User",
    email: "test@example.com"
  };
  
  console.log("Before transformation:", testUser);
  // Test just this one function
  const transformed = transformUserData(testUser);
  console.log("After transformation:", transformed);
  
  // Now we can see if this specific step is the problem
}

Code walkthrough:

1. We have a complex function that does multiple things
2. Instead of debugging the whole process, we create a simple test for just one part
3. We use a minimal test object with only the necessary properties
4. By logging before and after, we can see exactly what the transform function does
5. This helps isolate where the bug might be occurring

Real-world example: If user registration is failing, testing each part separately (validation, transformation, database saving, email notification) helps you find which specific step is causing the problem.

6. Using the Right Tool

Different types of errors may require different debugging tools. Choose the most appropriate tool for the situation.

// For simple value checking: console.log
function checkValues(formData) {
  console.log('Form data received:', formData);
  console.log('Username:', formData.username);
  console.log('Email:', formData.email);
}

// For more complex objects: console.table or console.dir
function inspectComplexData(userData) {
  console.table(userData.permissions); // Shows array data in a table
  console.dir(userData, { depth: 3 }); // Shows object with nested properties
}

// For timing issues: console.time
function checkPerformance() {
  console.time('dataProcessing');
  processLargeDataSet();
  console.timeEnd('dataProcessing'); // Shows how long it took
}

Code walkthrough:

1. Different console methods help with different types of debugging:

   • console.log for basic value checking
   • console.table for inspecting arrays and tabular data
   • console.dir for inspecting complex objects with many properties
   • console.time/timeEnd for measuring how long operations take

2. Choosing the right logging approach makes it easier to understand the data you’re working with

Real-world example: When debugging why a user’s permissions aren’t working, console.table(user.permissions) gives you a clear view of their permission array, making it easier to spot missing entries.

7. General Guidelines on When to Ask for Help

If you’ve exhausted all debugging options or are stuck, asking for help can provide new insights. Remember that getting another perspective is a normal part of development, not a sign of failure.

When to consider asking for help:

• You’ve spent more than 30 minutes trying different approaches without progress
• You’ve googled the error message and tried the common solutions
• You can clearly explain what you’ve already tried and what you’re expecting to happen
• You’ve tried Rubber Ducking.

💡 It may seem tedious to ask the question in this detailed format. However, often, writing down the question will lead you to the solution without even needing help, and you will learn more in the process.

How to ask effectively:

I'm trying to implement a login form, but users with emails containing plus signs (like "user+tag@gmail.com") can't log in. 

The error happens in authenticateUser() when validating the email format.

I've tried:
1. Testing with different email formats
2. Checking the regex pattern in the validator
3. Logging the exact string that's being validated

Here's my code:
[relevant code snippet]

Any suggestions what might be causing this?

What makes this an effective help request:

1. Clear description of the problem
2. Specific information about where the error occurs
3. List of approaches already tried (shows you’ve put in effort)
4. Relevant code snippet (not your entire application)
5. Specific question about what to look for next

Debugging Tools & What They’re Best Used For

1. Console Logging/Print Statements

Console logs are great for tracking variables, function calls, and program flow. They are simple but effective in many cases. Think of console logs as leaving breadcrumbs throughout your code to see where it’s been and what values it’s handling.

// Basic console logging
function processPayment(paymentDetails) {
  console.log('Starting payment processing:', paymentDetails.id);
  
  // Log important values
  console.log('Amount:', paymentDetails.amount);
  console.log('Payment method:', paymentDetails.method);
  
  // Use different console types for different importance levels
  if (!paymentDetails.verified) {
    console.warn('Processing unverified payment:', paymentDetails.id);
  }
  
  // Log groups for related information
  console.group('Customer Information');
  console.log('Name:', paymentDetails.customer.name);
  console.log('Email:', paymentDetails.customer.email);
  console.groupEnd();
  
  // Track performance
  console.time('paymentProcessing');
  const result = processPaymentWithGateway(paymentDetails);
  console.timeEnd('paymentProcessing');
  
  return result;
}

Code walkthrough:

1. We use basic console.log to track the flow of execution and see important values
2. console.warn makes warning messages stand out with yellow highlighting
3. console.group creates collapsible groups of related logs for better organization
4. console.time and timeEnd measure how long a specific operation takes

Best used for:

• Quick checks during development
• Tracking the flow of data through your application
• Understanding which functions are being called and in what order
• Examining values at specific points in your code

Real-world example: When a payment form submission fails, these logs help you track if the payment details were correctly formatted before being sent to the payment processor, how long the payment processing took, and whether any validation warnings occurred.

2. DevTools

Browser DevTools provide powerful features for inspecting elements, tracking network requests, and analyzing performance.

// A function that updates the DOM and makes an API call
function updateUserProfile() {
  // DOM manipulation that you can inspect in Elements tab
  const profileElement = document.getElementById('user-profile');
  profileElement.innerHTML = '<div class="loading">Loading...</div>';
  
  // Network request you can monitor in Network tab
  fetch('/api/user/profile')
    .then(response => response.json())
    .then(data => {
      // DOM update you can see in Elements tab
      profileElement.innerHTML = `
        <div class="profile">
          <h2>${data.name}</h2>
          <p>${data.bio}</p>
        </div>
      `;
    })
    .catch(error => {
      // Error you can see in Console tab
      console.error('Failed to load profile:', error);
      profileElement.innerHTML = '<div class="error">Failed to load profile</div>';
    });
}

How to use DevTools to debug this code:

1. Elements tab: Inspect the profileElement to see if it exists and how its HTML changes
2. Network tab: Watch the fetch request to /api/user/profile to see:
   • If the request was sent correctly
   • What response came back (success or error)
   • How long the request took
3. Console tab: Check for any error messages
4. Sources tab: Set breakpoints in the .then() callbacks to step through the code

Best used for:

• DOM and CSS issues
• Network/API problems
• JavaScript execution step-by-step
• Performance bottlenecks
• Memory leaks

Real-world example: If a user profile isn’t displaying correctly, you can use the Network tab to verify the API returned the expected data, then use the Elements tab to see if the DOM was updated correctly with that data.

3. Debuggers & Breakpoints

💡 It can be challenging to learn the debugger by reading text. It is often easier to see a visual walk through. Here is a video that shows how to use the debugger in VS Code: 🎥 Video: Debugging in VS Code

Breakpoints allow you to pause execution at specific lines of code, enabling you to inspect the current state and understand what’s happening in the program.

function calculateOrderTotal(order) {
  // You would set a breakpoint on the line below in DevTools
  let subtotal = 0;
  
  // Loop through all items (good place for a breakpoint)
  for (const item of order.items) {
    const itemPrice = item.price;
    const quantity = item.quantity;
    
    // Apply item-specific discount if available
    let discount = 0;
    if (item.discountPercent) {
      discount = itemPrice * item.discountPercent / 100;
    }
    
    // Calculate item total (another good breakpoint location)
    const itemTotal = (itemPrice - discount) * quantity;
    subtotal += itemTotal;
  }
  
  // Apply order-level discounts
  let total = subtotal;
  if (order.couponCode === 'SAVE20') {
    total *= 0.8; // 20% off total
  }
  
  // Add tax
  const tax = total * 0.08; // 8% tax
  total += tax;
  
  return total;
}

How to use breakpoints with this code:

1. Open DevTools and go to the Sources tab
2. Find this function in your JavaScript files
3. Click on the line number where you want to pause (e.g., line 5 at the start of the loop)
4. When execution pauses at your breakpoint:
   • Hover over variables to see their current values
   • Step through code line by line using the controls
   • Watch how values change as you move through the code
   • Use the Watch panel to monitor specific expressions

Best used for:

• Complex calculations with multiple steps
• Understanding the exact flow of execution
• Examining all variables at a specific point in time
• Finding where values become unexpected

Real-world example: If an e-commerce shopping cart is calculating incorrect totals, setting breakpoints lets you watch each step of the calculation to pinpoint exactly where discounts or taxes are being applied incorrectly.

4. Frontend vs Backend Debugging

Frontend and backend debugging require different approaches and tools, but the fundamental concepts remain the same.

Frontend Debugging Example

// A React component with potential bugs
function ProductList() {
  const [products, setProducts] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  
  useEffect(() => {
    // Good place to add console logs for debugging
    console.log('ProductList component mounted');
    
    async function fetchProducts() {
      try {
        setLoading(true);
        const response = await fetch('/api/products');
        console.log('API response status:', response.status);
        
        if (!response.ok) {
          throw new Error(`API error: ${response.status}`);
        }
        
        const data = await response.json();
        console.log('Products data received:', data);
        setProducts(data);
      } catch (err) {
        console.error('Error fetching products:', err);
        setError(err.message);
      } finally {
        setLoading(false);
      }
    }
    
    fetchProducts();
  }, []);
  
  // Debugging render logic
  console.log('Rendering ProductList with:', {
    productsCount: products.length,
    loading,
    error
  });
  
  if (loading) return <div>Loading products...</div>;
  if (error) return <div>Error: {error}</div>;
  if (products.length === 0) return <div>No products found</div>;
  
  return (
    <div className="product-grid">
      {products.map(product => (
        <ProductCard key={product.id} product={product} />
      ))}
    </div>
  );
}

Frontend debugging techniques:

1. Console logs at key points in the component lifecycle
2. React DevTools to inspect component props and state
3. Network tab to check API responses
4. Elements tab to verify the rendered output
5. React Error Boundaries to gracefully handle rendering errors

Backend Debugging Example

// Express route handler with debugging
app.post('/api/orders', async (req, res) => {
  console.log('Order request received:', {
    userId: req.body.userId,
    itemsCount: req.body.items?.length || 0,
    headers: req.headers
  });
  
  try {
    // Validate input with detailed logging
    if (!req.body.items || !Array.isArray(req.body.items)) {
      console.warn('Invalid order items format:', req.body.items);
      return res.status(400).json({ error: 'Invalid items format' });
    }
    
    // Log transaction steps
    console.log('Creating order in database...');
    const order = await createOrderInDatabase(req.body);
    console.log('Order created with ID:', order.id);
    
    // Process payment with timing
    console.time('paymentProcessing');
    const payment = await processPayment(req.body.paymentDetails, order.total);
    console.timeEnd('paymentProcessing');
    console.log('Payment result:', payment.status);
    
    return res.status(201).json({
      orderId: order.id,
      status: 'success',
      paymentStatus: payment.status
    });
  } catch (error) {
    console.error('Order processing failed:', error);
    return res.status(500).json({ 
      error: 'Order processing failed',
      message: error.message
    });
  }
});

Backend debugging techniques:

1. Structured logging to track request flow
2. Performance timing for slow operations
3. Log different levels (info, warn, error) for appropriate visibility
4. API test tools like Postman to simulate requests
5. Database query logs to see what’s happening at the database level

5. Rubber Ducking

Explaining your problem out loud, even to an inanimate object like a rubber duck, can help you clarify your thoughts and often leads to discovering the solution on your own.

How to use rubber duck debugging:

1. Get a rubber duck (or any object, or even an empty chair)
2. Explain your code line by line to the duck
3. Describe what each part is supposed to do
4. Explain your understanding of the bug

Why it works:
Verbalizing the problem forces you to:

• Organize your thoughts coherently
• Break down complex problems into smaller parts
• Consider alternatives you might have overlooked
• Spot inconsistencies in your logic

Real-world example: You’ve been struggling with a form validation issue for an hour. As you explain to your rubber duck, “This validation function should check if the email is valid, then it should… oh wait, I’m not actually calling the validation function before submitting the form!” Sometimes the act of explaining reveals the solution.

Common Errors

1. Syntax Errors

Syntax errors occur when the code structure is incorrect (e.g., missing parentheses, unbalanced brackets).

// Common syntax errors
function buggyFunction() {
  // Missing closing parenthesis
  if (user.isLoggedIn {  // Should be if (user.isLoggedIn) {
    console.log("User is logged in");
  }
  
  // Unbalanced brackets
  const userProfile = {
    name: "John",
    email: "john@example.com",
    address: {
      street: "123 Main St",
      city: "Anytown"
    // Missing closing bracket for address
  };
  
  // Using a variable before it's declared
  console.log(total);  // ReferenceError
  const total = calculateTotal();
}

How to identify:

1. Look for error messages like “SyntaxError” or “Unexpected token”
2. Check for highlighted errors in your code editor
3. Look for matching pairs of: (), {}, [], "", '', ``
4. Verify that variables are declared before use

How to fix:

1. Use a code editor with syntax highlighting and auto-formatting
2. Configure ESLint or a similar tool to catch syntax errors
3. Use an editor with bracket matching to find unbalanced brackets
4. Review code carefully after making changes

Real-world example: Your form submission handler suddenly stops working because of a missing closing parenthesis in an if statement. The browser console would show “SyntaxError: Unexpected token ‘{’”, pointing you to check your parentheses.

2. Type Errors

Type errors happen when values are used in a manner that’s inconsistent with their expected type (e.g., trying to call a function on a non-function value).

// Common type errors
function displayUserDetails(user) {
  // TypeError if user is null or undefined
  console.log(user.name);  // Cannot read property 'name' of null/undefined
  
  // TypeError if user.favorites is not an array
  user.favorites.forEach(item => {  // Cannot call forEach of undefined/null/non-array
    console.log(item);
  });
  
  // TypeError if calculateTotal is not a function
  const total = user.calculateTotal();  // calculateTotal is not a function
}

// Safer version with type checking
function saferDisplayUserDetails(user) {
  // Check for null/undefined before accessing properties
  if (user && user.name) {
    console.log(user.name);
  } else {
    console.log('Unknown user');
  }
  
  // Check if favorites exists and is an array
  if (user && Array.isArray(user.favorites)) {
    user.favorites.forEach(item => {
      console.log(item);
    });
  }
  
  // Check if calculateTotal is a function before calling
  if (user && typeof user.calculateTotal === 'function') {
    const total = user.calculateTotal();
  }
}

How to identify:

1. Look for errors like “TypeError: Cannot read property ‘x’ of undefined/null”
2. Check for “is not a function” errors
3. Watch for operations applied to the wrong type (like math on strings)

How to fix:

1. Add null/undefined checks before accessing properties
2. Verify types before performing operations (typeof, Array.isArray())
3. Use optional chaining (?.) for property access when available
4. Add default values with nullish coalescing (??) or OR (||)

Real-world example: Your user profile page crashes when a user without a “favorites” property tries to view it. Adding if (user?.favorites) checks would prevent this error.

3. API Errors

API errors occur when requests to external services fail, often due to network issues, incorrect endpoints, or bad data formats.

// Common API error situations
async function fetchUserData(userId) {
  try {
    // Potential error: incorrect URL format
    const response = await fetch(`/api/users/${userId}`);
    
    // Potential error: Not checking the response status
    // (API might return 404, 403, 500, etc.)
    const data = await response.json();
    return data;
  } catch (error) {
    // Generic error handling doesn't provide useful context
    console.error('Error fetching data');
    return null;
  }
}

// Improved version with better error handling
async function improvedFetchUserData(userId) {
  try {
    // Validate input before making request
    if (!userId) {
      throw new Error('User ID is required');
    }
    
    const response = await fetch(`/api/users/${userId}`);
    
    // Check for HTTP error status
    if (!response.ok) {
      // Try to get error details from response
      const errorData = await response.json().catch(() => null);
      throw new Error(`API error (${response.status}): ${errorData?.message || response.statusText}`);
    }
    
    // Handle case where response is ok but empty
    const data = await response.json();
    if (!data) {
      throw new Error('No data returned from API');
    }
    
    return data;
  } catch (error) {
    // More specific error logging
    if (error.message.includes('API error')) {
      console.error(`API request failed: ${error.message}`);
    } else if (error.name === 'SyntaxError') {
      console.error('Failed to parse API response as JSON');
    } else if (error.name === 'TypeError') {
      console.error('Network error or CORS issue:', error);
    } else {
      console.error('Unknown error in API request:', error);
    }
    
    // Rethrow for caller to handle or return error state
    throw error;
  }
}

Common API issues:

1. Network connectivity problems
2. Authentication/authorization failures (401/403)
3. Resource not found (404)
4. Server errors (500 series)
5. CORS (Cross-Origin Resource Sharing) restrictions
6. Invalid request format
7. Response parsing errors

How to fix:

1. Always check response status codes (not just for exceptions)
2. Implement retry logic for temporary failures
3. Add proper error details to help debug API issues
4. Use the browser Network tab to inspect actual request/response details
5. Add timeout handling for slow requests

Real-world example: Your app shows a blank profile because a user’s profile picture URL is invalid, causing an API error. Better error handling would display a default avatar instead and log the specific error.

4. State Management Issues in React

State issues can arise when data is not correctly passed between components or the state doesn’t update as expected.

// Common React state issues
function Counter() {
  const [count, setCount] = useState(0);
  
  // Issue 1: State updates are asynchronous
  function brokenIncrement() {
    setCount(count + 1);
    setCount(count + 1); // This still uses the original count value!
    console.log(count); // Still shows old value
  }
  
  // Issue 2: Modifying state objects directly
  const [user, setUser] = useState({ name: "John", age: 30 });
  
  function brokenUpdateAge() {
    // This modifies the object but doesn't trigger re-render
    user.age = 31;
    // React doesn't detect this change!
  }
  
  // Issue 3: Missing dependency in useEffect
  useEffect(() => {
    // This won't re-run when count changes!
    document.title = `Count: ${count}`;
  }, []); // Empty dependency array
  
  return (/* component JSX */);
}

// Fixed version
function FixedCounter() {
  const [count, setCount] = useState(0);
  
  // Solution 1: Use functional updates for previous state
  function correctIncrement() {
    setCount(prevCount => prevCount + 1);
    setCount(prevCount => prevCount + 1); // Now uses the updated value
  }
  
  // Solution 2: Create new objects for state updates
  const [user, setUser] = useState({ name: "John", age: 30 });
  
  function correctUpdateAge() {
    // Create a new object to trigger re-render
    setUser({
      ...user, // spread existing properties
      age: 31  // override the age
    });
  }
  
  // Solution 3: Include all dependencies
  useEffect(() => {
    document.title = `Count: ${count}`;
  }, [count]); // Now it re-runs when count changes
  
  return (/* component JSX */);
}

Common React state problems:

1. Not understanding the asynchronous nature of state updates
2. Modifying state objects directly instead of creating new ones
3. Missing dependencies in useEffect
4. Forgetting that state updates trigger re-renders
5. Not cleaning up effects properly (causing memory leaks)

How to fix:

1. Use the functional form of setState when updating based on previous state
2. Never modify state objects directly; create new ones instead
3. Properly list all dependencies in useEffect
4. Use the React DevTools to inspect component state
5. Add cleanup functions to useEffect for subscriptions and timers

Real-world example: A form with multiple fields breaks when you try to update just one field because you’re replacing the entire form state instead of merging the update with existing values. Using setFormData({...formData, [fieldName]: value}) preserves all fields while updating just one.

5. Event Handling Bugs

Event handling issues typically happen when event listeners are set up incorrectly or when event propagation is not handled properly.

// Common event handling issues
function setupEvents() {
  // Issue 1: Adding event listeners without cleanup
  window.addEventListener('resize', handleResize);
  // Memory leak: listener remains even if component is removed
  
  // Issue 2: Event handler scope/this problems
  document.getElementById('button').addEventListener('click', function() {
    this.classList.toggle('active'); // 'this' refers to the button
    
    setTimeout(function() {
      // 'this' now refers to window, not the button!
      this.classList.toggle('active'); // Error!
    }, 1000);
  });
  
  // Issue 3: Not handling event propagation
  document.getElementById('inner').addEventListener('click', handleInnerClick);
  document.getElementById('outer').addEventListener('click', handleOuterClick);
  // Clicking inner also triggers outer click handler!
}

// Fixed version
function improvedSetupEvents() {
  // Solution 1: Store reference for cleanup
  const resizeHandler = () => handleResize();
  window.addEventListener('resize', resizeHandler);
  
  // Cleanup function to prevent memory leaks
  function cleanup() {
    window.removeEventListener('resize', resizeHandler);
  }
  
  // Solution 2: Use arrow functions or bind for correct 'this'
  document.getElementById('button').addEventListener('click', function() {
    const button = this; // Store reference
    button.classList.toggle('active');
    
    setTimeout(() => {
      // Arrow function preserves 'this' from outer scope
      button.classList.toggle('active'); // Works correctly
    }, 1000);
  });
  
  // Solution 3: Handle event propagation
  document.getElementById('inner').addEventListener('click', (e) => {
    e.stopPropagation(); // Prevents event from bubbling up
    handleInnerClick();
  });
}

Common event handling issues:

1. Memory leaks from not removing event listeners
2. ‘this’ context problems in event handlers
3. Event bubbling/propagation unexpected behavior
4. Events firing multiple times
5. Events not working for dynamically added elements

How to fix:

1. Always remove event listeners when components unmount
2. Use arrow functions to preserve the correct ‘this’ context
3. Be deliberate about event propagation with stopPropagation()
4. Use event delegation for dynamically added elements
5. Watch for duplicate event binding

Real-world example: A modal close button works the first time but not after reopening the modal because the event listener is added each time the modal opens but never removed, causing multiple overlapping handlers.

6. Database Errors

Database errors may occur due to incorrect queries, missing data, or connectivity issues.

// Common database operation issues
async function getUserOrders(userId) {
  try {
    // Issue: Not handling connection errors
    const orders = await db.collection('orders')
      .find({ userId: userId })
      .toArray();
    
    // Issue: Not checking if orders exist
    return orders[0]; // Error if orders is empty array
  } catch (error) {
    console.error('Database error');
    // No details on what went wrong
  }
}

// Improved version
async function improvedGetUserOrders(userId) {
  try {
    // Input validation
    if (!userId) {
      throw new Error('User ID is required');
    }
    
    // Specific error handling with details
    const orders = await db.collection('orders')
      .find({ userId: userId })
      .toArray()
      .catch(err => {
        throw new Error(`Database query failed: ${err.message}`);
      });
    
    // Check results
    if (!orders || orders.length === 0) {
      return { orders: [], message: 'No orders found for this user' };
    }
    
    return { orders, count: orders.length };
  } catch (error) {
    // Log specific error details
    console.error(`Order lookup failed for user ${userId}:`, error.message);
    
    // Return structured error response
    return { 
      error: true, 
      message: 'Failed to retrieve orders',
      details: error.message 
    };
  }
}

Common database issues:

1. Connection failures or timeouts
2. Missing or invalid credentials
3. Query syntax errors
4. Schema validation failures
5. Trying to access non-existent collections or fields
6. Race conditions in concurrent operations
7. Transaction failures

How to fix:

1. Add specific error handling for database operations
2. Validate input data before database operations
3. Check for null/empty results before using them
4. Add logging at key points in database operations
5. Use transactions for operations that must succeed or fail together
6. Implement retry logic for temporary failures

Real-world example: An order submission fails silently because the database connection times out, but without proper error handling, the user just sees a spinning loading indicator forever. Better error handling would show a “Please try again” message and log the specific timeout error.

References

• 🎥 Video: Debugging Step-by-Step (30 mins)
• 📖 Docs: Debugging in JavaScript
• 📝 Article: Most Effective Front-End Debugging Techniques
• 🔧 Tool: Chrome DevTools Documentation
• 📖 Book: Debugging: The 9 Indispensable Rules for Finding Even the Most Elusive Software and Hardware Problems