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.](https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/ei5j1YZHwwCR4Tudl8cM.png?auto=format)
The More Tools menu
Select > More Tools > Developer Tools.
![The More Tools menu.](https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/JzWi1hGKRetwj5R1VHfY.png?auto=format)
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
Updated on • Improve article