Usar a consola do navegador para depurar erros

Quando um botão não faz nada, um formulário não é enviado ou uma página aparece estragada, a causa aparece quase sempre nas ferramentas de programador do navegador. Todas têm os mesmos dois separadores que vamos usar: Consola e Rede.

Abrir as ferramentas

• Firefox: Ctrl + Shift + K (Command + Option + K no macOS) abre a Consola.
• Chrome e Edge: Ctrl + Shift + J (Command + Option + J no macOS) abre a Consola.
• Qualquer navegador no Windows ou Linux: F12 abre as ferramentas; depois escolha o separador.
• Safari: ative antes Safari > Settings > Advanced > Show features for web developers. Depois prima Command + Option + C.

Abrir-se-á um painel parecido com este (na captura, o Firefox):

Consola

A Consola mostra os erros e avisos da página: falhas de JavaScript, recursos bloqueados por não usarem https, problemas de codificação, etc. Os erros aparecem a vermelho e os avisos a amarelo.

Para encontrar o erro que lhe interessa:

1. Clique no ícone do caixote do lixo para limpar as mensagens anteriores.
2. Repita uma vez o que falha (clicar no botão, enviar o formulário…).
3. Repare no primeiro erro a vermelho que aparece. À direita tem o ficheiro e a linha que o provocam.

As mensagens mais habituais e o que significam:

• Uncaught TypeError / Uncaught ReferenceError: uma falha num script. O ficheiro da direita indica-lhe de que plugin, tema ou módulo vem (por exemplo wp-content/plugins/NOMBRE/...). Experimente atualizá-lo ou desativá-lo.
• Mixed Content: a página carrega por https, mas algum recurso (imagem, script, CSS) é pedido por http. O navegador bloqueia-o. Altere esse URL para https na configuração ou no conteúdo do site.
• blocked by CORS policy: o site tenta ler dados de outro domínio que não o permite. Costuma acontecer ao mudar de domínio ou ao passar de www para sem www: verifique se o URL do site na configuração da aplicação é o que usa.
• Failed to load resource: the server responded with a status of 404 (ou 403, 500): um ficheiro não pôde ser carregado. Procure-o no separador Rede para ver qual é.

Se a página o redirecionar para outra ao falhar, marque Registos persistentes (Firefox) ou Preserve log (Chrome) para que as mensagens não sejam apagadas.

Rede

O separador Rede mostra todos os pedidos que a página faz: o HTML, as imagens, os scripts, as folhas de estilo e as chamadas internas que os botões e formulários fazem. De cada um vê o estado, o método (GET ou POST), o tamanho e o tempo que demorou. Em baixo aparece o total da página.

Para o usar:

1. Abra o separador Rede antes de reproduzir o problema.
2. Marque Desativar cache (Firefox) ou Disable cache (Chrome) para ver o carregamento real.
3. Recarregue a página ou repita a ação que falha.
4. Procure as linhas a vermelho ou com estado 4xx ou 5xx. Se falhar um botão ou um formulário, filtre por XHR (Firefox) ou Fetch/XHR (Chrome).
5. Clique no pedido e abra Resposta: muitas vezes contém a mensagem de erro completa.

O que indica cada estado:

• 404: o ficheiro não existe nesse caminho. Reveja o URL ou carregue-o.
• 403: o servidor não deixa aceder. Pode ser uma permissão de ficheiro, uma regra do .htaccess ou a firewall.
• 500: erro da aplicação no servidor. A mensagem exata está no registo de erros do PHP: ativar o registo de erros do PHP.
• 502, 503 ou 504: o servidor demorou demasiado ou estava saturado. Veja a coluna do tempo.

Para saber porque é que um site está lento, ordene pela coluna Tempo ou Tamanho: verá que imagem pesa demasiado ou que pedido demora vários segundos.

Enviar o erro ao suporte

Se nos abrir um ticket, indique o URL, a hora, o que fez e uma captura do erro da Consola ou do pedido na Rede com a sua Resposta. Antes de partilhar um ficheiro HAR exportado a partir da Rede, tenha em conta que inclui os seus cookies de sessão: é preferível uma captura.

A Consola também permite executar código JavaScript. Nunca cole código que alguém lhe peça por e-mail ou chat: é uma técnica habitual para roubar sessões.