Open Chrome DevTools

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

# Open the Elements panel to inspect the DOM or CSS

When you want to inspect a DOM node's styles or attributes, right-click the element and select Inspect.

Figure 1. The Inspect option

Or press Command+Option+C (Mac) or Control+Shift+C (Windows, Linux, Chrome OS).

See Get Started With Viewing And Changing CSS.

# Open the Console panel to view 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 Get Started With The Console.

# Open the last panel you had open

Press Command+Option+I (Mac) or Control+Shift+I.

# Open DevTools from Chrome's main menu

Click Customize and control Google Chrome and then select More Tools > Developer Tools.

Figure 2. Opening DevTools from Chrome's main menu

# Auto-open DevTools on every new tab

Open Chrome from the Command line and pass the --auto-open-devtools-for-tabs flag.

Mac:

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --auto-open-devtools-for-tabs

This will only work if an instance of Chrome is not already running. From then on, every new tab will automatically open DevTools until the user fully quits Chrome.