Browser DevTools

Every modern browser has developer tools (DevTools) built in. They let you look inside any web page and fix problems quickly.

Opening DevTools

• Press F12 or Ctrl+Shift+I (Cmd+Option+I on a Mac)
• Or right-click any part of a page and choose Inspect

This lesson uses Chrome, but Edge has the same tools, and Firefox is very similar.

The Main Panels

Elements: Edit HTML and CSS Live

Right-click a heading and choose Inspect. The Elements panel highlights its HTML. On the right, the Styles pane shows every CSS rule that applies.

• Double-click text or an attribute to edit it
• Click a CSS value to change it, for example a colour or a font size
• Tick or untick a checkbox to turn a CSS rule on and off
• Crossed-out rules are being overridden by another rule

The Computed tab and the box model drawing show the final size, padding, border and margin of an element, which is very helpful for layout problems.

Console: Errors and JavaScript

Red messages in the Console are errors, with the file and line number. Click the link to jump to the exact line.

You can also type JavaScript and run it on the current page:

document.querySelectorAll("a").length

47

That counts the links on the page; your number depends on the page. Some useful commands:

console.log("Hello from the console");
document.body.style.background = "lightyellow";
$0.textContent

Hello from the console
'Admissions Open'

$0 is the element you last selected in the Elements panel. In your own code, console.log() prints values here, which is the simplest way to check what your code is doing.

Network: See Every Request

Open the Network panel and reload the page. Each row is one file or request.

Click a row to see its headers and response. If your API data does not appear on the page, check here first: is the request sent, and what did the server answer?

Use the Throttling menu (No throttling, Fast 4G, Slow 4G, 3G) to test how your site feels on a slow mobile connection.

Device Mode: Test Mobile Layouts

Click the phone-and-tablet icon (or press Ctrl+Shift+M). You can choose a phone like an iPhone or a Galaxy, or type any width, to check your responsive design without a real phone.

Application: Storage

The Application panel shows cookies, localStorage and sessionStorage for the site. You can view, edit or delete them, which is useful when testing logins and saved settings.

A Quick Debugging Routine

1. Open the Console and look for red errors.
2. Inspect the broken element and check its CSS in Styles.
3. Open Network, reload, and look for red (failed) requests.
4. Add console.log() to your code to check values.

Exercise