DevTools Tips hero logo

DevTools Tips: Different ways to open DevTools

Published on

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:

OSElementsConsoleYour last panel
Windows or LinuxCtrl + Shift + CCtrl + Shift + JF12
Ctrl + Shift + I
MacCmd + Option + CCmd + Option + JFn + 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

Updated on Improve article

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