Open the tools built into your browser to inspect, test and diagnose a page.
Open this lesson in KodokonYour browser hides a full workshop, already installed, free, and one that most people will never open. It is called the developer tools, usually shortened to devtools. To open them, press F12, or right-click anywhere on a page and choose "Inspect". On a Mac, the shortcut is Cmd + Option + I. A panel then opens on the side or at the bottom of the window, with several tabs.
The first tab, called Elements or Inspector depending on your browser, shows the HTML of the page as it exists right now in the browser's memory. Hover over a line: the matching area lights up on the page. Double-click some text: you can rewrite it and see the change instantly. It is the best way to understand how a page is built, by taking other people's pages apart.
The Console tab is the one you will spend the most time in. It shows error messages in red when something breaks, and it also accepts instructions you type directly, executed in the context of the page you have open. Try it on any site: type a line, press Enter, watch what happens.
document.title
document.querySelectorAll("a").length
document.body.style.background = "gold"The Network tab makes everything you learned in the previous lessons visible. Open it, then reload the page with F5: each request shows up on its own line, with its address, its method, its status code, its size and how long it took. A red line flags a failed request. This is where you discover, for instance, that an image is missing because it returns a 404.