Your browser is a studio

Before you begin

By the end, you can…

• Inspect and edit any page's HTML and CSS live
• Read errors and messages in the console
• Measure a page with Lighthouse

01 / Understand

DevTools are the maker's workbench

Every modern browser includes professional tools. The Elements panel shows the live DOM: you can edit text, move elements, and restyle anything, and the change is instantly visible. Nothing you do there is saved—it is a safe sandbox for learning.

The Console shows errors, warnings, and messages from the page, and accepts JavaScript commands you type. The Network panel shows every request. Lighthouse audits performance, accessibility, and best practices in one click.

02 / Apply

Practice on a page you like

Open DevTools on any site, select an element, and change its text and color. Refresh to prove the original is untouched. Break something on purpose, then find the error in the console.

Then run Lighthouse on your own page and read the results as a to-do list, not a verdict. Each failing audit names the file, the rule, and usually the fix.

document.querySelector("h1").textContent = "I edited this live"; // try it in the Console

03 / Make

Your studio task

Make — Audit one real page with the browser's own tools.

1. Open a site you admire and change one element's text and one style.
2. Type a one-line script into the console and run it.
3. Find and read one error or warning on a real page.
4. Run Lighthouse and write down the three lowest-scoring audits.

04 / Check

Knowledge check