Browser DevTools Basics

The browser DevTools are one of the most powerful debugging tools available to JavaScript developers. They're built right into your browser and provide everything you need to inspect, debug, and optimize your web applications. Let's explore the essential features every developer should know.

The specific features of this page are focused on Chrome's devtools, but the general concepts apply to other browsers as well.

Opening DevTools

There are several ways to open your DevTools:

Keyboard Shortcuts
- Windows/Linux: F12 or Ctrl + Shift + I
- Mac: Cmd + Option + I
Right-Click Method
- Right-click on any element and select "Inspect"
- This opens DevTools with the element highlighted in the Elements tab
Chrome Menu
- Click the three dots menu → More Tools → Developer Tools

DevTools Overview

When the DevTools open, you'll see several tabs across the top. The most important ones for beginners are:

Elements - View and edit HTML/CSS
Console - JavaScript console for running code and viewing logs/errors
Network - Monitor network requests
Application - View local storage, cookies, and other data
Sources - View source files and debug code line by line
Performance - Analyze page performance and resource usage

The Elements Tab

The Elements tab shows you the HTML structure of your page and lets you inspect and modify it in real-time.

Key Features

HTML Structure Navigation
- Expand/collapse elements with the arrow icons
- Elements are nested to show the DOM hierarchy
- Hover over elements in DevTools to highlight them on the page
Live HTML Editing
- Double-click on any text to edit it
- Right-click elements for options:
  - Edit as HTML
  - Delete element
  - Copy element
  - Hide element
Styles Panel

The right side shows CSS styles for the selected element which you can add to or modify:

Styles panel features:
- Computed tab: Shows final computed styles
- Styles tab: Shows CSS rules and their sources
- Live editing: Click on any CSS value to edit it
- Color picker: Click on color values to use the color picker
- Box model: Visual representation of margin, border, padding
Event Listeners

Click "Event Listeners" tab to see JavaScript events attached to an element. This tab sometimes shows too many events and can be hard to parse important information from.
Force CSS States

You can simulate different CSS states like :hover, :active, and :focus:
- Right-click on an element → Force state
- Select the state you want to simulate
- This is useful for testing hover effects without needing to actually hover over the element

Practical Examples

Let's look at some practical examples of using the Elements tab.

Example 1: Debugging Layout Issues

<!-- Your element isn't showing up as expected -->
<div class="header">
  <h1>My Title</h1>
</div>

Using Elements tab to debug:

Right-click on the element → Inspect
Check the Styles panel for:
- display: none (element is hidden)
- visibility: hidden (element is invisible)
- Width/height values of 0
- Margin/padding issues
Edit CSS values directly to test fixes

Example 2: Finding CSS Conflicts

/* Multiple CSS rules affecting the same element */
.btn {
  color: blue;
}
.primary {
  color: red;
}
.button-override {
  color: green !important;
}

In the Styles panel:

Crossed-out styles show what's been overridden
Source file and line numbers are shown

The Console Tab

The Console is where all your logs/errors appear and where you can run JavaScript commands directly. We will cover logging in depth on the next page, so this section will be very brief.

Running JavaScript

You can execute JavaScript directly in the Console:

// Try these in the Console:
document.title = "New Title"
document.body.style.backgroundColor = "lightblue"

// Get elements
const button = document.querySelector("button")
button.style.fontSize = "20px"

// Test functions
function add(a, b) {
  return a + b
}
add(5, 3) // Returns 8

You may get a warning in the console telling you that pasting information into the console can be dangerous. Just type allow pasting into the console and press enter to allow it.

The Network Tab

The Network tab shows all network requests your page makes (HTML, CSS, JavaScript, images, API requests, etc.).

Key Features

Request Monitoring
- Shows all HTTP requests
- Status codes (200 = success, 404 = not found, 500 = server error)
- Response times
- File sizes
Filtering
- Filter by type: JS, CSS, Img, Media, Font, Doc, WS, Other
- Filter by status code
- Search for specific files
Request Details

Click on any request to see:
- Headers: Request and response headers
- Preview: Formatted view of the response
- Response: Raw response data
- Timing: Detailed timing breakdown

Important Options

Preserve log: Keep requests after page reload
Disable cache: Bypass cache (I almost always have this enabled)
Throttle: Simulate slow network conditions

The Application Tab

The Application tab lets you inspect data stored on your browser. The 3 main types of storage are:

Local Storage - Key-value pairs stored in the browser
Session Storage - Similar to local storage, but data is cleared when the tab is closed
Cookies - Small pieces of data sent by the server and stored in the browser

Viewing and Editing Storage

Look in "Storage" in the left sidebar
Click on "one of the storage options" → your domain
See all stored data
Double-click values to edit them
Right-click to delete entries

The Sources Tab

The Sources tab shows all the files loaded by your page (HTML, CSS, JavaScript, etc.). This tab is very useful for debugging JavaScript code.

A full page is dedicated to just this tab, so we won't be going into any further detail here.

The Performance Tab

The Performance tab allows you to analyze the runtime performance of your website. You can record and inspect various performance metrics. For the most part you won't need to use this tab, but the basic metrics it provides at the top of the page can be useful for analyzing your page performance.

This tab can also be used to throttle your CPU speed and network speed to see how your page performs under different conditions.

Quick DevTools Tips

Element Picker
- Click the element selector tool (arrow icon) (Top right corner)
- Hover over page elements to highlight them
- Click to inspect any element
Device Simulation
- Click the device toggle icon (Computer/Phone icon) (Top right corner)
- Test responsive designs
- Simulate different screen sizes and devices
Docking
- Change DevTools docking position (left, right, bottom, undocked)
- Click the three vertical dots in the top right corner
- Choose your preferred docking position

← Previous Next →