Browser Developer Tools
The hidden toolkit built into every browser — inspect any page, edit the live HTML, and read errors. The #1 day-to-day skill employers assume you already have.
What you will learn
- Open DevTools and find the Elements, Console and Application panels
- Inspect and temporarily edit the live HTML of any page
- Read errors in the Console and view saved data in the Application panel
What are Developer Tools?
Developer Tools (DevTools) are a powerful toolkit built right into every modern browser — Chrome, Edge, Firefox and Safari all have them. They let you look inside any web page: see its exact HTML, change it live, read error messages and check what data the page has saved. Professionals keep them open all day.
The key idea to relax about first: anything you change in DevTools is temporary and only on your own screen. It never touches the real website or other visitors. Refresh the page and your changes vanish. So you can experiment fearlessly.
Note: A panel is one tab inside DevTools (like Elements or Console). A DOM — Document Object Model — is the live, in-memory version of your HTML that the browser actually draws. DevTools shows you the DOM, which usually matches your HTML file but can change as JavaScript runs.
Three ways to open DevTools
| How | On Windows / Linux | On Mac |
|---|---|---|
| Keyboard shortcut | F12 | Cmd + Option + I |
| Right-click then choose | “Inspect” | “Inspect” |
| Browser menu | ⋮ → More tools → Developer tools | ⋮ → More tools → Developer tools |
Tip: The fastest move you will use a hundred times a day: right-click the exact element you care about and choose “Inspect”. DevTools opens with that element already selected in the Elements panel — no hunting required.
The panels you will use most
| Panel | What it is for |
|---|---|
| Elements | See and edit the live HTML and CSS of the page |
| Console | Read error messages and run quick JavaScript |
| Network | Watch every file the page downloads (images, CSS, data) |
| Application | Inspect saved data: localStorage, cookies, etc. |
| Device toolbar | Preview the page at phone and tablet sizes |
Inspect and edit the live HTML
In the Elements panel you see the page’s HTML as a clickable tree. Hover any line and the matching part of the page highlights. Double-click any text and you can retype it; right-click a tag for options like “Delete element”. Here is a small page — open DevTools on this very preview, find the heading, and try editing it.
<h1 id="headline">Original headline</h1>
<p class="tagline">Right-click me and choose “Inspect”.</p>
<button>A button to inspect</button>Step by step, try this on the preview above: (1) right-click the words “Original headline” and choose Inspect; (2) in the Elements panel the <h1 id="headline"> line is now highlighted; (3) double-click the text “Original headline” and type something new; (4) press Enter — the page updates instantly. You just edited live HTML. Refresh and it returns to normal, proving the change was only on your screen.
Note: Output:
The heading on the page changes to whatever you typed — but only in your browser, only until you refresh. The real html.js file and the live website are completely untouched.
Why this is a debugging superpower
When a page does not look right, DevTools tells you why. Select an element and the Styles pane (next to Elements) lists every CSS rule affecting it, lets you toggle rules on and off with a checkbox, and even type new ones — all live. This is how professionals fix “why is this text the wrong colour?” in seconds instead of guessing.
- Right-click the broken-looking element and choose Inspect.
- Look at the Styles pane on the right to see which CSS rules apply.
- Untick a rule, or type a test value, and watch the page react instantly.
- Once you know the fix, make the real change in your code file.
Watch out: DevTools is for finding the fix, not saving it. Your edits there disappear on refresh. Always copy the working change back into your actual .html or .css file to make it permanent.
The Console: where errors appear
The Console panel prints messages and, crucially, errors. When JavaScript on a page fails, a red error line shows up here telling you the message, the file and the line number. Learning to read the Console is how you stop guessing and start fixing. The tiny demo below deliberately calls a function that does not exist so you can see a real error.
<button onclick="doesNotExist()">Click me, then open the Console</button>
<p>After clicking, press F12 and look at the Console tab.</p>Click the button, then open the Console panel. You will see a red error like Uncaught ReferenceError: doesNotExist is not defined. Read it as plain English: “I tried to run doesNotExist, but no such thing exists.” The line and file tell you exactly where to look. Almost every real bug you fix starts with reading a Console error like this.
Note: Output: A red error in the Console: “Uncaught ReferenceError: doesNotExist is not defined”. Nothing appears on the page itself — the error only shows in the Console, which is exactly why you must check it.
The Application panel: see saved data
Remember localStorage from the Web APIs lesson — the way a page saves small bits of data in the browser? The Application panel is where you actually see that data. Open DevTools → Application → in the left sidebar expand Local Storage and click your site. You get a live table of every saved key and value, and you can edit or delete them by hand — perfect for debugging a to-do list, a shopping cart, or a “remember me” feature.
Tip: The Device toolbar (the little phone/tablet icon at the top-left of DevTools, or Ctrl/Cmd + Shift + M) shrinks the page to phone and tablet widths. Use it to check your responsive layouts without owning ten devices — it is how every front-end developer tests mobile.
Q. You edit a heading’s text in the Elements panel of DevTools. What happens when you refresh the page?
✍️ Practice
- Open any well-known website, right-click its main headline, choose Inspect, and edit the text to your own name. Screenshot it, then refresh to confirm it reverts.
- On your own profile page, use the Styles pane to change a heading’s colour live, then copy that colour into your real CSS.
- Click the error-button demo above, open the Console, and write down the exact red error message you see.
🏠 Homework
- Pick a page you built earlier this course, open the Device toolbar, and view it at “iPhone” width. Note one thing that looks wrong on a phone — you will learn to fix it in the CSS module.