Chrome DevTools

This page is a mirror of https://developers.google.com/web/tools/chrome-devtools and needs to be updated.

Chrome DevTools

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, Chrome OS).

  • When you want to see logged messages or run JavaScript, press Command+Option+J (Mac) or Control+Shift+J (Windows, Linux, Chrome OS) 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.

Device Mode

Simulate mobile devices.

Elements panel

View and change the DOM and CSS.

Console panel

View messages and run JavaScript from the Console.

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

View and debug network activity.

Performance panel

Find ways to improve load and runtime performance.

Memory panel

Profile memory usage and track down leaks.

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

Debug mixed content issues, certificate problems, and more.

The best place to file feature requests for Chrome DevTools is the mailing list. The team needs to understand use cases, gauge community interest, and discuss feasibility before implementing any new features.

Additionnal tips

Comparing raw HTML and rendered HTML

Easily compare the raw HTML of a page and the rendered code with this plugin. It also provides a diff feature to see line by line what has been modified in the DOM by JavaScript.