Intro to Debugging with DevTools

When you're coding in JavaScript, things don’t always work the way you expect. That’s where debugging comes in. Debugging is simply the process of finding and fixing problems in your code. Luckily, modern browsers like Chrome come with powerful built-in tools, called DevTools, that make this job much easier.

Debugging is a skill that gets better with practice. When you run into a bug, it's easy to feel frustrated, but following some simple best practices can make the process faster and less stressful. Good debugging habits not only help you find mistakes but also teach you how to write cleaner code in the future.

Console tab walkthrough

The Console tab in DevTools is your best friend when debugging. It shows you errors, warnings, and any output you send using console.log(). You can use it to check the value of variables, see error messages, and even run small pieces of JavaScript directly inside the browser.

Example:

javascript
1
          console.log("Hello World");

You can open DevTools by right-clicking on a page and selecting "Inspect", then going to the Console tab. If your JavaScript has an error, it will show up there with a message and a link to the exact line in your code.

Using breakpoints

Breakpoints let you pause your code at a specific line so you can see exactly what’s happening at that moment. To set a breakpoint:

  1. 1
    Go to the Sources tab in DevTools.
  2. 2
    Find your JavaScript file.
  3. 3
    Click on the line number where you want to pause.

When you reload the page, the code will stop at that line. You can then step through your code line by line and watch how variables change.

This helps you catch problems that are hard to see with console.log() alone.

Watching variables

Once your code is paused at a breakpoint, you can watch variables in real time.

In DevTools:

  • Hover over any variable to see its current value.
  • Or, add it to the Watch panel to keep an eye on it as you step through the code.

Watching variables is super useful when you're trying to figure out why something isn't behaving the way you expect.

Using the Network Tab for Debugging APIs

If your JavaScript code is fetching data from a server (like using fetch()), the Network tab helps you see the requests and responses. You can check if your request was successful, what data came back, or why it might have failed. This is very helpful when working with APIs.