Browser DevTools
Browser Developer Tools are your best friend for debugging and inspecting web pages.
This lesson is basically a guided tour explain what they are and how to use them effectively to understand what's happening in your code.
DevTools? What's that?
DevTools are built right into your browser — no install needed. You just have to right-click anywhere on a page and select Inspect. A whole panel opens up, letting you see the HTML structure of any page, tweak CSS in real time, read error messages, simulate mobile screens, and much more.
And here's the fun part: they work on any website, not just your own. You can inspect how your favorite sites are built, peek at their CSS, and learn from real-world code. It's like having backstage access to the entire internet.
🤝 Can I give you a tour?
It would be incredibly boring to show you screenshots of all the features. Instead, let me give you a guided tour of the most important parts!
A quick tour of Chrome DevTools: inspect, edit CSS, console, and more.
Practice time
The best way to learn DevTools is to use them. Here are two small missions for you.
Mission 1: Change the web
Go to the D3 linear scale documentation page.
Right-click anywhere on the page and select Inspect to open DevTools.
Click the inspect icon (top-left of the DevTools panel), then click on the main title of the page. Find it highlighted in the Elements panel.
In the Styles panel on the right, add a new CSS rule: color: red. The title should turn red instantly!
Mission 2: Find the secret
Stay on this very page — the one you're reading right now.
Open DevTools (right-click → Inspect) and click on the Console tab.
Look for a secret message I left for you. It's right there, waiting to be found.
Oh no! 😱
This lesson is not ready yet.
But we're working hard on it, releasing 1-2 lessons per week. If you're a student, check the discord channel for announcements! (
logo above. )
🙇