Como inspecionar um elemento num Mac, no Chrome e no Safari

Alguém já lhe terá pedido para “abrir o inspetor e dizer o que está na consola”. Aqui fica como se faz num Mac, nos dois navegadores - e no Safari há primeiro uma definição para ligar, que é a razão pela qual esta pergunta é feita duas vezes.

Chrome

Três maneiras, e a primeira é a que vale a pena decorar.

• Clique com o botão direito naquilo que parece errado e escolha Inspecionar. O painel abre com esse elemento já selecionado, e é disso que se trata: a pergunta era sobre este botão, não sobre a página.
• ⌥⌘I abre o painel esteja onde estiver.
• ⌥⌘J abre-o diretamente no separador Consola, que é o que costuma querer quem diz “vê lá se há erros”.

O painel abre ao lado da página ou por baixo. Arraste a sua margem se ficar demasiado estreito, e use o menu de três pontos no canto superior direito para o mover para baixo, o que é mais confortável num ecrã de portátil.

Safari

O Safari esconde tudo isto até lhe pedirem, e é este o passo que as pessoas saltam.

1. Abra Safari → Definições (⌘ vírgula).
2. Escolha o separador Avançado.
3. Marque Mostrar funcionalidades para programadores web.

Aparece um menu Programador na barra de menus, e só então o resto funciona:

• Clique com o botão direito → Inspecionar elemento em qualquer parte da página.
• ⌥⌘I abre o Inspetor Web.
• ⌥⌘C abre-o diretamente na consola.

Em versões mais antigas do macOS a caixa chama-se “Mostrar menu Programador na barra de menus”, no mesmo sítio. Se não encontrar nenhuma das duas, está a olhar para as definições de outra aplicação - o Safari tem de ser a janela à frente.

Ler a consola, que é provavelmente o que lhe pediram

A consola é o separador que responde a “está alguma coisa partida”. Guarda as mensagens que a página escreveu enquanto a usava, e vêm em três tipos que vale a pena distinguir.

Normalmente não é o problema

Avisos a amarelo, e mensagens de analytics, widgets de chat, scripts de publicidade ou extensões do navegador. Longos, barulhentos e na maior parte de outra pessoa

Vale a pena reportar

Erros a vermelho, e sobretudo o primeiro. Um erro que menciona um ficheiro do próprio endereço do site tem muito mais probabilidade de ser o bug do que os doze que nomeiam um terceiro

Duas notas práticas. Muitas vezes os erros já lá estão antes de fazer o que quer que seja, restos do carregamento, por isso recarregue a página e só depois faça aquilo que falha: o erro que quer é o que aparece no momento em que parte. E a consola tem uma caixa de filtro: escrever parte de uma palavra reduz cem linhas àquela de que precisa.

Para passar um erro a outra pessoa, clique com o botão direito na linha vermelha e copie-a, ou selecione-a e carregue em ⌘C. Uma captura de ecrã também serve, desde que a linha inteira esteja visível.

O separador Rede, para quando não carrega nada

Se a página parece vazia em vez de errada, a consola pode não dizer nada e o separador Rede dirá tudo. Abra-o, recarregue e olhe para a coluna Estado: os números nos 400 e nos 500 são pedidos que falharam, e o URL ao lado diz o que a página estava a tentar ir buscar. É a diferença entre “o site está partido” e “um pedido a um endereço voltou com um 503”.

Inspecionar uma página que está no seu iPhone

Não no telefone. O Inspetor Web do Safari corre no Mac e liga-se ao telefone por cabo: ative o Inspetor Web no telefone em Definições → Apps → Safari → Avançado, ligue-o, e o dispositivo aparece no menu Programador do Mac. O procedimento completo, e o que fazer sem um Mac, é um artigo à parte.

É a ferramenta certa para um bug que só acontece no telemóvel e a errada para quem não está sentado ao lado de um Mac, que é a maioria de quem acabou de encontrar um bug que só acontece no telemóvel.

Se é você a pedir isto a outra pessoa

Vale a pena dizê-lo com clareza, porque este artigo existe sobretudo porque esse pedido é feito.

Pedir a um colega, a um tester ou a um cliente que abra as ferramentas de programador, encontre o separador certo, julgue que linhas vermelhas interessam e as copie com rigor é pedir várias competências ao mesmo tempo. A maioria das pessoas envia a primeira linha vermelha que vê, que costuma ser um aviso de analytics, e a troca custa duas mensagens e um dia.

A instrução que funciona, se mesmo assim for perguntar: recarregue, faça aquilo que parte, abra a consola com ⌥⌘J e mande-me tudo o que estiver a vermelho. Precisa, e põe o juízo do seu lado em vez do lado deles.

A alternativa é não perguntar. Se a metade técnica de um relatório puder ser capturada pela pessoa que carrega num botão, saber onde vive a consola deixa de ser um requisito para reportar um bug - e o relatório de erro chega com o que aconteceu, o que era esperado, e os registos de consola e de rede já anexados.

Referência rápida

• Chrome: clique com o botão direito → Inspecionar, ou ⌥⌘I, ou ⌥⌘J para a consola.
• Safari: Definições → Avançado → Mostrar funcionalidades para programadores web, depois ⌥⌘I ou ⌥⌘C.
• Recarregue antes de reproduzir, para que os erros que vê pertençam à falha.
• As linhas vermelhas que mencionam o endereço do próprio site são as que mais interessam; a primeira interessa mais do que as restantes.