Debugging with Browser Developer Tools

When you write code, bugs are inevitable. The screen looks different from intended, buttons don't respond, or data doesn't load. The first thing a developer does is — open the browser Developer Tools (DevTools).

Just as you look through a microscope when experiment results are strange, you look through DevTools when web issues arise. It's built into all modern browsers (Chrome, Edge, Safari, Firefox) — nothing to install.

Opening DevTools

Mac:     ⌘ + Option + I
Windows: F12 or Ctrl + Shift + I

Or: Right-click on any webpage → "Inspect"

When DevTools opens, you'll see several tabs. We'll learn the three most commonly used.

Elements Tab: Viewing HTML/CSS Structure

The Elements tab shows the current page's HTML structure and CSS styles in real time. Like looking at the current state of your lab notebook.

What you can do:

1. Check HTML structure — See which tags are where and how they're nested in a tree format

2. Edit CSS in real time — Change CSS values directly in the right panel and see results immediately. "What if I change this padding to 20px?" → Instant check → If you like it, apply to your code

3. Select elements — Click the cursor icon at the top-left of DevTools (or ⌘ + Shift + C), then clicking any page element highlights it in the Elements tab

Practical example:

Problem: "I changed the font size but it's not applying"

1. Right-click the element → Inspect
2. Element is selected in the Elements tab
3. Check the Styles panel on the right
4. My CSS has a strikethrough → another CSS rule is overriding it
5. Find which CSS is overriding and fix it

Console Tab: Running JavaScript and Checking Errors

The Console tab is JavaScript's microscope. It serves two purposes.

1. Checking error messages

When JavaScript errors occur, they appear in red in the Console:

❌ Uncaught TypeError: Cannot read properties of undefined (reading 'length')
     at calculateGC (script.js:15:28)

This means "at line 15 of script.js, it tried to read .length on something undefined." Just being able to read error messages gets you halfway through debugging.

2. Running code directly

You can type and execute JavaScript code directly in the Console:

// Type directly in Console
document.title
// → "Western Blot Protocol"

document.querySelectorAll("li").length
// → 9 (number of list items)

2 + 2
// → 4

Useful for checking variable values, exploring DOM elements, or doing quick calculations.

Viewing Console and Elements together:

You can show the Console while viewing the Elements tab:

• Press Esc to toggle the Console drawer at the bottom
• Press Esc again to close it

This lets you browse HTML structure while simultaneously running JavaScript.

Network Tab: Tracking API Calls

The Network tab shows every request the browser exchanges with servers. When you call an API with fetch or Ajax, you can verify if the request went through and what the response contains.

What you can do:

1. View request list — All files loaded during page load (HTML, CSS, JS, images, API responses) listed chronologically

2. Check API responses — Click a specific request to see Headers (request/response headers), Preview (response preview), and Response (raw response)

3. Check status codes — 200 (success), 404 (not found), 500 (server error) visible at a glance

Practical example:

Problem: "I'm fetching sample data but only getting a blank screen"

1. Open Network tab
2. Refresh the page (⌘ + R)
3. Find the /api/samples request
4. Check status code:
   - 404 → URL is wrong or route doesn't exist on the server
   - 500 → Server code error (check server logs)
   - 200 but empty array → No data or DB query issue
5. Check actual response data in the Response tab

Application Tab: Checking Stored Data

The Application tab lets you view and modify cookies, localStorage, and session storage.

You can see how cookies from the auth-cookies topic are actually stored:

Application → Cookies → localhost
→ session_id: abc123
→ Path: /
→ HttpOnly: ✓

DevBench learning progress is also stored in localStorage. Check it under Application → Local Storage.

3-Step Debugging Checklist

When something goes wrong, check in this order:

Step 1: Check Console (any red errors?)

• If yes → Read the error message → Check filename:line number → Fix that code
• If no → Go to step 2

Step 2: Check Network (did the API request succeed?)

• 404/500 → Server-side issue
• 200 but data looks wrong → Check Response
• No request at all → fetch code didn't execute → Check Console

Step 3: Check Elements (is the element on the page?)

• Element exists but isn't visible → CSS issue (display: none, zero size, opacity, etc.)
• Element doesn't exist → JavaScript failed to add it to the DOM

These three steps alone can diagnose most web development issues.

Try It Yourself (Faded Example)

Fill in the blanks to complete debugging code you'd run in DevTools Console.

// 1. Count all h2 tags on the page
document.querySelectorAll("").length
// 2. Check text of element with id "result"
document.("result").innerText
// 3. Check the type of a variable
 odValue
// → "number"

Common Errors & Solutions

Q: I opened DevTools but the Network tab is empty

The Network tab only records requests made after it's opened. Open DevTools first, then refresh the page (⌘ + R).

Q: Console shows many errors but I don't know which are mine

Browser extensions (ad blockers, etc.) often generate errors. Opening in incognito mode (⌘ + Shift + N) lets you test without extensions.

Q: I edited CSS in Elements but it reverts after refresh

Changes in DevTools are temporary. Once you find values you like, apply them to your actual CSS file. DevTools is for "experimenting," your code files are "permanent storage."