"Every developer writes bugs. What separates beginners from pros isn't avoiding bugs — it's knowing how to find them fast."
Learning Objectives
By the end of this module, you will be able to:
- Open and use your browser's developer tools
- Read messages and test code in the Console
- Inspect and tweak elements with the Inspector
- Follow a simple debugging workflow
1. Meet the Developer Tools
Your browser has powerful built-in tools. Open them with F12 (or right-click → Inspect). The tabs you'll use most:
| Tab | What it's for |
|---|---|
| Console | See errors and messages; run JavaScript live |
| Elements / Inspector | See and edit the page's HTML and CSS |
| Network | Watch requests (like fetch) and their responses |
These tools ship inside every modern browser — there is nothing to install. Professionals live in this panel all day, so getting comfortable here early will speed up everything you build. There are more tabs than the three above (Sources, Application, Performance…), but these three cover the vast majority of everyday work.
Explain like I'm new: DevTools is like opening the hood of a car while the engine runs. You can watch what's happening, poke at the parts, and see the effect immediately — all without damaging the actual car.
Real-world use case: When a page won't load its data, open the Network tab, click the failed request (shown in red), and read its status code and response. You'll often spot the exact reason — a 404, a mistyped URL, or a permissions error — in seconds.
2. The Console Is Your Best Friend
The Console shows errors (in red) and lets you print values with console.log(...):
[object Object],.,[object Object],(,[object Object],, myVariable);You can log more than one thing at a time, and labelling each print makes messages easy to find in a busy console:
[object Object],.,[object Object],(,[object Object],, user);
,[object Object],.,[object Object],(,[object Object],, cart.,[object Object],);When the console prints an object, click the little triangle beside it to expand and explore every property — a quick way to confirm your data really looks the way you think. Beyond console.log, there's console.table(array) for a neat table and console.error(...) to log in red, but plain console.log will carry you a very long way.
Key idea: console.log is the simplest, most-used debugging tool in the world. When something's wrong, print the value at each step to find where reality stops matching what you expected.
3. The Inspector
Right-click any element and choose Inspect to see its HTML and CSS. Edit them live (changes vanish on refresh) — perfect for experimenting with styles before writing them in your files.
The Inspector has two linked halves: the HTML tree on one side and, on the other, every CSS rule affecting the selected element. You can tick rules off, change a color, or bump a font size and watch the page update instantly. Because nothing is saved, it's a risk-free sandbox — the ideal place to answer "what if I made this bigger?" before touching your real files.
Try this: Open DevTools on any website, click the Inspector, and change a heading's text or color right in the panel. You can't break the real site — it's only your local view — so explore fearlessly.
4. A Simple Debugging Workflow
- Read the error — the Console usually names the file and line.
- Check the obvious — typos, wrong paths, a missing
event.preventDefault(). - Print values —
console.logbefore and after the suspect line. - Narrow it down — comment out code until the bug disappears, then study what you removed.
The thread running through these steps is narrowing the search. A bug lives somewhere between "what you expected" and "what actually happened," and each step shrinks that gap until only the culprit is left. Stay calm and methodical — frustration is what makes you skip the obvious. And once you've fixed it, take a moment to understand why it broke; that's how a bug you squash today becomes a bug you never write again.
Beginner mistake: Ignoring the red Console errors and guessing randomly. The error message almost always tells you what went wrong and where. Read it first — it saves hours.
Key Takeaway: Your browser's DevTools (F12) are essential: the Console shows errors and runs code (console.log is your go-to), the Inspector edits HTML/CSS live, and the Network tab shows requests. Debug calmly — read the error, check the obvious, print values, narrow it down.
Further Learning
Adapted from Microsoft's Web Dev for Beginners (MIT License).