Course එකට ආපසු

Browser DevTools

30 මිනිත්තු📖Lecture

Browser DevTools

DevTools (Developer Tools) are built into every modern browser. They let you:

  • See the HTML structure of any page
  • View and modify CSS in real-time
  • Debug JavaScript errors
  • Monitor network requests
  • Test responsive designs

This is the X-ray vision of web development.

Opening DevTools

Text
Keyboard: F12 or Ctrl + Shift + I (Win) / Cmd + Option + I (Mac)
Mouse: Right-click → "Inspect"
Menu: Menu → More Tools → Developer Tools

The DevTools Interface

Text
┌──────────────────────────────────────────────────────────────────┐
│ Elements │ Console │ Sources │ Network │ Performance │ ...       │
├──────────────────────────────────────────────────────────────────┤
│                                                                  │
│  LEFT PANEL                      │  RIGHT PANEL                  │
│  HTML Structure                  │  Styles                       │
│                                  │  Computed                     │
│  ▼ <html>                        │  Event Listeners             │
│    ▼ <body>                      │                               │
│      ▼ <header>                  │  .header {                    │
│        <nav>...</nav>            │    background: #333;          │
│      </header>                   │    padding: 20px;             │
│      ▼ <main>                    │  }                            │
│        ...                       │                               │
│                                                                  │
└──────────────────────────────────────────────────────────────────┘

Elements Tab: The X-Ray

The Elements tab shows the page's HTML structure and CSS.

What You Can Do

1. Inspect Any Element — Right-click any element on page → "Inspect"

2. See HTML Structure — Expand/collapse elements with arrows

3. View Applied CSS — Select an element to see all CSS rules

4. Edit HTML Live — Double-click to edit (changes are temporary!)

5. Edit CSS Live — Click any CSS value to edit in real-time

Elements Tab Exercises

✅ Elements Tab Practice

0/4

Console Tab: JavaScript Playground

The Console shows JavaScript errors and lets you run code.

What You Can Do:

Console Uses

1. See Errors — JavaScript errors appear in red

2. See Logs — console.log() output appears here

3. Run JavaScript — Type any JavaScript and press Enter

Useful Console Commands

JavaScript
// See page title
document.title
 
// Select an element
document.querySelector("h1")
 
// Change page title
document.title = "New Title!"
 
// Get all links
document.querySelectorAll("a")
 
// Alert message
alert("Hello from console!")
 
// Count elements
document.querySelectorAll("a").length

Console Exercises

✅ Console Tab Practice

0/4

Network Tab: What's Loading

The Network tab shows all files loaded by the page.

Column
Meaning
Name
File name
Status
200 = OK, 404 = Not Found
Type
document, stylesheet, script, image
Size
File size
Time
How long to load

Common Uses:

  • Check if files are loading
  • See slow resources
  • Monitor API calls
  • Debug missing images

Device Mode: Responsive Testing

Test how your page looks on different devices.

How to Enable Device Mode

  1. Open DevTools
  2. Click the device icon (📱) in top-left
  3. Or press Ctrl + Shift + M (Chrome)

You can:

  • Select preset devices (iPhone, iPad, etc.)
  • Set custom dimensions
  • Simulate touch events

DevTools Cheat Sheet

Task
How
Open DevTools
F12 or right-click → Inspect
Inspect element
Right-click element → Inspect
Edit HTML
Double-click in Elements
Edit CSS
Click value in Styles panel
Toggle CSS
Checkbox next to property
Run JavaScript
Console tab → type → Enter
Device mode
Click 📱 icon
Search HTML
Ctrl/Cmd + F in Elements
Take screenshot
Ctrl/Cmd + Shift + P → "screenshot"

Lesson Summary

Essential Tabs

  • Elements: Inspect and edit HTML/CSS
  • Console: JavaScript errors and testing
  • Network: See loaded resources

Key Skills

  • Inspect any element on any website
  • Modify HTML/CSS in real-time (temporary)
  • Run JavaScript commands
  • Debug by reading console errors

The Superpower

DevTools lets you understand HOW any website is built by examining its code directly.

📝 Quiz

1/3

What keyboard shortcut opens DevTools?

Next Up

Lesson 2.6: Code Autopsy
Practice analyzing AI-generated code!