Abrir o Chrome DevTools

Kayce Basques

Jecelyn Yeen

Sofia Emelianova

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

É possível acessar o DevTools usando a interface do Chrome ou o teclado:

• Nos menus suspensos do Chrome.
• Com atalhos dedicados que abrem Elementos, Console ou o último painel usado.

Além disso, saiba como abrir o DevTools automaticamente em cada nova guia.

Abrir o DevTools nos menus do Chrome

Se você preferir uma 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.

O DevTools abre o painel Elementos e seleciona o elemento na árvore do DOM. Na guia Estilos, você pode conferir as regras CSS aplicadas ao elemento selecionado.

Abra o último painel usado no menu principal do Chrome

Para abrir o último painel do DevTools, clique no botão more_vert à direita da barra de endereço e selecione Mais ferramentas > Ferramentas para desenvolvedores.

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 seu último painel

Se preferir usar o teclado, pressione um atalho no Chrome de acordo com 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

Uma maneira fácil de memorizar os atalhos:

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

O atalho C abre o painel Elementos no modo inspetor ink_selection. 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 ver o CSS dele na guia Elementos > Estilos.

Para conferir a lista completa de atalhos do DevTools, consulte Atalhos de teclado.

Com o DevTools aberto, recarregue a página com ou sem cache.

Com o DevTools aberto, é possível recarregar a página de três maneiras. Na barra de ações principal da janela do Chrome, toque e pressione o botão atualizar Recarregar e escolha uma das opções:

• Atualização normal. Usa o cache para acelerar o tempo de recarga.

  Atalho: Cmd+R (macOS) ou Ctrl+R (Windows/Linux).

  Observação: check_box Desativar cache no painel Rede força todas as recargas normais a não usar o cache.

• Atualização forçada. Ignora o cache, mas não o esvazia.

  Atalho: Cmd+Shift+R (macOS) ou Ctrl+Shift+R (Windows/Linux).

• Limpe o cache e faça uma atualização forçada. Esvazia o cache de todos os sites antes de recarregar.

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

   Importante:essa flag funciona apenas na primeira instância do Chrome que você abre. Se isso não funcionar, por exemplo, no Windows, encerre todos os processos do Chrome no Gerenciador de tarefas.

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 em todas as novas guias até que você feche o Chrome.

A seguir

Sucesso:parabéns! Você desbloqueou o poder do Chrome DevTools.

Em seguida, assista o vídeo abaixo 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, saiba como personalizar o DevTools.