Overview Open Chrome DevTools What's New in DevTools DevTools tips Simulate mobile devices with Device Mode Performance insights: Get actionable insights on your website's performance Lighthouse: Optimize website speed Animations: Inspect and modify CSS animation effects Changes: Track your HTML, CSS, and JavaScript changes Coverage: Find unused JavaScript and CSS CSS Overview: Identify potential CSS improvements Issues: Find and fix problems Media: View and debug media players information Memory Inspector: Inspect ArrayBuffer, TypedArray, DataView, and Wasm Memory. Network conditions: Override the user agent string Security: Understand security issues Search: Find text across all loaded resources Sensors: Emulate device sensors WebAuthn: Emulate authenticators Customize DevTools Engineering blog
Overview Open Chrome DevTools What's New in DevTools DevTools tips Simulate mobile devices with Device Mode Performance insights: Get actionable insights on your website's performance Lighthouse: Optimize website speed Animations: Inspect and modify CSS animation effects Changes: Track your HTML, CSS, and JavaScript changes Coverage: Find unused JavaScript and CSS CSS Overview: Identify potential CSS improvements Issues: Find and fix problems Media: View and debug media players information Memory Inspector: Inspect ArrayBuffer, TypedArray, DataView, and Wasm Memory. Network conditions: Override the user agent string Security: Understand security issues Search: Find text across all loaded resources Sensors: Emulate device sensors WebAuthn: Emulate authenticators Customize DevTools Engineering blog

Overview

Published on

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 ultimately helps you build better websites, faster.

Check out the video for live demonstrations of core DevTools workflows, including debugging CSS, prototyping CSS, debugging JavaScript, and analyzing load performance.

Open DevTools

There are many ways to open DevTools, because different users want quick access to different parts of the DevTools UI.

  • When you want to work with the DOM or CSS, right-click an element on the page and select Inspect to jump into the Elements panel. Or press Command+Option+C (Mac) or Control+Shift+C (Windows, Linux, ChromeOS).
  • When you want to see logged messages or run JavaScript, press Command+Option+J (Mac) or Control+Shift+J (Windows, Linux, ChromeOS) to jump straight into the Console panel.

See Open Chrome DevTools for more details and workflows.

Get started

If you're a more experienced web developer, here are the recommended starting points for learning how DevTools can improve your productivity:

Discover DevTools

The DevTools UI can be a little overwhelming... there are so many tabs! But, if you take some time to get familiar with each tab to understand what's possible, you may discover that DevTools can seriously boost your productivity.

Note: In the DevTools docs, the top-level tabs are called panels.

Device Mode

Device Mode

Simulate mobile devices.

Elements panel & CSS

Elements Panel

View and change the DOM and CSS.

Console panel

Console Panel

View messages and run JavaScript from the Console.

Sources panel

Sources Panel

Debug JavaScript, persist changes made in DevTools across page reloads, save and run snippets of JavaScript, and save changes that you make in DevTools to disk.

Network panel

Network Panel

View and debug network activity.

Recorder panel

Record, replay, and measure user flows.

Recorder panel.

Performance panel

Timeline Panel

Find ways to improve load and runtime performance.

Memory panel

Profiles Panel

Application panel

Application Panel

Inspect all resources that are loaded, including IndexedDB or Web SQL databases, local and session storage, cookies, Application Cache, images, fonts, and stylesheets.

Security panel

Security Panel

Debug mixed content issues, certificate problems, and more.

Community

File bug reports and feature requests in Crbug, which is the engineering team's bug tracker.

Crbug

If you want to alert us to a bug or feature request but don't have much time, you're welcome to send a tweet to @ChromeDevTools. We reply and send announcements from the account regularly.

Twitter

For help with using DevTools, Stack Overflow is the best channel.

Stack Overflow

To file bugs or feature requests on the DevTools docs, open a GitHub issue.

Docs Issues

DevTools also has a Slack channel, but the team doesn't monitor it consistently.

Slack

Updated on Improve article

We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.