← Previous Next →

Browser DevTools

Browser Developer Tools (DevTools) are built-in utilities in modern browsers that help developers inspect, debug, and optimize web pages. They provide real-time access to the HTML, CSS, JavaScript, network activity, performance metrics, and more.

Illustration of Browser DevTools
Illustration of Browser DevTools

How to Open DevTools

  • Press F12 or Ctrl+Shift+I (Windows/Linux) or Cmd+Option+I (Mac).
  • Right-click any element on the page and select Inspect or Inspect Element.
  • Use the browser menu: More tools → Developer tools.

Main Panels in DevTools

Common DevTools Panels
PanelPurpose
ElementsInspect and modify HTML and CSS live on the page.
ConsoleView logs, run JavaScript commands, and see errors.
SourcesDebug JavaScript via breakpoints and step-through code.
NetworkMonitor resource loading, request/response headers, and timings.
PerformanceAnalyze page loading speed and runtime performance.
ApplicationInspect storage, cookies, local/session storage, and service workers.
SecurityCheck security details like HTTPS certificates and mixed content.

Key Features for Beginners

  • Inspect Elements: Click on the element selector icon (cursor) to select elements on the page and view their HTML and CSS.
  • Edit HTML/CSS: Double-click HTML attributes or CSS properties to edit them live and see immediate results.
  • Console Logging: Use console.log() in your scripts and view output/errors in the Console panel.
  • JavaScript Debugging: Set breakpoints in the Sources panel to pause execution and inspect variables.
  • Network Monitoring: Reload the page with DevTools open to see all requests, their status, sizes, and load times.

💡 Live Editing

Any changes made in the Elements or Styles panel affect only the current page state. Reloading the page will reset changes unless saved in source files or overrides.

Using the Console Effectively

The Console panel allows you to run JavaScript commands directly on the page context. Try these to interact with the page:

  • document.querySelector('selector') — Select an element.
  • console.log('Hello, DevTools!') — Print messages to the console.
  • debug(functionName) — Automatically break when a function is called.

💡 Console Shortcuts

Use ↑ and ↓ to cycle through previous commands. Press Tab for autocomplete suggestions.

Inspecting Network Requests

The Network panel records all resource requests made by the page. Key columns include:

  • Name: Resource filename or URL.
  • Status: HTTP status code.
  • Type: Resource type (document, script, stylesheet, image, xhr, etc.).
  • Size: Transferred data size.
  • Time: Duration to load the resource.

Filtering by type or searching helps isolate specific requests, useful when debugging APIs or asset loading issues.

Setting Breakpoints in JavaScript

In the Sources panel, you can pause JavaScript execution at specific lines or events to inspect state:

  • Open the JavaScript file from the file navigator.
  • Click the line number to add a breakpoint.
  • Reload the page or trigger the event to hit the breakpoint.
  • Use the debugging toolbar to step through code and examine variables.

⚠️ Source Maps

If your JavaScript is minified or compiled (e.g., from TypeScript), enable source maps to debug original source code.

📌 Deep Dive: Using Console to Inspect Elements

JAVASCRIPT
const header = document.querySelector('h1');
console.log(header.textContent);
header.style.color = 'blue';
Output
The text content of the first <h1> element is logged, and its color changes to blue in real-time.

💡 Pro Tip

DevTools settings can be customized for themes, shortcuts, and experiments. Explore the gear icon or settings menu inside DevTools.

← Previous Next →