All posts
4 min read

Browser Developer Tools for Beginners: The Five Tabs That Matter

Every browser has a built-in toolkit that shows what your app is really doing. How to open DevTools, and how to use the Elements, Console, Network, Application, and device-mode views to find bugs and give your AI tool something useful to work with.

getting starteddebuggingtoolingbeginner

When your app misbehaves in the browser, you don't have to guess. Chrome, Edge, Firefox, and Safari all include developer tools (DevTools) that show you the page's structure, its errors, every request it makes, and what it has stored. Five minutes learning them saves hours of "it just doesn't work."

Opening DevTools

  • Windows / Linux: F12, or Ctrl + Shift + I
  • Mac: Cmd + Option + I
  • Anywhere: right-click something on the page → Inspect

In Safari, first turn on Show features for web developers in Settings → Advanced.

A panel opens with a row of tabs. The names below are Chrome's; other browsers are very similar.

1. Elements: what's on the page

The Elements tab shows the page's HTML as a tree, and the CSS applied to whatever you select.

Use it to:

  • Find out why something looks wrong. Select an element and the Styles pane shows every CSS rule affecting it, including ones crossed out because something else overrides them.
  • Try fixes live. Edit text, change a colour, or tweak spacing right there. Nothing is saved — reload and it's gone — but it's the quickest way to find the value you want before asking your AI tool to make it permanent.
  • Find hidden elements that are on the page but invisible.

The mouse-pointer icon at the top-left of DevTools lets you click any element on the page to jump to it.

2. Console: errors and messages

The Console shows JavaScript errors, warnings, and anything the code prints with console.log.

Red text is the first place to look when a page is blank or a button does nothing. A typical error:

Uncaught TypeError: Cannot read properties of undefined (reading 'map')
    at ProductList (ProductList.jsx:14:22)

That tells you what went wrong, and where — file and line. Copy the whole thing, including the lines below it, when asking for help. (How to Read an Error Message.)

You can also type JavaScript directly into the console to test things, like document.title or localStorage.

3. Network: every request the page makes

The Network tab lists every file and data request: HTML, scripts, images, and — most usefully — calls to your API.

Open it, then reload the page (it only records while open). For each request you see:

  • Status — 200, 404, 500… Red means failed. (HTTP Status Codes Explained.)
  • Type and size.
  • Time — how long it took. Great for finding what's slow.

Click a request to see:

  • Headers — the URL, method, and what was sent.
  • Payload — the data your app sent (form contents, JSON).
  • Response — exactly what came back.

This is where you find the truth about bugs like "I click Save and nothing happens." Does a request go out at all? Does it return an error? Does the response contain what the page expects?

Useful filters: Fetch/XHR shows only API calls. Preserve log keeps requests across page navigations — essential when debugging login redirects.

4. Application: what's stored

The Application tab (Storage in Firefox) shows what the site has saved in your browser:

  • Cookies — including login session cookies. (What Is a Cookie?.)
  • Local storage and session storage — data apps keep between visits.
  • Service workers and cached files.

Two tricks:

  • Clear site data (under Storage) resets everything for the site — like visiting for the first time. Great for testing sign-up flows and for "it works in incognito but not normally" bugs.
  • Check that nothing sensitive, like an API key, is sitting in local storage. (How to Keep API Keys Out of an AI-Built App.)

5. Device mode: test on a "phone"

The phone-and-tablet icon at the top-left of DevTools toggles device mode, which resizes the page to a phone or tablet. Pick a device from the dropdown, or drag the edges. It's not a perfect substitute for a real phone, but it catches most layout problems. (Responsive Design Basics.)

The Network tab also has a throttling option ("Slow 4G") to see how your app feels on a poor connection.

Bonus: Lighthouse

The Lighthouse tab runs an automatic audit of performance, accessibility, SEO, and best practices, with specific suggestions. Run it in an incognito window so browser extensions don't skew the results. (Why Is My Website Slow?.)

Giving your AI tool useful information

When you ask Claude Code or another assistant to fix a browser bug, DevTools turns "it's broken" into evidence:

  1. The exact console error, copied in full.
  2. The failing network request: its URL, status code, and response body.
  3. What you expected versus what happened.

With those three, most front-end bugs get fixed on the first try.

EasySpawn runs your app on a real HTTPS address from its persistent workspace, so you can open DevTools against the deployed version — not just localhost — and hand Claude Code the real errors. See how it works or join the waitlist.

Related: Debugging for Beginners · HTML, CSS, and JavaScript Explained · Why Is My Website Slow?

Keep reading