0Pricing
Frontend Academy · Lesson

Developer Tools: Opening and Using DevTools

Open Chrome DevTools, inspect elements, read the console, watch network requests, and edit CSS live in the browser.

Developer Tools: Opening and Using DevTools is a free Frontend Academy lesson on CoddyKit — lesson 4 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Frontend Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

What Are Browser DevTools?

Every modern browser ships with a built-in set of developer tools. DevTools let you inspect HTML and CSS, debug JavaScript, profile performance, monitor network requests, and much more — all without leaving the browser.

Opening DevTools

Open DevTools with F12 (Windows/Linux) or Cmd+Option+I (Mac). You can also right-click any element and choose Inspect. The shortcut Ctrl+Shift+J / Cmd+Option+J opens directly to the Console.

The Elements Panel

The Elements panel shows the live DOM tree. Click any element to select it and see its computed styles in the Styles pane. You can double-click to edit HTML or CSS values in real time — changes are instant but not saved to your file.

Editing CSS Live

In the Styles pane, click any property value to change it. Add new rules with the + button. Use the toggle checkboxes to disable rules. This is the fastest way to prototype CSS without switching to your editor.

The Console Panel

The Console shows logged messages, warnings, and errors. You can also type JavaScript directly and execute it. Use console.log(), console.warn(), console.error(), and console.table() to output data during debugging.

// Log different types
console.log('value:', myVar);
console.table([{name:'Alice'}, {name:'Bob'}]);
console.error('Something went wrong');

The Network Panel

The Network panel shows every HTTP request the page makes. Select a request to see its headers, preview the response body, and check the timing waterfall. Filter by type: XHR/Fetch, JS, CSS, Images, Fonts.

Reading Request Timing

Each request shows: Queued, DNS Lookup, Initial Connection, SSL, Request Sent, Waiting (TTFB), and Content Download. TTFB (Time To First Byte) reflects server response time.

Throttling the Network

Use the Network panel's throttle dropdown to simulate slow 3G or offline conditions. This reveals performance issues invisible on fast broadband and helps you build experiences that work for users with poor connections.

Device Mode

Click the device icon (Ctrl+Shift+M / Cmd+Shift+M) to enter Device Mode. Simulate mobile viewports, DPR, touch events, and network conditions. Choose from presets like iPhone 14 or set a custom width.

The Sources Panel

The Sources panel lets you read and set breakpoints in your JavaScript files. A breakpoint pauses execution so you can inspect variable values, call stack, and step through code line by line with F10 (step over) and F11 (step into).

Breakpoints and the Debugger

Add a breakpoint by clicking a line number in Sources. When execution pauses, hover over variables to see their values or type them in the Console. Use the Call Stack pane to see which functions led to this point.

// You can also trigger a breakpoint in code:
debugger; // execution pauses here when DevTools is open

Quick Check

Which DevTools panel shows you all the HTTP requests the page makes including their status codes and response times?

Recap: Your DevTools Toolkit

Elements: inspect and edit the live DOM. Console: log and run JavaScript. Network: monitor HTTP traffic. Sources: set breakpoints and debug. Device Mode: test responsive layouts. Mastering these four panels will transform your debugging workflow.

Frequently asked questions

Is the “Developer Tools: Opening and Using DevTools” lesson free?

Yes — the full text of “Developer Tools: Opening and Using DevTools” is free to read here on the web, and the Frontend Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Frontend Academy course, upgrade to CoddyKit PRO.

What will I learn in “Developer Tools: Opening and Using DevTools”?

Open Chrome DevTools, inspect elements, read the console, watch network requests, and edit CSS live in the browser. You practise Frontend Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start Frontend Academy?

No prior experience is required. Frontend Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 4 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Developer Tools: Opening and Using DevTools” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this Frontend Academy lesson?

Yes. Every Frontend Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

  1. Browsers DNS and HTTP: The Request Lifecycle
  2. HTML CSS and JavaScript: Each Layer's Job
  3. How a Page Renders: Parsing DOM CSSOM Layout Paint
  4. Developer Tools: Opening and Using DevTools
← Back to Frontend Academy