"O que é o console do navegador, por que eu preciso dele e como abri-lo?"

Apresentação

Alguns testes requerem a abertura do console. O console da web faz parte das ferramentas de desenvolvedor fornecidas pelo seu navegador, exibindo informações sobre tratamento de erros implementadas pelos desenvolvedores de um site ou dados coletados pelo navegador, especialmente relacionados a problemas com JavaScript. Isso auxilia os clientes, especialmente os desenvolvedores, a identificar o que está causando o bug.

A abertura do console será explicada em detalhes, passo a passo, para diversos navegadores e sistemas operacionais no artigo a seguir.

É importante observar que grande parte das etapas necessárias para configurar o sistema só precisa ser realizada uma vez, e a cada utilização subsequente, será exigido um número reduzido de passos.

Obtendo logs do console do navegador no Windows e macOS

Compatível com Microsoft Edge, Chrome, Firefox, Opera e Brave

Abra o site que deseja testar.
No teclado, pressione Ctrl + Shift + I (Windows) ou alt + cmd + I (macOS).
Certifique-se de estar na guia Console (se a guia do Console ainda não estiver em foco).

Safari

Pré-requisito:

Abra o navegador Safari no seu computador macOS.
Acesse o menu Preferências (pressione cmd + , no teclado ou vá até Safari na barra de menu e selecione Preferências...).
Vá até a guia Avançado.
Marque a opção Mostrar menu Desenvolver na barra de menu. Após fazer isso, você deverá ser capaz de visualizar o menu Desenvolver na barra de menu.

Depois de ativar o menu Desenvolver:

Abra o site que deseja testar.
No teclado, pressione alt + cmd + C (macOS).
Certifique-se de estar na guia Console (se a guia do Console ainda não estiver em foco).

Em todas as situações mencionadas acima, o Console deverá estar aberto. Se, por algum motivo, ele não abrir, há uma solução rápida. Basta clicar com o botão direito do mouse em qualquer lugar do site e, no menu que aparecer, selecionar ❝Inspecionar❞ ou ❝Elemento de inspeção❞ para direcionar à guia do Console.

Se quiser modificar a posição da sobreposição das ferramentas de desenvolvedor, clique no ícone de ❝três pontos❞ no canto superior direito da sobreposição. Lá, você terá a opção de selecionar o lado do Dock desejado.

Obtendo logs do console do navegador no Android

Chrome

Não é possível exibir o console em seu dispositivo móvel, mas você pode visualizá-lo em um computador conectado. Para realizar isso, as opções de desenvolvedor e a depuração USB no seu dispositivo Android precisam estar ativadas. Se já fez isso, pode pular para a Parte 2.

Parte 1: Preparando seu telefone Android para a Depuração USB

Abra o aplicativo Configurações.
Procure pelo Número de compilação (normalmente localizado em ❝Informações de software❞ na seção ❝Sobre o telefone❞).
Toque no Número de compilação repetidamente até ver a mensagem ❝Você agora é um desenvolvedor!❞
Agora que você ativou as opções de desenvolvedor, localize-as nas Configurações e abra o menu correspondente.
Se as opções de desenvolvedor ainda não estiverem ativadas, ative-as tocando no botão de alternância
Procure pela opção de depuração USB e ative-a tocando no botão de alternância.

Parte 2: Conectando o Chrome em seu computador com o seu dispositivo Android

No seu telefone Android, abra o site que precisa ser testado.
Abra o Google Chrome no seu computador com Windows ou macOS.
Na barra de URL, digite chrome://inspect e vá para essa página.
Verifique se a caixa "Descobrir dispositivos USB" está ativada.
Conecte seu telefone Android ao seu computador usando um cabo USB.
Se esta for a primeira vez que você está usando a depuração USB em seu telefone Android, poderá ver uma mensagem ❝Permitir depuração USB?❞ – toque em ❝OK❞. Você também pode marcar ❝Sempre permitir deste computador❞ e tocar em ❝OK❞ para evitar repetidas solicitações ao tentar obter logs do navegador.
Agora, você deverá visualizar seu dispositivo na seção ❝Destino Remoto❞. Além disso, verá abas abertas no navegador do seu telefone. Para iniciar o teste, clique no botão Inspecionar abaixo da aba que deseja testar. Uma nova janela será aberta, exibindo a tela do seu dispositivo juntamente com as Ferramentas de Desenvolvedor (certifique-se de que a guia Console esteja em foco nas Ferramentas de Desenvolvedor).

Solução de problemas: Se o dispositivo não for detectado, experimente as seguintes soluções:

Desconecte o telefone do cabo USB e reconecte-o.
Experimente trocar as portas USB do seu computador.
Teste outro cabo USB.
Se nenhuma das soluções acima resolver o problema, você pode encontrar orientações adicionais para solução de problemas neste post no fórum de desenvolvedores do Google.

Obtendo logs do console do navegador de um dispositivo iOS no macOS

Safari

Para capturar logs do console ddo navegador no Safari em um dispositivo iOS, é necessário ter um computador com macOS. Para conseguir logs do navegador Safari em seu dispositivo iOS, é preciso ativar o menu Desenvolver no Safari em seu macOS e habilitar o Inspetor da Web nas configurações do Safari em seu dispositivo iOS. Se você já realizou essas etapas, pode prosseguir para a Parte 2.

Parte 1: Preparando seu navegador Safari no macOS e dispositivos iOS para depuração

Abra o navegador Safari em seu computador macOS.
Acesse o menu Preferências (pressione cmd + , no teclado ou clique em Safari na barra de menu e selecione --> Preferências...)
Vá até a guia Avançado.
Marque a opção Mostrar menu Desenvolver na barra de menu. Após fazer isso, você verá o menu Desenvolver na barra de menu.
No seu dispositivo iOS, abra Configurações.
Localize e abra o aplicativo Safari.
Role até o final e toque na opção Avançado.
Ative o Inspetor da Web tocando no botão de alternância.

Parte 2: Obtendo logs do console

Abra o aplicativo Safari no seu dispositivo iOS e acesse o site que precisa ser testado.
Conecte seu dispositivo iOS ao seu macOS usando um cabo USB.
2a. Se a mensagem "Confiar neste computador?" faparecer no seu dispositivo, toque em "Confiar" e, se necessário, insira a senha do dispositivo.
Abra o aplicativo Safari no seu macOS.
Clique no menu "Desenvolver" na barra de menu.
Passe o mouse sobre o nome do seu dispositivo iOS e clique no nome do site que você deseja testar.
Agora você deverá ver o Inspetor da Web e pode iniciar o teste (certifique-se de que a guia Console esteja em foco no Inspetor da Web).