DevTools Tips: Different ways to open DevTools
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 More Tools menu
Select > More Tools > Developer Tools.
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.