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 Elementos e seleciona o elemento na árvore do 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 Mais ferramentas > Ferramentas para desenvolvedores.

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 + Opção + 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 Elementos no modo do inspetor . Esse modo mostra dicas úteis quando você passa o cursor sobre elementos em uma página. Também é possível clicar em qualquer elemento para visualizar o CSS dele na guia Elementos > Estilos.

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

Para conferir a lista completa de atalhos do DevTools, consulte Atalhos de 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

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.