Chrome DevTools is a set of web developer tools built directly into the Google Chrome browser. DevTools lets 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.
Open the command menu, run commands, open files, see other actions, and more.
A comprehensive reference of keyboard shortcuts.
See how a web page looks and behaves when JavaScript is disabled.
Simulate devices to build mobile-first websites.
Find text across all loaded resources with the Search panel.

Panels

Discover the power of each DevTools panel.
Learn how to view and change a page's DOM.
Learn how to view and change a page's CSS.
Log messages and run JavaScript.
View and edit files, create snippets, debug JavaScript, and set up a workspace.
Log network requests.
Evaluate website performance.
Find memory issues that affect page performance, including memory leaks, memory bloat, and frequent garbage collections.
Inspect, modify, and debug web apps, test cache, view storage, and more.
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.
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.
View information and debug media players per browser tab.
Inspect and modify animations.
Track changes to HTML, CSS, and JavaScript.
Find and analyze unused JavaScript and CSS code.
Check if source maps load successfully and load them manually.
Identify potential CSS improvements.
Optimize website speed with the Lighthouse panel.
Get actionable insights on your website's performance.
Emulate device sensors.
Emulate authenticators.