Browser DevTools: a first peek

1. The promise

You'll be able to open the browser developer tools, recognise the Elements, Console, Network, and Sources tabs, and read each one well enough to know what you're looking at — even though you can't do anything useful with them yet.

2. The mental model

DevTools is an X-ray machine for the web.

Every web page is a stack of layers: the HTML (the structure), the CSS (the styling), the JavaScript (the behaviour), and the network traffic that delivered all of it. DevTools shows each layer separately so you can see what's really going on behind a page.

(DIAGRAM: DevTools tabs and what each shows — annotated SVG — tab strip with each tab (Elements, Console, Sources, Network, Application, Performance, Memory) labelled with the layer it inspects)

The vocabulary, said properly:

• DevTools is the developer tools panel built into every modern browser.
• An element is one piece of the page's structure (a heading, a paragraph, a button). We dig into elements in Ch 4.
• The Console is a JavaScript prompt that runs against the current page. We meet JavaScript properly in Ch 6.
• A request is one thing the browser asked a server for — the page itself, a stylesheet, an image. We cover requests in Ch 3.

3. You do it, with me

Step 1. Open a real site. Go to a news article — https://news.ycombinator.com or any newspaper site. We need a real page, not a blank tab.

Step 2. Open DevTools. Press Cmd+Option+I (macOS) or F12 (Windows). A panel opens, usually at the bottom or on the right.

Step 3. Dock it on the right. Click the three-dot menu in the top-right of the DevTools panel -> Dock side -> right. Your page is now on the left, DevTools on the right.

(SCREENSHOT: Chrome with DevTools open, docked to the right — Elements tab — full window)

You should be looking at the Elements tab. The page's structure is on the left side of DevTools. CSS styles are on the right side.

Step 4. The four tabs that matter today. Click through them one at a time. Don't try to use them yet — just recognise them.

• Elements — the HTML and CSS of the page, live. Click a tag in the panel and the corresponding part of the page lights up.
• Console — a place where you can type JavaScript and watch it run against this page.
• Sources — the files (HTML, CSS, JS, images) that the browser downloaded to render this page.
• Network — every single request the browser made.

Three more tabs that exist but we'll skip for now: Application (storage, cookies), Performance (timing data), Memory (heap snapshots).

Step 5. Elements — hover and watch. In the Elements panel, hover over an <h1> tag in the HTML. The matching headline on the page is outlined.

(SCREENSHOT: Chrome Elements tab — hovering over an h1 in the panel — the corresponding headline highlighted on the page — full window)

That's the whole game with Elements. Click on an element in the panel, see it on the page. Click on something on the page (with the "inspect" arrow in the top-left of DevTools), see it in the panel. It's a two-way mirror between code and visible page.

Step 6. Console — your first line of JavaScript. Click the Console tab. Click the prompt at the bottom (it shows a > symbol). Type 1 + 1 and press Enter.

(SCREENSHOT: DevTools Console tab with 1 + 1 typed and 2 shown as the result — full window)

The answer is 2. The Console is a JavaScript prompt running against this page. It's how every developer pokes at a live page to see what's going on. You'll spend a lot of time here from Ch 6 onwards.

Step 7. Network — watch the page load. Click the Network tab. While Network is open, reload the page (Cmd+R / Ctrl+R).

A list fills up with every request. The first row is usually the HTML page itself. Then come stylesheets, scripts, images, fonts, tracking pixels.

(SCREENSHOT: DevTools Network tab during a page reload — full window — list of requests visible)

Click one row. A side panel opens showing the Headers of the request and response, the Preview of what came back, and the raw Response body.

(SCREENSHOT: DevTools Network tab with one request selected — Headers panel visible — full window)

You won't read these properly until Ch 3. Right now: notice that a single news article can make a hundred network requests. That's normal.

Step 8. Sources — the files. Click the Sources tab. A file tree on the left shows every file the browser downloaded. Click an HTML file or a JS file to see its contents.

(SCREENSHOT: DevTools Sources tab — full window — file tree on the left visible)

Step 9. Mobile preview. Press Cmd+Shift+M (macOS) or Ctrl+Shift+M (Windows) to toggle the device toolbar. The page resizes to phone width. You can pick "iPhone" or "iPad" or any preset from the dropdown.

(SCREENSHOT: DevTools device toolbar mode active, simulating an iPhone — full window)

This is how you test if a website looks right on a phone without having a phone in your hand. It's not perfect — it doesn't simulate touch correctly, doesn't run a real phone GPU — but it's good enough for fast iteration.

4. What you should be seeing

DevTools open, docked on the right. You can click through the Elements, Console, Sources, and Network tabs and name what each one shows. The Console returned 2 when you typed 1 + 1. The Network tab filled with rows when you reloaded.

You also know the device toolbar exists. You haven't used it for anything serious yet.

5. Common stumbles

• You opened DevTools, saw a wall of code, and closed it forever. Don't. Open it again. You're not meant to understand it on day one. You're meant to recognise four tabs. That's the only goal for now.
• You undocked DevTools (or accidentally moved it to a separate window) and can't get it back. Three-dot menu in DevTools -> Dock side -> pick right or bottom. Same way you opened the dock menu earlier.
• F12 doesn't work on a macOS laptop. The F-row often controls brightness or volume by default. Use Cmd+Option+I instead. Or hold Fn while pressing F12.
• "I think I broke the page by editing in Elements." You didn't. Edits in the Elements tab are local to your browser only. They disappear the moment you reload. Nobody else sees them. Reload the page and everything resets.

6. You should know