Introduction to the Web Developer Tools

🦊 Lesson 1 — Introduction to the Web Developer Tools

Firefox ships with a full suite of developer tools built right in. No installation, no extensions — just press F12 on any page. This lesson covers what DevTools can do, how to open them, how to navigate the interface, and how to set them up for your workflow.

📋 What you need Firefox browser (any recent version). No other software required. Everything in this course works on any website you visit — you do not need to own or control the site.

🔍 What Are Developer Tools?

DevTools are a window into a running web page. They let you see the underlying code of any page, watch every network request the browser makes, run JavaScript directly, and measure performance — all in real time.

⚠ Changes are temporary. Anything you edit inside DevTools affects the live page immediately — but only until the next refresh. A page reload restores everything to its original state. You cannot break a website by experimenting in DevTools.

🚪 Four Ways to Open DevTools

Method 1

Keyboard Shortcut

The fastest method. Works on any page, any time.

F12 or Ctrl + Shift + I macOS: Cmd + Option + I

Method 2

Right-Click → Inspect

Right-click any element on the page and choose Inspect. Opens the Inspector with that element already selected.

Method 3

Firefox Menu

Click the hamburger menu (≡) → More tools → Web Developer Tools.

Method 4

Menu Bar

Tools → Browser Tools → Web Developer Tools.

💡 Best Practice Use right-click → Inspect when you want to jump straight to a specific element on the page. Use F12 for everything else — it's the fastest single keystroke.

🗺️ The DevTools Interface

Main Panel

Content changes based on the selected tab. Inspector shows the HTML tree; Network shows request rows; Console shows log output.

Secondary Panel

Available in Inspector (CSS Rules, Computed, Box Model) and Debugger (Scopes, Watch, Call Stack). Press Escape to add the Console here too.

📑 The Panel Tabs

Inspector

HTML structure and CSS styles. Edit elements and rules live.

Console

Errors, warnings, logs, and a live JavaScript REPL.

Debugger

JavaScript source files, breakpoints, call stack, watch expressions.

Network

Every HTTP request — headers, bodies, status codes, timing.

Performance

CPU flame chart and frame rate recorder.

Memory

Heap snapshots and memory allocation tracking.

Storage

Cookies, localStorage, sessionStorage, IndexedDB, Cache.

Accessibility

Accessibility tree, roles, labels, colour contrast.

Application

Service workers and web app manifests.

⊡ Docking Positions

⬇

Bottom

DevTools below the page. Good for Network and Console work on wide screens.

⬇

→

Right

Side by side with the page. Best for Inspector — you see layout as you edit.

←

Left

Same as right, mirrored.

⧉

Separate Window

DevTools in its own window. Perfect with two monitors.

⚙️ Key Settings to Configure

Press F1 inside DevTools to open Settings.

Disable HTTP Cache (when toolbox is open)

Forces the browser to re-fetch all assets on every reload instead of serving from cache. Turn this on — you always want to see the latest version of files while developing or investigating.
Enable Source Maps

When a site uses minified JavaScript, source maps let the Debugger show the original readable source instead of the compressed bundle. Leave this on.
Show Browser Styles (Inspector)

Shows CSS rules applied by the browser's default stylesheet alongside the page's own styles. Useful for understanding default margins and padding but adds noise — turn on only when needed.
Dark / Light Theme

Switch DevTools between dark and light themes under the Themes section. Dark is easier on the eyes during long sessions.

⌨️ Essential Keyboard Shortcuts

Shortcut	Action
`F12`	Open / close DevTools
`F1`	Open DevTools Settings
`Ctrl + Shift + C`	Activate element picker — click anything on the page to inspect it
`Ctrl + Shift + K`	Jump directly to the Console panel
`Ctrl + Shift + M`	Toggle Responsive Design Mode
`Escape`	Toggle the Console drawer at the bottom of any panel
`Ctrl + L` (Console)	Clear the console output
`Ctrl + F`	Search within the current panel (Inspector, Network, etc.)
`Alt + Click` (Inspector)	Expand all child elements of a node at once

💡 Console Drawer Trick Press Escape while in any panel to open a mini Console at the bottom. This means you can watch Network requests and type JavaScript at the same time — without switching panels. This is one of the most useful DevTools workflows.

📱 Responsive Design Mode

Press Ctrl + Shift + M (or click the phone icon in the toolbar) to simulate any screen size. You can choose preset device dimensions (iPhone, Galaxy, iPad), enter custom pixel widths, rotate to landscape, and even throttle the network speed to see how your page loads on a mobile connection.

ℹ️ Note Responsive Design Mode simulates the viewport size and device pixel ratio but does not simulate touch events or mobile browsers. For testing real touch behaviour, use an actual device or a dedicated emulator.

✏️ Exercises

Open DevTools four ways. Navigate to any website and open DevTools using the keyboard shortcut, right-click → Inspect, the Firefox menu, and the menu bar. Close and reopen each time to confirm they all work.
Configure your settings. Press F1 inside DevTools and: (a) switch the theme to Dark if it isn't already, (b) enable Disable HTTP Cache, and (c) hide a panel you won't use (e.g. Memory) from the Default Developer Tools list.
Try the element picker. Press Ctrl + Shift + C and hover over different elements on any page. Notice the orange highlight and the tooltip showing the tag, class, and dimensions. Click an element and observe how the Inspector jumps to it.
Open the Console drawer. Switch to the Network panel and press Escape. Type document.title in the Console drawer and press Enter. The page title should appear without you having to leave the Network panel.
Try Responsive Design Mode. Press Ctrl + Shift + M, select "iPhone 12/13" from the device dropdown, and observe how the page reflows. Change to a custom width of 480px. Press the rotate button to switch to landscape.

📌 Key Takeaways

DevTools are built in — no installation needed; press F12 on any web page to open them.
Changes are temporary — editing in DevTools never saves to the server; a refresh restores everything.
Right-click → Inspect is the fastest way to jump to a specific element on the page.
Escape opens the Console drawer in any panel — you can run JS without switching tabs.
Enable "Disable HTTP Cache" in Settings so you always see the latest version of assets.
Responsive Design Mode simulates any screen size without needing a physical device.

Up next

Lesson 2 — The Inspector Panel: navigating the HTML tree, editing elements and styles live, the CSS rules pane, and the box model diagram

→