Há muitas maneiras de abrir o Chrome DevTools. Escolha seu caminho favorito nessa referência abrangente.
Acesse o DevTools usando a interface do Chrome ou o teclado:
- Nos menus suspensos do Chrome.
- Com atalhos dedicados que abrem Elements, Elements ou o último painel que você usou.
Além disso, aprenda a abrir o DevTools automaticamente para cada nova guia.
Abrir o DevTools nos menus do Chrome
Se preferir a interface, acesse o DevTools nos menus suspensos do Chrome.
Abra o painel Elementos para inspecionar o DOM ou CSS
Para inspecionar, clique com o botão direito do mouse em um elemento de uma página e selecione Inspecionar.
O DevTools abre o painel Elements e seleciona o elemento na árvore do DOM. No painel Estilos, você pode conferir as regras de CSS aplicadas ao elemento selecionado.
Abre o último painel que você usou no menu principal do Chrome
Para abrir o último painel do DevTools, clique no botão 
à direita da barra de endereço e selecione More Tools > Ferramentas para desenvolvedores.
Como alternativa, é possível abrir o último painel com um atalho. Consulte a próxima seção para saber mais.
Abrir painéis com atalhos: Elementos, Console ou o último painel
Se preferir um teclado, pressione um atalho no Chrome, dependendo do seu sistema operacional:
| SO | Elementos | Console | Seu último painel |
|---|---|---|---|
| Windows ou Linux | Ctrl + Shift + C | Ctrl + Shift + J | F12 Ctrl + Shift + I |
| Mac | Cmd + Option + C | Cmd + Option + J | Fn + F12 Cmd + Option + I |
Veja uma maneira fácil de memorizar os atalhos:
- C significa CSS.
- J para JavaScript.
- I determina sua escolha.
O atalho C abre o painel Elementos no modo de inspetor 
. Esse modo mostra dicas úteis quando você passa o cursor sobre os elementos de uma página. Também é possível clicar em qualquer elemento para visualizar seu CSS em Elements > Painel Styles.
A lista completa de atalhos do DevTools está disponível em Atalhos do teclado.
Abrir o DevTools automaticamente em cada nova guia
Execute o Chrome na linha de comando e transmita a sinalização --auto-open-devtools-for-tabs:
Saia de qualquer instância do Chrome em execução.
Execute seu terminal ou aplicativo de linha de comando favorito.
Dependendo do sistema operacional, execute o seguinte comando:
MacOS:
open -a "Google Chrome" --args --auto-open-devtools-for-tabsWindows:
start chrome --auto-open-devtools-for-tabsLinux:
google-chrome --auto-open-devtools-for-tabs
O DevTools será aberto automaticamente para cada nova guia até que você feche o Chrome.
A seguir
Em seguida, assista o vídeo a seguir para aprender alguns atalhos e configurações úteis para uma navegação mais rápida no DevTools.
Para uma experiência de aprendizado mais prático, consulte como personalizar o DevTools.