DevTools Tips: Different ways to open DevTools

Sofia Emelianova
Sofia Emelianova
GitHub

There are many ways to open Chrome DevTools. Pick your favorite.

The Right-click > Inspect

Right-click any element on the page and select Inspect.

The Inspect option in the drop-down menu.

The More Tools menu

Select Three-dot menu. > More Tools > Developer Tools.

The More Tools menu.

Shortcuts

If you're a keyboard person, here's a shortcut cheatsheet:

OS Elements Console Your last panel
Windows or Linux Ctrl + Shift + C Ctrl + Shift + J F12
Ctrl + Shift + I
Mac Cmd + Option + C Cmd + Option + J Fn + F12
Cmd + Option + I

The easy way to memorize the shortcuts:

  • C stands for CSS.
  • J for JavaScript.
  • I designates your choice.

Auto-open DevTools on every new tab

To learn how to automatically open Chrome DevTools on Windows, Linux, or MacOS, see Auto-open DevTools on every new tab.

Learn more