Abrir o Chrome DevTools

Kayce Basques
Kayce Basques
Sofia Emelianova
Sofia Emelianova

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 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.

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 das Ferramentas do desenvolvedor, clique no botão Menu de três pontos. à direita da barra de endereço e selecione Mais ferramentas > Ferramentas do desenvolvedor.

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

Também é 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 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

Confira uma maneira fácil de memorizar os atalhos:

  • C significa CSS.
  • J para JavaScript.
  • I indica sua escolha.

O atalho C abre o painel Elements no modo de inspetor Inspecionar.. Esse modo mostra dicas úteis quando você passa o cursor sobre elementos em 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 sinalização --auto-open-devtools-for-tabs:

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

  2. Execute seu terminal ou aplicativo de 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

Em seguida, assista o vídeo a seguir para aprender alguns atalhos e configurações úteis para navegar mais rápido no DevTools.

Para uma experiência de aprendizado mais prática, consulte como personalizar o DevTools.