Abrir o Chrome DevTools

Kayce Basques
Kayce Basques
X GitHub Falha
Jecelyn Yeen
Sofia Emelianova
Sofia Emelianova
GitHub

Há muitas maneiras de abrir o Chrome DevTools. Escolha sua forma favorita nesta referência abrangente.

Acesse o DevTools usando a interface do Chrome ou o teclado:

Além disso, aprenda a abrir automaticamente as Ferramentas do desenvolvedor 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.

A opção "Inspect" em um menu suspenso no Chrome.

O DevTools abre o painel Elements e seleciona o elemento na árvore DOM. Na guia Estilos, é possível ver as regras de CSS aplicadas ao elemento selecionado.

Um elemento selecionado no painel "Elementos".

Abra 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 > Ferramentas para desenvolvedores.

A opção "Ferramentas para desenvolvedores" selecionada no menu de três pontos.

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 + Opção + 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 indica 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 de uma página. Você também pode clicar em qualquer elemento para conferir o CSS dele na guia Elements > Styles.

Painel "Elements" no modo de inspeção com uma dica

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 flag --auto-open-devtools-for-tabs:

  1. Saia de qualquer instância do Chrome em execução.

  2. Execute seu aplicativo de terminal ou linha de comando favorito.

  3. Dependendo do sistema operacional, execute o seguinte comando:

  • macOS:

    open -a "Google Chrome" --args --auto-open-devtools-for-tabs

  • Windows:

    start chrome --auto-open-devtools-for-tabs

  • Linux:

    google-chrome --auto-open-devtools-for-tabs

O DevTools vai abrir automaticamente para cada nova guia até que você feche o Chrome.

A seguir

A seguir, assista ao 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.