Abrir o Chrome DevTools

Kayce Basques
Kayce Basques
Sofia Emelianova
Sofia Emelianova

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:

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 "Inspecionar" em um menu suspenso do Chrome.

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.

Um elemento selecionado no painel Elementos.

Abre o último painel que você usou no menu principal do Chrome

Para abrir o último painel do DevTools, clique no botão Menu de três pontos. à 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 + 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 Inspecionar.. 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.

O painel Elementos no modo do inspetor 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 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.