1.2: Browser Developer Tools

Master browser Developer Tools to inspect HTML/CSS, debug JavaScript, and analyze network performance. These essential tools will be your best friend throughout your web development journey.

1. Introduction to Developer Tools

Browser Developer Tools (DevTools) are your best friend as a web developer. They allow you to:

  • Inspect and modify HTML/CSS in real-time
  • Debug JavaScript code
  • Monitor network activity
  • Analyze performance
  • Test responsive designs
  • And much more!

::: tip šŸ’” Every Developer Uses DevTools Professional web developers spend significant time in DevTools. Mastering these tools early will make you a more effective developer. :::

Opening DevTools

Method 1: Keyboard Shortcuts

  • Windows/Linux: F12 or Ctrl + Shift + I
  • macOS: Cmd + Option + I

Method 2: Right-Click Menu

  • Right-click anywhere on a webpage
  • Select "Inspect" or "Inspect Element"

Method 3: Browser Menu

  • Chrome: Menu ā†’ More Tools ā†’ Developer Tools
  • Firefox: Menu ā†’ More Tools ā†’ Web Developer Tools
  • Edge: Menu ā†’ More Tools ā†’ Developer Tools

2. Elements Panel (HTML & CSS)

The Elements (Chrome) or Inspector (Firefox) panel lets you inspect and modify the DOM (Document Object Model).

Inspecting Elements

Try This:

  1. Open any website (e.g., https://www.wikipedia.org)
  2. Open DevTools (F12)
  3. Click the Select Element tool (arrow icon) in top-left
  4. Hover over different parts of the page
  5. Click to inspect an element

Understanding the DOM Tree

The DOM is displayed as a tree structure:

<html>
  <head>
    <title>Page Title</title>
  </head>
  <body>
    <h1>Heading</h1>
    <p>Paragraph</p>
  </body>
</html>
  • Parent: Contains other elements (e.g., <body> contains <h1>)
  • Child: Contained within another element
  • Sibling: Elements at the same level

Live HTML Editing

You can edit HTML directly in DevTools:

  1. Right-click an element in the Elements panel
  2. Choose "Edit as HTML"
  3. Modify the HTML
  4. Press Ctrl+Enter (or Cmd+Enter) to apply

Try This:

  • Change a heading text
  • Add a new paragraph
  • Modify an image src

::: warning āš ļø Changes Are Temporary Modifications in DevTools only affect the current page view. Refresh the page and they're gone. This is perfect for experimenting! :::

CSS Styles Panel

On the right side, you'll see:

  • Styles: CSS rules applied to the selected element
  • Computed: Final calculated values
  • Box Model: Visual representation of margins, borders, padding

Try This:

  1. Select any element
  2. In the Styles panel, find a CSS rule
  3. Click a color value and change it
  4. Toggle checkboxes to enable/disable properties
  5. Add a new property (e.g., font-size: 24px)

3. Console Panel (JavaScript)

The Console is your JavaScript playground and debugging tool.

Basic Console Usage

Opening the Console:

  • Shortcut: Ctrl+Shift+J (Windows/Linux) or Cmd+Option+J (macOS)
  • Or click the "Console" tab in DevTools

Try These Commands:

// Simple arithmetic
2 + 2

// Display text
console.log("Hello, DevTools!")

// Check current page URL
window.location.href

// Get page title
document.title

// Change page title (temporarily)
document.title = "My New Title"

// Select an element
document.querySelector('h1')

// Change element text
document.querySelector('h1').textContent = "Modified Heading"

Console Methods

// Log messages
console.log("Normal message")
console.warn("Warning message")  // Yellow
console.error("Error message")   // Red
console.info("Info message")     // Blue

// Group related logs
console.group("My Group")
console.log("Message 1")
console.log("Message 2")
console.groupEnd()

// Display object properties
const user = { name: "Alice", age: 25 }
console.table(user)

// Measure time
console.time("MyTimer")
// ... some code ...
console.timeEnd("MyTimer")

Debugging with Console

Common Debugging Tasks:

// Check if element exists
console.log(document.querySelector('.my-class'))  // null if doesn't exist

// Inspect object structure
const data = { a: 1, b: { c: 2 } }
console.dir(data)

// Trace function calls
console.trace()

// Clear console
console.clear()

4. Network Panel

The Network panel shows all HTTP requests made by the page.

Monitoring Network Activity

  1. Open DevTools
  2. Go to Network tab
  3. Refresh the page (Ctrl+R or Cmd+R)
  4. Watch requests appear

Understanding Network Requests

Each row shows:

  • Name: File name (HTML, CSS, JS, images, etc.)
  • Status: HTTP status code (200, 404, 500, etc.)
  • Type: MIME type (document, stylesheet, script, image, etc.)
  • Initiator: What triggered the request
  • Size: File size
  • Time: Load duration

Try This:

  1. Refresh a webpage with Network panel open
  2. Click on the first request (usually the HTML document)
  3. Explore the tabs:
    • Headers: Request/response headers
    • Preview: Formatted preview
    • Response: Raw response data
    • Timing: Load timeline

Filtering Requests

Use the filter bar to show only:

  • XHR: AJAX requests
  • JS: JavaScript files
  • CSS: Stylesheets
  • Img: Images
  • Media: Videos/audio
  • Doc: HTML documents

Performance Analysis

Look for:

  • Large files (slow to download)
  • Many requests (can slow page load)
  • Failed requests (404 errors)
  • Slow server responses

Waterfall Visualization:

  • Shows request timing
  • Blue: DNS lookup
  • Orange: Initial connection
  • Green: Waiting (server processing)
  • Blue: Content download

5. Application/Storage Panel

The Application (Chrome) or Storage (Firefox) panel shows:

  • Cookies
  • LocalStorage
  • SessionStorage
  • IndexedDB
  • Cache

Cookies

Viewing Cookies:

  1. Go to Application ā†’ Cookies
  2. Select your domain
  3. See all cookies with their values, expiration, etc.

Try This:

  1. Find a cookie
  2. Double-click its value to edit
  3. Delete a cookie (right-click ā†’ Delete)

LocalStorage & SessionStorage

LocalStorage: Persists even after browser closes SessionStorage: Cleared when tab closes

Try in Console:

// Set items
localStorage.setItem('name', 'Alice')
sessionStorage.setItem('temp', 'value')

// Get items
localStorage.getItem('name')  // "Alice"

// Remove items
localStorage.removeItem('name')

// Clear all
localStorage.clear()

View in DevTools:

  • Application ā†’ Local Storage ā†’ your domain
  • Application ā†’ Session Storage ā†’ your domain

6. Responsive Design Mode

Test how your site looks on different devices.

Device Toolbar

Activate:

  • Click the Device Toolbar icon (phone/tablet icon)
  • Or press Ctrl+Shift+M (Windows/Linux) or Cmd+Shift+M (macOS)

Features:

  • Select device presets (iPhone, iPad, etc.)
  • Set custom dimensions
  • Rotate device (portrait/landscape)
  • Throttle network speed
  • Simulate touch events

Try This:

  1. Enable Device Toolbar
  2. Select "iPhone 12 Pro"
  3. See how the page adapts
  4. Rotate to landscape
  5. Try "iPad" and compare

7. Performance & Lighthouse

Performance Panel

Record Performance:

  1. Go to Performance tab
  2. Click Record button
  3. Interact with the page
  4. Click Stop
  5. Analyze the flame chart

What to Look For:

  • Long tasks (>50ms)
  • Layout shifts
  • Paint operations
  • JavaScript execution time

Lighthouse Audit

Run an Audit:

  1. Go to Lighthouse tab
  2. Select categories:
    • Performance
    • Accessibility
    • Best Practices
    • SEO
  3. Click Generate Report
  4. Review scores and suggestions

Lighthouse Scores:

  • 90-100: Good (green)
  • 50-89: Needs improvement (orange)
  • 0-49: Poor (red)

8. Sources/Debugger Panel

The Sources (Chrome) or Debugger (Firefox) panel is for debugging JavaScript.

Breakpoints

Setting Breakpoints:

  1. Go to Sources panel
  2. Open a JavaScript file
  3. Click line number to set breakpoint
  4. Refresh page - execution pauses at breakpoint

Breakpoint Controls:

  • Resume: Continue execution (F8)
  • Step Over: Next line (F10)
  • Step Into: Enter function (F11)
  • Step Out: Exit function (Shift+F11)

Try This:

  1. Find a website with JavaScript
  2. Open DevTools ā†’ Sources
  3. Set a breakpoint
  4. Trigger the code
  5. Inspect variables

Watch Expressions

Add variables to watch:

  1. In Sources panel, find Watch section
  2. Click + to add expression
  3. Type variable name
  4. See its value update as you debug

9. Practical Exercises

Exercise 1.2.1: Inspect and Modify

  1. Go to https://www.wikipedia.org
  2. Open DevTools
  3. Find the Wikipedia logo
  4. Change its src attribute to a different image URL
  5. Modify the page title in the <title> tag

Exercise 1.2.2: CSS Debugging

  1. On any webpage, select a paragraph
  2. In Styles panel, add these CSS properties: 
    background-color: yellow;
padding: 20px;
border: 2px solid red;
  3. Observe the box model visualization
  4. Take a screenshot

Exercise 1.2.3: Network Analysis

  1. Open https://www.bbc.com (or any news site)
  2. Open Network panel
  3. Refresh the page
  4. Answer:
    • How many total requests?
    • What's the largest file?
    • How long did the page take to load?
    • Are there any failed requests (red)?

Exercise 1.2.4: Console Practice

In the console, write JavaScript to:

// 1. Log your name
console.log("My name is [Your Name]")

// 2. Find all links on the page
document.querySelectorAll('a').length

// 3. Get the first heading's text
document.querySelector('h1').textContent

// 4. Store your age in localStorage
localStorage.setItem('age', '25')

// 5. Retrieve and display it
console.log(localStorage.getItem('age'))

Exercise 1.2.5: Responsive Testing

  1. Enable Device Toolbar
  2. Test a website on these devices:
    • iPhone SE (375Ɨ667)
    • iPad (768Ɨ1024)
    • Desktop (1920Ɨ1080)
  3. Note any layout issues or differences

10. DevTools Keyboard Shortcuts

Essential Shortcuts

ActionWindows/LinuxmacOS
Open DevToolsF12 or Ctrl+Shift+ICmd+Option+I
Open ConsoleCtrl+Shift+JCmd+Option+J
Inspect ElementCtrl+Shift+CCmd+Option+C
Device ToolbarCtrl+Shift+MCmd+Shift+M
Hard RefreshCtrl+Shift+RCmd+Shift+R
Search FilesCtrl+PCmd+P
Command MenuCtrl+Shift+PCmd+Shift+P

Pro Tips

Command Menu (Ctrl+Shift+P):

  • Type "screenshot" to capture page
  • Type "theme" to switch dark/light mode
  • Type "cache" to clear browser cache

11. Browser Differences

Chrome DevTools

  • Most comprehensive
  • Excellent performance tools
  • Best documentation

Firefox DevTools

  • Great CSS Grid inspector
  • Excellent font editor
  • Privacy-focused

Edge DevTools

  • Similar to Chrome (same engine)
  • Additional Microsoft integrations

Safari DevTools

  • Good for iOS/macOS testing
  • Requires enabling in Preferences

::: tip šŸ’” Recommendation Learn Chrome DevTools first (most common), then explore Firefox for advanced CSS features. Use Safari for Apple device testing. :::

12. Knowledge Check

Question 1: What keyboard shortcut opens DevTools in most browsers?

Show answer F12 or Ctrl+Shift+I (Windows/Linux) or Cmd+Option+I (macOS)

Question 2: Where do you inspect and modify HTML elements?

Show answer Elements panel (Chrome) or Inspector panel (Firefox)

Question 3: What panel shows all HTTP requests made by a page?

Show answer Network panel

Question 4: How do you test responsive design in DevTools?

Show answer Enable Device Toolbar (Ctrl+Shift+M or Cmd+Shift+M) to simulate different devices

Question 5: What's the difference between localStorage and sessionStorage?

Show answer localStorage persists even after browser closes; sessionStorage is cleared when the tab/window closes

Question 6: What console method displays objects in a table format?

Show answer console.table()

13. Key Takeaways

āœ… DevTools are essential for every web developer āœ… Elements panel lets you inspect and modify HTML/CSS in real-time āœ… Console is your JavaScript debugging and experimentation tool āœ… Network panel shows all requests and helps diagnose performance issues āœ… Application panel displays cookies, localStorage, and other storage āœ… Device Toolbar tests responsive design across devices āœ… Lighthouse audits performance, accessibility, and best practices āœ… Temporary changes in DevTools don't affect actual files

14. Common DevTools Workflows

Debugging CSS Layout

  1. Inspect element
  2. Check Computed styles
  3. Look at Box Model
  4. Toggle CSS properties
  5. Add new rules to test

Finding Performance Issues

  1. Open Network panel
  2. Refresh page
  3. Sort by Size (find large files)
  4. Sort by Time (find slow requests)
  5. Run Lighthouse audit

Debugging JavaScript Errors

  1. Open Console
  2. Read error message
  3. Click file:line link
  4. Set breakpoint
  5. Inspect variables

15. Further Resources

Official Documentation:

Interactive Tutorials:

Next Steps

Congratulations! You now know how to use Browser Developer Tools to inspect, debug, and optimize websites.

In Lesson 1.3: HTTP and Web Communication, you'll learn how the browser and server communicate using the HTTP protocol.

Previous Lesson
1.1: Introduction to the World Wide Web
Next Lesson
1.3: HTTP and Web Communication