Há muitas maneiras de abrir o Chrome DevTools. Escolha sua forma favorita nesta referência abrangente.
Acesse as DevTools usando a interface ou o teclado do Chrome:
- Nos menus suspensos do Chrome.
- Com atalhos dedicados que abrem Elementos, Console ou o último painel que você usou.
Além disso, saiba como abrir o DevTools automaticamente para cada nova guia.
Abrir o DevTools nos menus do Chrome
Caso prefira usar a interface, acesse as DevTools nos menus suspensos do Chrome.
Abra o painel "Elementos" para inspecionar o DOM ou o CSS
Para inspecionar, clique com o botão direito do mouse em um elemento em uma página e selecione Inspecionar.
O DevTools abre o painel Elementos e seleciona o elemento na árvore do DOM. No painel Estilos, você encontra as regras de CSS aplicadas ao elemento selecionado.
Abrir o último painel usado 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 > Developer Tools.
Se preferir, abra o último painel com um atalho. Saiba mais na próxima seção.
Abrir painéis com atalhos: Elementos, Console ou seu último painel
Se preferir usar o 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 designa sua escolha.
O atalho C abre o painel Elementos no modo do inspetor 
. Esse modo mostra dicas úteis quando você passa o cursor sobre os elementos em uma página. Também é possível clicar em qualquer elemento para visualizar o CSS no painel Elementos > Estilos.
Para ver a lista completa de atalhos do DevTools, consulte 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 seu 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é você fechar o Chrome.
Qual é a próxima etapa?
A seguir, 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ática, consulte como personalizar o DevTools.