Course එකට ආපසු

Browser DevTools

30 මිනිත්තු📖Lecture

Browser DevTools (වෙබ් පිටුවේ X-ray එක)

DevTools (Developer Tools) කියන්නේ හැම modern browser එකකම built-in ව තියෙන tool set එක. මේකෙන් පුළුවන්:

  • ඕනෑම page එකක HTML structure එක බලන්න
  • Real-time CSS view සහ modify කරන්න
  • JavaScript errors debug කරන්න
  • Network requests monitor කරන්න
  • Responsive designs test කරන්න

මේක web development එකේ X-ray vision එක.

DevTools Open කරන්න

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

DevTools Interface එක

Text
┌──────────────────────────────────────────────────────────────────┐
│ Elements │ Console │ Sources │ Network │ Performance │ ...       │
├──────────────────────────────────────────────────────────────────┤
│                                                                  │
│  වම් PANEL                       │  දකුණු PANEL                  │
│  HTML Structure                  │  Styles                       │
│                                  │  Computed                     │
│  ▼ <html>                        │                               │
│    ▼ <body>                      │  .header {                    │
│      ▼ <header>                  │    background: #333;          │
│        <nav>...</nav>            │    padding: 20px;             │
│      </header>                   │  }                            │
│                                                                  │
└──────────────────────────────────────────────────────────────────┘

Elements Tab: X-Ray එක

Elements tab එකෙන් page එකේ HTML structure එකයි CSS එකයි පේනවා.

ඔයාට කරන්න පුළුවන් දේවල්

1. ඕනෑම Element එකක් Inspect කරන්න — Page එකේ ඕනෑම එකක් right-click → "Inspect"

2. HTML Structure බලන්න — Arrows එක්ක elements expand/collapse කරන්න

3. Applied CSS බලන්න — Element එකක් select කළාම all CSS rules පේනවා

4. HTML Live Edit කරන්න — Double-click කරලා edit කරන්න (changes temporary!)

5. CSS Live Edit කරන්න — CSS value එකක් click කරලා real-time edit කරන්න

Elements Tab Exercises

✅ Elements Tab Practice

0/4

Console Tab: JavaScript Playground

Console එකෙන් JavaScript errors පේනවා, code run කරන්නත් පුළුවන්.

කරන්න පුළුවන් දේවල්:

Console Uses

1. Errors බලන්න — JavaScript errors red color එකෙන් පේනවා

2. Logs බලන්න — console.log() output මෙතන පේනවා

3. JavaScript Run කරන්න — ඕනෑම JavaScript type කරලා Enter ඔබන්න

Useful Console Commands

JavaScript
// Page title බලන්න
document.title
 
// Element එකක් select කරන්න
document.querySelector("h1")
 
// Page title change කරන්න
document.title = "New Title!"
 
// All links ගන්න
document.querySelectorAll("a")
 
// Alert message
alert("Hello from console!")
 
// Elements count කරන්න
document.querySelectorAll("a").length

Console Exercises

✅ Console Tab Practice

0/4

Network Tab: මොනවද Load වෙන්නේ

Network tab එකෙන් page එකට load වෙන files හැම එකක්ම පේනවා.

Column
Meaning
Name
File name
Status
200 = OK, 404 = Not Found
Type
document, stylesheet, script, image
Size
File size
Time
Load වෙන්න ගත්ත time

Common Uses:

  • Files load වෙනවද check කරන්න
  • Slow resources බලන්න
  • API calls monitor කරන්න
  • Missing images debug කරන්න

Device Mode: Responsive Testing

ඔයාගේ page එක different devices වල පෙනෙන හැටි test කරන්න.

Device Mode Enable කරන හැටි

  1. DevTools open කරන්න
  2. Top-left එකේ device icon (📱) click කරන්න
  3. හෝ Ctrl + Shift + M press කරන්න (Chrome)

ඔයාට පුළුවන්:

  • Preset devices select කරන්න (iPhone, iPad, etc.)
  • Custom dimensions set කරන්න
  • Touch events simulate කරන්න

DevTools Cheat Sheet

Task එක
කරන හැටි
DevTools open කරන්න
F12 හෝ right-click → Inspect
Element inspect කරන්න
Right-click element → Inspect
HTML edit කරන්න
Elements එකේ double-click
CSS edit කරන්න
Styles panel එකේ value click
CSS toggle කරන්න
Property එක ළඟ checkbox
JavaScript run කරන්න
Console tab → type → Enter
Device mode
📱 icon click
HTML search කරන්න
Elements එකේ Ctrl/Cmd + F
Screenshot ගන්න
Ctrl/Cmd + Shift + P → "screenshot"

Lesson Summary

Essential Tabs

  • Elements: HTML/CSS inspect සහ edit කරන්න
  • Console: JavaScript errors සහ testing
  • Network: Loaded resources බලන්න

Key Skills

  • ඕනෑම website එකක ඕනෑම element එකක් inspect කරන්න
  • Real-time HTML/CSS modify කරන්න (temporary)
  • JavaScript commands run කරන්න
  • Console errors read කරලා debug කරන්න

Superpower එක

DevTools එකෙන් ඔයාට ඕනෑම website එකක් build කරලා තියෙන හැටි code directly examine කරලා understand කරන්න පුළුවන්.

📝 Quiz

1/3

DevTools open කරන keyboard shortcut එක මොකද?

Next Up

Lesson 2.6: Code Autopsy
AI generate කරපු code analyze කරන practice කරමු!