Skip to content

Browser DevTools

Learn to use browser DevTools — the built-in toolkit for inspecting, debugging, and profiling web pages.

What you'll learn

  • What DevTools are and how to open them
  • The Elements panel for inspecting HTML and CSS
  • The Console for running JavaScript and reading errors
  • The Network panel for watching HTTP requests

Concept

Browser DevTools

DevTools are the built-in developer tools in every modern browser. Press F12 or Ctrl+Shift+I (Cmd+Option+I on Mac) and a panel opens with everything you need to inspect, debug, and optimize a web page. They are the most important tool in a web developer's daily workflow — and they are free and always available.

Opening DevTools

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

The Core Panels

Elements — inspect and edit the live DOM and CSS. Hover over elements to highlight them on the page. Edit styles in real time and see the result instantly — perfect for tweaking layout. Changes do not persist (they reset on reload), so copy them to your source files.

Console — run JavaScript in the page's context and read messages. console.log output, errors, and warnings all appear here. You can also type expressions to inspect variables or test functions. The Console is your REPL for the page.

Network — watch every HTTP request the page makes. See the URL, method, status code, size, and timing. Click a request to inspect its headers and response body. This is how you debug API calls and slow loading.

Sources — view the page's JavaScript source, set breakpoints, and step through execution. Breakpoints pause the code so you can inspect variables at that moment — far more powerful than console.log.

Application — inspect storage: cookies, localStorage, IndexedDB, and the cache. Useful for debugging authentication and offline behavior.

A Daily Workflow

  1. Something looks wrong → open Elements, find the element, tweak CSS live.
  2. A button does not work → open Console, look for errors, test the handler.
  3. Data does not load → open Network, find the failed request, read the status and response.
  4. Logic is wrong → open Sources, set a breakpoint, step through and inspect variables.

DevTools turn guessing into seeing. The faster you are with them, the faster you debug.

Example

              // Code you might debug in DevTools.
// Set a breakpoint on the line inside the handler to inspect 'items'.

function renderCart(items) {
  const total = items.reduce((sum, i) => sum + i.price * i.qty, 0);
  console.log("Cart total:", total);  // visible in the Console panel
  document.getElementById("cart-total").textContent = `$ ${total.toFixed(2)}`;
}

// In the Console, you can run this directly to test:
// renderCart([{ price: 10, qty: 2 }, { price: 5, qty: 1 }])

console.log output appears in the Console panel. Set a breakpoint on the reduce line in the Sources panel to pause execution and inspect the items array — no logging needed.

Try it

  • Markdown Previewer

    Open this tool, then open DevTools → Network. Type in the box and watch: no network requests — it all runs client-side.

  • JSON Formatter

    Open DevTools → Elements on this page. Inspect the formatted JSON output to see how the DOM is structured.

Common mistakes

The mistake

Relying only on console.log instead of learning breakpoints.

The fix

Breakpoints pause execution and let you inspect all variables at that point, step line by line, and watch expressions. They are far more efficient than sprinkling logs everywhere.

The mistake

Forgetting that DevTools CSS changes do not persist.

The fix

DevTools edits are live but temporary — they vanish on reload. Once you find the right values, copy them into your .css file. Use DevTools as a scratchpad, not a source of truth.

Related Resources

Related Cheatsheets

Look up unfamiliar terms

A beginner-friendly glossary explains jargon in plain English — variables, functions, DOM, Promise, and more.

View glossary

Build real projects

Apply what you learned by building guided projects with starter code and solutions.

View projects

Decode error messages

Plain-English explanations of common errors — what they mean, why they happen, and how to fix them.

View errors