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.
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.
Open the command menu, run commands, open files, see other actions, and more.
Read the doc
A comprehensive reference of keyboard shortcuts.
Read the doc
See how a web page looks and behaves when JavaScript is disabled.
Read the doc
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.
Read the docs
Learn how to view and change a page's CSS.
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 website performance.
Read the docs
Find memory issues that affect page performance, including memory leaks, and more.
Read the docs
Inspect, modify, and debug web apps, test cache, view storage, and more.
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
Inspect and debug saved addresses.
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.
Test your site by blocking network requests.
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.
Monitor load and runtime performance.
View and edit source files while having access to other panels.
Emulate device sensors.
View WebAudio API metrics.
Emulate authenticators.

Settings reference