Abrir o Chrome DevTools

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

Você pode acessar o DevTools usando a interface ou o teclado do Chrome:

• Nos menus suspensos do Chrome.
• Use 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

Se você preferir a interface, acesse o 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 de 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.

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

Outra opção é abrir o último painel usando 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 selecione 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 conferir 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:

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