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.

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:

• View and Change the DOM

• View and Change a Page's Styles (CSS)

• Debug JavaScript

• View Messages and Run JavaScript in the Console

• Optimize Website Speed

• Inspect Network Activity

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

• Elements Panel

• Console Panel

• Sources Panel

• Network Panel

• Performance Panel

• Memory Panel

• Application Panel

• Security Panel