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.
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.
The canonical documentation for Chrome DevTools keyboard shortcuts.
See how a web page looks and behaves when JavaScript is disabled.
Use virtual devices in Chrome's Device Mode to build mobile-first websites.
Find text across all loaded resources with the Search tab.


Discover the power of each DevTools panel.
Learn how to view and change a page's DOM using Chrome DevTools.
Learn how to view and change a page's CSS using Chrome DevTools.
Log messages and run JavaScript.
View and edit files, create Snippets, debug JavaScript, and set up a Workspace.
Log network requests.
Evaluate site performance with DevTools.
Find memory issues that affect page performance, including memory leaks, memory bloat, and frequent garbage collections.
Inspect, modify, and debug web apps, test cache, and view storage.
Record, replay, measure user flows, and edit their steps.
Discover a collection of options that affect web content rendering.
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.