Mobile Inspector bởi Luiz silva

O Firefox para Android não tem ferramentas de desenvolvedor. Não tem console, não tem inspetor de elementos, não tem aba de rede — e nenhuma extensão consegue criar um DevTools de verdade, porque a API devtools.* não existe no Android. Quem precisa ver o que uma página está fazendo no celular tem hoje duas saídas: cabo USB com um computador do lado, ou nada.

Esta extensão é a terceira saída. O inspetor roda dentro da própria página, no próprio aparelho.

INSPETOR

Motor: Eruda (licença MIT), embarcado dentro da extensão. Nada é baixado de CDN.

• Console: log, erro, aviso e entrada de comandos.
• Elementos: navegação pelo DOM com realce visual do nó na tela.
• Rede: chamadas XHR e fetch, com método, status, tempo e corpo.
• Recursos e armazenamento: cookies, localStorage, sessionStorage, scripts, folhas de estilo e imagens da página.
• Sources: o texto dos arquivos que a página carregou.

Você liga o inspetor por site — enquanto você não marcar, ele fica parado. Uma vez marcado, sobe junto com a página em document_start e sobrevive a refresh e a navegação; é por isso que a aba Rede pega as chamadas desde o começo do carregamento, e não só as de depois que você abriu o painel. Se preferir não marcar o site, dá para abrir só naquela página, uma vez.

PAGE INFO

Código próprio, não é o Eruda. É a reconstrução — e a ampliação — do diálogo "Informações da página" do Firefox desktop, que no Android não existe.

Geral: título, URL, host, origem, esquema, tipo de conteúdo, tamanho, codificação, doctype, idioma, direção do texto, referenciador, política de referenciador, última modificação, estado do documento, visibilidade, nós no DOM e contexto seguro.

Mídia: imagens, vídeos, áudios, SVG inline, canvas e fundos de CSS. Cada item aparece com miniatura real, desenhada num canvas dentro da própria página a partir do bitmap que o navegador já tem decodificado — zero requisição de rede. Toque na miniatura para a prévia flutuante (dimensões, tipo, alt, endereço), e há botão para baixar o arquivo original.

Links: total, internos, externos, âncoras, mailto, tel, javascript:, nofollow, noopener e os "_blank sem noopener", agrupados por host. Esse último é um achado de segurança que costuma passar batido em revisão de site.

Scripts e folhas de estilo: o que a página carregou e de onde.

Segurança: protocolo TLS negociado, cifra, troca de chaves, esquema de assinatura, transparência de certificados, HSTS, EV, ECH e a cadeia completa de certificados, com exportação em PEM sob demanda. Esse bloco lê webRequest.getSecurityInfo() e mostra mais detalhe do que o próprio Page Info do Firefox desktop. O Firefox para Android não mostra o certificado do site em lugar nenhum; aqui ele aparece inteiro.

COMO ABRIR NO CELULAR

Menu de três pontos → Extensões → Mobile Inspector. No Firefox para Android não existe barra de ferramentas nem menu de contexto: esse item de menu e o botão flutuante do inspetor, depois de ligado, são os pontos de entrada.

LIMITAÇÕES (leia antes de instalar)

• É uma reconstrução, não o DevTools do motor do Firefox. A API devtools.* não existe no Android, então nada aqui vem do motor do navegador: não há debugger com breakpoints, profiler, throttling de rede nem editor de estilos. O painel Sources mostra o texto dos arquivos, não controla a execução.
• Em site com CSP restritiva, o hook de rede pode não funcionar. Console e inspeção de DOM continuam funcionando. A extensão detecta a situação e avisa na tela, em vez de falhar em silêncio — e não remove a proteção CSP do site para contornar isso.
• A aba Rede pega XHR e fetch desde o início do carregamento, mas não mostra os recursos que o próprio HTML carrega: imagem, CSS e script da página não aparecem ali. É limitação do Eruda.
• Imagem de outra origem sem CORS não gera miniatura: o navegador proíbe exportar o canvas nesse caso. No lugar dela aparece um ladrilho com o tipo do arquivo e o motivo.

PRIVACIDADE E PERMISSÕES

A extensão não coleta nem transmite nenhum dado do usuário. Sem telemetria, sem analytics, sem conta, sem servidor, sem CDN — na declaração de coleta de dados da AMO ela consta como "nenhuma". Tudo acontece no aparelho.

O que ela faz com a permissão que pede:

• injeta o inspetor só nos sites em que você liga, ou na página atual quando você pede;
• lê o conteúdo da página (DOM, mídia, links, scripts, folhas de estilo) para montar o Page Info;
• consulta o navegador pelo webRequest.getSecurityInfo() para mostrar TLS, cifra e cadeia de certificados;
• guarda localmente a lista de sites em que você deixou o inspetor ligado.

O que ela não faz: não liga sozinha em site nenhum, não altera, injeta nem bloqueia conteúdo da página além do próprio painel, e não desativa nem enfraquece a CSP do site.

PARA QUEM É

Quem desenvolve ou dá manutenção em site e precisa depurar no celular, sem um computador por perto. Gratuita.

CRÉDITOS

Inspetor: Eruda, licença MIT. Page Info: código próprio desta extensão.