Chrome DevTools

A guide on how to open the Command Menu, run commands, open files, see other actions, and more.

Open the Command Menu and run the Disable JavaScript command.

The canonical documentation for Chrome DevTools keyboard shortcuts.

How to view nodes, search for nodes, edit nodes, reference nodes in the Console, break on node changes, and more.

View and filter properties of DOM objects.

Learn how to use Chrome DevTools to view and change a page's CSS.

Learn how to use Chrome DevTools to view and change CSS grids.

Learn how to use Chrome DevTools to inspect, modify and debug CSS flexbox layouts.

Learn how to use Chrome DevTools to inspect, modify, and debug CSS container queries.

Discover new workflows for viewing and changing CSS in Chrome DevTools.

Toggle various overlays and speed up DOM tree navigation with badges.

The main uses of the Chrome DevTools Console are logging messages and running JavaScript.

Learn how to log messages to the Console.

Learn how to run JavaScript in the Console.

If you find yourself typing the same JavaScript expressions into the Console repeatedly, try Live Expressions instead.

Learn how to format and style messages in the Console.

A comprehensive reference on every feature and behavior related to the Console UI in Chrome DevTools.

Use the Console API to write messages to the Console.

A reference of convenience functions available in the Chrome DevTools Console.

View and edit files, create Snippets, debug JavaScript, and set up Workspaces in the Sources panel of Chrome DevTools.

Learn how to use Chrome DevTools to find and fix JavaScript bugs.

Learn about all the ways you can pause your code in Chrome DevTools.

Snippets are small scripts that you can author and execute within the Sources panel of Chrome DevTools. You can access and run them from any page. When you run a Snippet, it executes from the context of the currently open page.

Learn how to save changes made within DevTools to disk.

Discover new debugging workflows in this comprehensive reference of Chrome DevTools debugging features.

A tutorial on the most popular network-related features in Chrome DevTools.

A comprehensive reference of Chrome DevTools Network panel features.

Organize resources by frame, domain, type, or other criteria.

Learn how to evaluate runtime performance in Chrome DevTools.

A reference on all the ways to record and analyze performance in Chrome DevTools.

The timeline events mode displays all events triggered while making a recording. Use the timeline event reference to learn more about each timeline event type.

This section describes common terms used in memory analysis, and is applicable to a variety of memory profiling tools for different languages.

Learn how to use Chrome and DevTools to find memory issues that affect page performance, including memory leaks, memory bloat, and frequent garbage collections.

Learn how to record heap snapshots with the Chrome DevTools heap profiler and find memory leaks.

Use the allocation profiler tool to find objects that aren't being properly garbage collected, and continue to retain memory.

Use the Application panel to inspect, modify, and debug web app manifests, service workers, and service worker caches.

How to view and edit localStorage with the Local Storage pane and the Console.

How to view and edit sessionStorage with the Session Storage pane and the Console.

How to view and change IndexedDB data with the Application panel and Snippets.

How to view Web SQL data from the Application panel of Chrome DevTools.

Learn how to view, edit, and delete a page's HTTP cookies using Chrome DevTools.

How to view Cache data from the Application panel of Chrome DevTools.

Ensure your pages are optimized for back/forward caching.

How to debug Background Fetch, Background Sync, Notifications, Push Messages, and view reports with Chrome DevTools.

How to view Application Cache data from the Application panel of Chrome DevTools.

Record, replay, measure user flows, and edit their steps with the Recorder panel.

A comprehensive reference of Chrome DevTools Recorder panel features.

Discover a collection of options that affect web content rendering.

Spot repainting, layout shifts, layers and tiles, scrolling issues, see rendering statistics and Core Web Vitals.

Emulate prefers-color-scheme, media type, forced-colors, prefers-contrast, prefers-reduced-motion, color-gamut.

Highlight ad frames, emulate focus on a page, disable local fonts and image formats, enable an automatic dark theme, and emulate vision deficiencies.

Open the Sensors tab and select coordinates from the Geolocation list.

Open the Sensors tab and go to the Orientation section.

Remote debug live content on an Android device from a Windows, Mac, or Linux computer.

Host a site on a development machine web server, and then access the content from an Android device.

Debug WebViews in your native Android apps using Chrome Developer Tools.

A comprehensive reference of accessibility features in Chrome DevTools.

A guide on navigating Chrome DevTools using assistive technology like screen readers.

Open the Console, create a Live Expression, and set the expression to document.activeElement.

A list of ways you can customize Chrome DevTools.

How to turn on the dark theme in Chrome DevTools.

How to move Chrome DevTools to the bottom or left of your viewport, or to a separate window.

Ignore content scripts from Settings > Ignore List.