No Windows a resposta é F12, e é só isso mesmo. Não há menu para ativar primeiro, nenhum segundo dispositivo, nenhum cabo. Chrome, Edge e Firefox abrem suas ferramentas de desenvolvedor na mesma tecla, e diferentemente de um Mac ou um iPhone, não há nada se interpondo.

Isso significa que se você está lendo isto, provavelmente abrir não é o que está atrapalhando. A parte que consome uma tarde das pessoas é o que vem depois: você foi solicitado a fornecer algo específico, o painel à sua frente não é obviamente isso, e as ferramentas não dizem qual das oito abas contém a resposta.

Abra

Chrome e Edge, que são as mesmas ferramentas porque Edge é construído em Chromium:

  • F12 ou Ctrl+Shift+I abre qualquer painel que você usou por último.
  • Ctrl+Shift+J abre o Console diretamente.
  • Ctrl+Shift+C abre o painel Elementos e ativa o seletor de elementos ao mesmo tempo.

Firefox difere em um dos três:

  • F12 abre as ferramentas.
  • Ctrl+Shift+K abre o Console da Web.
  • Ctrl+Shift+C abre o Inspetor com o seletor ativado, como no Chrome.

Clicar com o botão direito em qualquer coisa na página e escolher Inspecionar faz o mesmo que Ctrl+Shift+C e tem a vantagem de selecionar a coisa na qual você clicou com o botão direito. Em um laptop onde a primeira linha está definida como teclas de mídia, F12 pode precisar de Fn+F12; os atalhos Ctrl+Shift evitam a questão totalmente.

O detalhe que consome mais tempo

Leia o primeiro atalho novamente: F12 abre qualquer painel que você usou por último. A própria documentação da Microsoft diz exatamente isso, e o Chrome se comporta da mesma forma.

Então, a única tecla que todos conhecem é a que não diz onde você vai parar. Alguém que usou por último a aba Rede pressiona F12, vê uma parede de solicitações e conclui que o Console está vazio. O Console não está vazio. Eles não estão olhando para ele.

É por isso que Ctrl+Shift+J vale mais que F12. É o atalho que significa “a coisa que meu colega realmente me pediu”.

Qual painel responde qual pergunta

Os dois pedidos que parecem iguais mas não são:

“Inspecionar elemento” significa o painel Elementos. A pergunta por trás disso é sobre o que está na página: por que este botão é da cor errada, por que o texto é cortado, como se chama essa div. Você está olhando para o HTML ativo e o CSS aplicado a ele.

“Abra o console e diga-me o que ele diz” significa o painel Console. A pergunta por trás disso é sobre o que deu errado enquanto a página executava. Linhas vermelhas aqui são erros de JavaScript, e um deles geralmente é a razão pela qual o botão não fez nada.

Elas são perguntas diferentes e têm respostas diferentes, é por isso que enviar uma captura de tela do painel Elementos para alguém que perguntou sobre o Console não ajuda ninguém.

O terceiro, que as pessoas solicitam com menos frequência e que responde mais:

“Envie-me a aba Rede” significa o painel Rede, e é sobre o que a página pediu e o que retornou. Abrindo-a e o que XHR realmente significa é seu próprio guia curto, porque tem uma armadilha: só grava enquanto está aberto.

Fraco
"Abri o inspetor de elementos e não vejo nada errado."
Melhor
"Aba Console, duas linhas vermelhas: Uncaught TypeError: Cannot read properties of null (reading 'value') at checkout.js:214. Acontece quando pressiono Pagar, nada mais na página muda."

O que copiar e o que não copiar

Depois que você encontrou a linha vermelha, a coisa útil é o texto, não uma fotografia dela.

Clique com o botão direito em uma mensagem do Console e você obtém opções Copiar. Copiar o texto da mensagem dá a quem perguntou algo que ele pode pesquisar em seu próprio código. Uma captura de tela lhe dá algo que ele precisa digitar novamente, e capturas de tela do Console geralmente são cortadas logo acima do nome do arquivo e do número da linha, que é a parte que o teria localizado.

Duas coisas dignas de inclusão que as pessoas deixam de fora:

  • Expanda o erro primeiro. Um erro recolhido mostra uma linha. A seta ao lado dele abre a pilha, e a pilha é o que aponta para onde aconteceu.
  • Diga o que você fez. Um erro do Console sem uma ação ao lado é um fato sem uma causa. “Aparece quando pressiono Pagar” o transforma em algo reproduzível.

Session Replay

Extensão Chrome gratuita. Um clique na página que está se comportando mal captura a captura de tela, o Console e o registro de rede, e lhe entrega um link para colar no ticket.

Obter a extensão

Duas coisas específicas do Windows dignas de conhecer

Uma atualização forçada é Ctrl+F5 ou Ctrl+Shift+R. Quando alguém diz “funciona para mim”, um arquivo em cache obsoleto é uma das razões comuns, e uma atualização forçada é a maneira rápida de descartar isso antes que alguém comece a procurar no código.

Ctrl+Shift+P abre o Menu de Comandos, que é uma caixa de pesquisa para cada função nas ferramentas. Se você sabe o que quer mas não onde encontrá-lo, digitá-lo lá é mais rápido do que procurar nos painéis, e é a maneira mais rápida de sair do problema “qual era aquela aba” quando você tem mais de três abertas.

O que levar disso

No Windows, abrir as ferramentas nunca foi difícil. O difícil era saber qual delas estava sendo solicitada.

Ctrl+Shift+J para o Console, Ctrl+Shift+C para o elemento, e F12 apenas quando você já sabe qual painel estava usando. Depois copie o texto em vez de fotografá-lo, expanda o erro antes de copiar, e diga o que você estava fazendo quando ele apareceu. Isso transforma “Dei uma olhada e parece estar bem” em um relatório com o qual alguém pode agir sem uma segunda conversa.