![Sofia Emelianova](https://web.dev/images/authors/sofiayem.jpg) Sofia Emelianova [GitHub](https://github.com/sofiayem)

<br />

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

[Video](https://www.youtube.com/watch?v=X65TAP8a530)

## The Right-click \> Inspect

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

![The Inspect option in the drop-down menu.](https://developer.chrome.com/static/blog/devtools-tips-15/image/the-inspect-option-the-d-62b7b93fd1e41.png)

## The More Tools menu

Select ![Three-dot menu.](https://developer.chrome.com/static/blog/devtools-tips-15/image/three-dot-menu-957a511ffbbbb.svg) \> **More Tools** \> **Developer Tools**.

![The More Tools menu.](https://developer.chrome.com/static/blog/devtools-tips-15/image/the-more-tools-menu-f7040195ebd6c.png)

## Shortcuts

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

| OS | Elements | Console | Your last panel |
|---|---|---|---|
| Windows or Linux | <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + **C** | <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + **J** | <kbd>F12</kbd> <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + **I** |
| Mac | <kbd>Cmd</kbd> + <kbd>Option</kbd> + **C** | <kbd>Cmd</kbd> + <kbd>Option</kbd> + **J** | <kbd>Fn</kbd> + <kbd>F12</kbd> <kbd>Cmd</kbd> + <kbd>Option</kbd> + **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](https://developer.chrome.com/docs/devtools/open.md.txt#auto).

## Learn more

- [Open Chrome DevTools](https://developer.chrome.com/docs/devtools/open.md.txt)
- [Full list of DevTools keyboard shortcuts](https://developer.chrome.com/docs/devtools/shortcuts.md.txt)