Store My Library Blog

Using Chrome DevTools: Your Secret Debugging Weapon

Every developer's most-used tool isn't their code editor - it's their browser's developer tools (DevTools). These tools let you inspect, debug, and understand what's happening on any webpage.

Why DevTools Matter

Professional developers spend more time debugging than writing new code.

DevTools let you:

  • See exactly what your HTML looks like to the browser
  • Test CSS changes in real-time
  • Find and fix JavaScript errors
  • Understand how any website is built
  • Debug why something isn't working

This guide focuses on Chrome, but Firefox, Safari, and Edge have similar tools.

Opening DevTools

Three Ways to Open DevTools:

  1. Right-click on any webpage → Inspect
  2. Press F12 (Windows/Linux) or Cmd+Option+I (Mac)
  3. View menu → Developer → Developer Tools

You'll see a panel appear - this is DevTools!

The Main Tabs You Need to Know

1. Elements Tab: Inspect HTML & CSS

What it does: Shows you the HTML structure of the page and all CSS applied to each element.

How to Use It:

Inspect Any Element:

  1. Click the Select Element icon (top-left corner of DevTools)
  2. Hover over elements on your page
  3. Click an element to inspect it

You'll see:

  • The HTML code for that element
  • All CSS styles applied to it
  • The box model (margin, padding, border, content)

Edit HTML in Real-Time:

  1. Right-click any HTML element in the Elements tab
  2. Choose Edit as HTML
  3. Make changes and press Ctrl+Enter (or Cmd+Enter on Mac)
  4. See your changes instantly!

Note: These changes are temporary - refresh the page and they're gone. This is for testing only!

Edit CSS in Real-Time:

In the Styles panel (right side):

  1. Click on any CSS value to edit it
  2. Type new values and see changes instantly
  3. Check/uncheck boxes to enable/disable specific styles
  4. Click the + to add new CSS rules

This is AMAZING for:

  • Testing different colors, fonts, or spacing
  • Understanding what CSS does what
  • Experimenting before changing your actual code

View the Box Model:

Scroll down in the Styles panel to see the box model diagram:

  • Blue = content size
  • Green = padding
  • Orange = margin
  • Border = border

Hover over elements to see their box model highlighted on the page!

2. Console Tab: JavaScript Errors and Testing

What it does: Shows JavaScript errors, lets you run JavaScript commands, and displays console.log() messages.

See JavaScript Errors:

When your JavaScript breaks, you'll see errors in red here:

Uncaught TypeError: Cannot read property 'addEventListener' of null
    at script.js:3

This tells you:

  • What went wrong: "Cannot read property 'addEventListener' of null"
  • Where: script.js line 3

Click the filename to jump to the exact line!

Test JavaScript in Real-Time:

You can type JavaScript directly into the console:

// Try these:
console.log('Hello from console!');

// Get an element
document.getElementById('magicButton');

// Change something on the page
document.body.style.backgroundColor = 'lightblue';

// Do math
2 + 2

// Create variables
let x = 10;
x * 5

This is AMAZING for:

  • Testing code before adding it to your file
  • Checking if variables have the right values
  • Understanding what a function returns

Using console.log() for Debugging:

Add this to your JavaScript:

const button = document.getElementById('magicButton');
console.log('Button:', button);  // See what 'button' contains

let count = 0;
button.addEventListener('click', function() {
    count = count + 1;
    console.log('Count is now:', count);  // Track what's happening
});

3. Sources Tab: Debug JavaScript Step-by-Step

What it does: Lets you pause JavaScript execution and step through code line by line.

Set a Breakpoint:

  1. Go to Sources tab
  2. Find your script.js in the file tree on the left
  3. Click on a line number to set a breakpoint (blue marker appears)
  4. When your code reaches that line, it will pause
  5. You can now:
    • Hover over variables to see their values
    • Click "Step Over" to run the next line
    • Check what's happening at each step

This is AMAZING for: Understanding why your code doesn't do what you expect.

4. Network Tab: See What Files Load

What it does: Shows every file your webpage loads (HTML, CSS, JS, images, etc.).

How to Use It:

  1. Open Network tab
  2. Refresh your page
  3. See all files that loaded, how long each took, and if any failed

This is AMAZING for:

  • Seeing if your CSS or JS files are loading
  • Finding 404 errors (missing files)
  • Understanding why your page is slow

5. Application Tab: Storage and More

What it does: Shows cookies, local storage, and other data stored by your website.

You won't need this much as a beginner, but it's useful for:

  • Seeing what data is stored in your browser
  • Clearing cache and storage when testing