How do I open DevTools in Chrome?

Press F12, Ctrl+Shift+I (Windows/Linux), or Cmd+Option+I (Mac). You can also right-click on any element and select "Inspect".

What is the difference between console.log() and breakpoints?

console.log() outputs values to the console, while breakpoints pause code execution so you can inspect variables and step through code line by line. Breakpoints are more powerful for complex debugging.

Can I debug minified JavaScript code?

Yes, using source maps. Source maps map minified code back to your original source files, allowing you to debug the readable version. Enable them in DevTools Settings → Sources → Enable JavaScript source maps.

How do I debug errors that only happen in production?

Use source maps with your production build, enable remote debugging, or use error tracking services. You can also add console.error() statements that log to external services for production debugging.

What should I do if DevTools shows no errors but code still doesn't work?

Check for logic errors by setting breakpoints and stepping through code. Inspect variable values, check network requests in the Network tab, and verify that event handlers are properly attached.

How to Debug JavaScript Errors Using Browser DevTools (Complete Guide)

JavaScript errors can be frustrating, but with the right debugging tools, you can quickly identify and fix issues in your code. Browser DevTools are powerful debugging utilities built into every modern browser, and mastering them is essential for every developer.

In this comprehensive guide, you'll learn how to use Chrome DevTools, Firefox DevTools, and Edge DevTools to debug JavaScript errors, set breakpoints, inspect variables, and troubleshoot production issues. We'll cover everything from basic console debugging to advanced techniques like source maps and performance profiling.

💡 Quick Tip

Use our free JSON Validator to check API responses and our JSON Formatter to debug JSON data structures.

Definition: What Are Browser DevTools?

Browser DevTools (Developer Tools) are integrated debugging and development utilities built into modern web browsers. They provide developers with powerful features to inspect, debug, and optimize web applications directly in the browser.

DevTools typically include:

Console

View errors, logs, and execute JavaScript commands

Debugger

Set breakpoints and step through code execution

Inspector

Inspect DOM elements and CSS styles

Network

Monitor HTTP requests and responses

What Can You Debug with DevTools?

DevTools can help you debug a wide range of JavaScript issues:

Runtime Errors

TypeError, ReferenceError, SyntaxError, and other JavaScript exceptions

Logic Errors

Incorrect variable values, wrong function outputs, and unexpected behavior

Performance Issues

Slow code execution, memory leaks, and inefficient algorithms

API Issues

Failed requests, incorrect responses, and network errors

When Should You Use DevTools?

Use browser DevTools in these scenarios:

Code isn't working as expected - When your JavaScript produces incorrect results or doesn't execute

Console shows errors - When you see red error messages in the browser console

Debugging production issues - When users report bugs that you can't reproduce locally

Understanding third-party code - When you need to inspect libraries or frameworks

Performance optimization - When your app is slow or consuming too much memory

How to Debug JavaScript Errors: Step-by-Step Guide

Step 1: Open DevTools

Chrome/Edge:

Press F12 or Ctrl+Shift+I (Windows/Linux)
Press Cmd+Option+I (Mac)
Right-click → "Inspect" or "Inspect Element"

Firefox:

Press F12 or Ctrl+Shift+I
Press Cmd+Option+I (Mac)

Step 2: Check the Console Tab

The Console tab shows all JavaScript errors, warnings, and log messages. Here's what to look for:

❌ TypeError: Cannot read property 'map' of undefined

⚠️ Warning: Unused variable 'x'

ℹ️ Info: API request completed

Tip: Click on any error to jump to the source code location. The error message shows the file name, line number, and column.

Step 3: Use Breakpoints

Breakpoints pause code execution at specific lines, allowing you to inspect variables and step through code:

Open Sources Tab

Navigate to Sources (Chrome) or Debugger (Firefox) tab

Find Your File

Use the file tree to locate your JavaScript file

Set Breakpoint

Click on the line number where you want to pause execution

Trigger the Code

Perform the action that executes your code (click button, load page, etc.)

Breakpoint Controls:

Resume: Continue execution

Step Over: Execute current line

Step Into: Enter function calls

Step Out: Exit current function

Step 4: Inspect Variables

When paused at a breakpoint, you can inspect variable values in the Scope panel:

Scope

Local

user: { name: "John", age: 30 }

count: 5

isActive: true

You can also hover over variables in the code editor or type variable names in the Console to see their values.

Step 5: Use Console Commands

The Console allows you to execute JavaScript commands and inspect values:

// Check variable value

> console.log(user)

{ name: "John", age: 30 }

// Call functions

> calculateTotal(10, 20)

// Inspect DOM elements

> document.querySelector('.button')

<button class="button">Click me</button>

Debugging Workflow Flow

Open DevTools

Press F12 or right-click → Inspect

Check Console for Errors

Look for red error messages

Set Breakpoints

Click line numbers in Sources tab

Inspect Variables

Check Scope panel or hover over variables

Fix and Test

Make changes and verify the fix

Why Use DevTools for Debugging?

Faster Debugging

Identify errors in seconds instead of hours of guesswork

Real-Time Inspection

See variable values and code execution as it happens

No Code Changes Needed

Debug without modifying your source code

Production Debugging

Debug issues that only occur in production environments

Advanced Debugging Techniques

1. Conditional Breakpoints

Set breakpoints that only trigger when specific conditions are met:

// Right-click breakpoint → Edit breakpoint

// Condition: user.age > 18

// Only pauses when user is over 18

2. Watch Expressions

Monitor specific expressions or variables throughout execution:

// In Watch panel, add:

user.name + " " + user.age

// Updates automatically as code runs

3. Source Maps

Debug minified code by mapping it back to original source files. Enable in Settings → Sources → Enable JavaScript source maps.

4. Network Tab for API Debugging

Debug API calls by inspecting requests and responses:

Tip: Use our JSON Validator to validate API responses and our JSON Formatter to format response data for easier debugging.

Common JavaScript Errors and Solutions

Error Type	Common Cause	How to Debug
TypeError	Accessing property of undefined/null	Check variable value in Scope panel, add null checks
ReferenceError	Using undefined variable	Check variable declaration, verify scope
SyntaxError	Invalid JavaScript syntax	Console shows exact line and character
RangeError	Invalid array length or number	Inspect array/number values at breakpoint

Best Practices for Debugging

Use console.log() Strategically

Add temporary logs to track execution flow, but remove them before committing code

Enable Source Maps

Always enable source maps in development to debug original source code

Use Descriptive Variable Names

Clear variable names make debugging easier when inspecting values

Test in Multiple Browsers

Different browsers may show different error messages or behaviors