Overview of the Browser DevTools

Browser DevTools are built-in tools for inspecting and debugging a web page.

Chrome, Firefox, Safari, and Edge all provide them. The panel names and keyboard shortcuts vary slightly, but the core workflow is the same.

This guide uses the names from Chrome DevTools. The official Chrome DevTools overview links to detailed guides for every panel.

Open DevTools

Right-click an element and choose Inspect to open DevTools with that element selected.

You can also use:

• Command + Option + I on macOS
• Control + Shift + I on Windows and Linux
• F12 on many Windows and Linux keyboards

Use Command + Option + J on macOS or Control + Shift + J on Windows and Linux to open the Console directly.

See the official opening instructions for every method.

Elements: inspect HTML and CSS

The Elements panel shows the page’s live DOM, not necessarily the original HTML sent by the server. JavaScript may have added, removed, or changed elements after the page loaded.

Select an element to inspect:

• its attributes and child elements
• the CSS rules that match it
• overridden declarations
• computed styles
• layout information such as the box model, grid, and flexbox
• event listeners and accessibility properties

You can edit HTML and CSS in place to test an idea. These edits affect only the current page in your browser and normally disappear when you reload.

Use the element picker in the DevTools toolbar to select something directly from the page.

Device mode

The device toolbar simulates different viewport sizes, touch input, and device pixel ratios.

It is useful for finding responsive layout problems, but it is not a complete replacement for testing on a real phone or tablet. Real devices have different browsers, keyboards, hardware, and operating-system behavior.

Console: inspect values and run JavaScript

The Console shows messages, warnings, and errors produced by the page.

You can also run JavaScript in the context of the current page:

document.querySelector('h1')?.textContent

Useful console methods include:

console.log(value)
console.table(items)
console.error(error)
console.time('load')
console.timeEnd('load')

Do not paste code into the Console unless you understand it. Code executed there can access the current page and anything your logged-in session can access.

Network: inspect requests

Open the Network panel and reload the page. DevTools records requests made while it is open.

For each request you can inspect:

• URL and HTTP method
• status code
• request and response headers
• cookies
• request body
• response body
• timing information
• the code that initiated the request

You can filter by resource type, search headers and responses, disable the cache, simulate a slower connection, or work offline.

The panel can export a HAR file, which is useful for sharing a network trace. Review a HAR before sharing it because it may contain cookies, authorization headers, query parameters, and response data.

The Network panel guide covers its current tools.

Sources: debug JavaScript

The Sources panel is the JavaScript debugger.

Set a breakpoint on a line, trigger the behavior you want to inspect, and execution pauses before that line runs. While paused, you can:

• step over, into, or out of functions
• inspect local and global variables
• evaluate expressions
• view the call stack
• add watch expressions
• add conditional breakpoints

You can also pause on caught or uncaught exceptions, DOM changes, event listeners, and network requests.

Source maps connect generated code back to the source files written in TypeScript or processed by a bundler. Make sure your development build produces source maps if you want useful debugging.

Read the Sources panel documentation for the full debugger workflow.

Application: inspect storage and web app state

The Application panel groups browser-managed state and application features, including:

• cookies
• local storage and session storage
• IndexedDB
• Cache Storage
• service workers
• manifests

It can inspect, edit, and clear stored data for the current site. This is useful when an application behaves differently because of stale cache data, an old service worker, or an unexpected stored value.

Storage can contain private data and authentication tokens. Be careful when taking screenshots or sharing exported information.

See the Application panel overview.

Performance and memory

Use the Performance panel to record what the browser does while a page loads or while you interact with it.

The recording can reveal:

• long JavaScript tasks
• excessive rendering work
• layout shifts
• slow event handlers
• animation bottlenecks

Use the Memory panel when you suspect memory leaks or excessive allocation.

Performance recordings are detailed. Start with one specific slow interaction, record only that interaction, and inspect the busiest part of the timeline.

Lighthouse

The Lighthouse panel audits a page for areas such as performance, accessibility, best practices, and SEO.

Treat its report as a starting point, not a guarantee that the page is fast or accessible for every user. Run audits in a clean browser profile when extensions or local state might affect the result.

See the Lighthouse overview.

Changes do not automatically update your source files

Most changes made in DevTools are temporary. Reloading the page restores the files served by your application.

The Changes panel can show edits you made, and local overrides or a configured workspace can persist some changes. For normal development, reproduce the useful edit in your source code and verify it through your application’s build process.

Related posts about devtool: