DevTools Tutorial

The Big Idea

DevTools is built into every browser. It lets you inspect, edit, and debug HTML, CSS, and JavaScript in real time — without touching your code files. Every developer uses it every day.

Your Roadmap

Section	Time	Required?
Watch and follow along	40 min	⚑ Required
Explore on your own	15 min	⚑ Required
Reflect	30 min	⚑ Required
Extra resources	Open	◎ Optional

Watch and follow along

Step 1: Get the starter files

Go to your cohort's resources repo: resources — select your cohort in the top-right corner of this page to see the link. Click the green Code button and copy the URL.

Clone it and open it in VS Code:

git clone <paste the URL you copied>
cd resources
code .

Look for the js-devtools-crashcourse folder inside — you'll find devtools-playground.html in there.

Step 2: Install Live Server

Before you start the video, install the Live Server extension in VS Code:

Open the Extensions panel (Cmd + Shift + X on Mac, Ctrl + Shift + X on Windows)
Search for Live Server
Install the one by Ritwick Dey

Step 3: Open the playground with Live Server

Right-click devtools-playground.html in the VS Code Explorer and choose Open with Live Server. This opens it in your browser in a way that makes the debugging section work correctly.

Step 4: Watch and follow along

DevTools Intro (21 min)

The video covers three panels you'll reach for constantly:

Elements — inspect and tweak HTML and CSS live in the browser
Console — read output, run JavaScript, and read errors
Sources — click through to the exact line that caused a bug

Tip: increase the playback speed if the pace feels slow.

Explore on your own

Go to any website you like. Open DevTools (Cmd + Option + I on Mac, F12 on Windows/Linux).

Try at least two of these:

Change the text of a heading on the page
Change the background colour of an element
Change the font size of a paragraph
Hide an element (right-click it in the Elements panel → Hide element)
Switch to mobile view using the device toolbar (the phone/tablet icon at the top of DevTools)

Changes you make in DevTools are not permanent — they reset when you refresh. This makes it a safe place to experiment.

How to know you've nailed it

	Level	You can...
🪨	Intro Climb	Open DevTools and locate the Elements, Console, and Sources tabs	⚑ Required
🧗	Core Ascent	Use the Elements panel to edit HTML and CSS on any live website, and read a Console error to find the broken line	⚑ Required
🏔️	Summit	Use the device toolbar to check how a site looks on mobile, force a hover state with Force State, and use the Computed tab to explore the box model	◎ Optional

The Big Idea (revisited)

DevTools is built into every browser. You now know how to open it, inspect and edit HTML and CSS on any live site, read and click through Console errors, and check how a page looks on mobile — all without touching a code file.

Reflect

Open sprint-2/my-reflections-sprint-2.md and add your answers under the DevTools Tutorial heading.

Stage, commit, and push.

Extra Resources

Tech

GitHub Pages