Chrome DevTools is a set of web developer tools built directly into the Google Chrome browser. DevTools can help you edit pages on-the-fly and diagnose problems quickly, which helps you build better websites, faster.
Get started
All of the ways that you can open Chrome DevTools.
Stay up to date with the latest DevTools changes.
A series of bite-size videos to help you to learn features in DevTools.

Commands and shortcuts

Quickly accomplish tasks.
A guide on how to open the Command Menu, run commands, open files, see other actions, and more.
Read the doc
The canonical documentation for Chrome DevTools keyboard shortcuts.
Read the doc
See how a web page looks and behaves when JavaScript is disabled.
Read the doc
Use virtual devices in Chrome's Device Mode to build mobile-first websites.
Find text across all loaded resources with the Search tab.

Panels

Discover the power of each DevTools panel.
Learn how to view and change a page's DOM using Chrome DevTools.
Read the docs
Learn how to view and change a page's CSS using Chrome DevTools.
Read the docs
Log messages and run JavaScript.
Read the docs
View and edit files, create Snippets, debug JavaScript, and set up a Workspace.
Read the docs
Log network requests.
Read the docs
Evaluate site performance with DevTools.
Read the docs
Find memory issues that affect page performance, including memory leaks, memory bloat, and frequent garbage collections.
Read the docs
Inspect, modify, and debug web apps, test cache, and view storage.
Read the docs
Record, replay, measure user flows, and edit their steps.
Read the docs
Discover a collection of options that affect web content rendering.
Read the docs
Find and fix problems with your website.
Use the Security panel to make sure that a page is fully protected by HTTPS.
Inspect an ArrayBuffer, TypedArray, or DataView in JavaScript, as well as WebAssembly and memory of C++ Wasm apps.
Override the user agent string. Disable Select automatically and choose from the list or enter a custom string.
Use the Media panel to view information and debug the media players per browser tab.
Inspect and modify animations with the Animations tab.
Track changes to HTML, CSS, and JavaScript.
Find and analyze unused JavaScript and CSS code in Chrome DevTools.
Use the Developer Resources drawer tab to check if source maps load successfully and load them manually.
Identify potential CSS improvements with the CSS Overview panel.
Optimize website speed with the Lighthouse panel.
Get actionable insights on your website's performance with the Performance insights panel.
Emulate device sensors.
Emulate authenticators.

Settings reference