Diagnóstico

Diagnóstico de tela e ambiente

Informações detalhadas sobre sua tela, navegador e dispositivo. Dados em tempo real úteis para usuários comuns, designers e desenvolvedores web.

Tela

Viewport — área visível do navegador
— × — px
O espaço que o usuário realmente vê dentro do navegador. É o valor de referência para as regras @media em CSS e para os breakpoints do Bootstrap.
Breakpoint ativo do Bootstrap 5
— —
Nome do breakpoint do Bootstrap 5 correspondente à largura atual da janela. Determina quais classes col-*, d-* e fs-* estão ativas agora.
Resolução lógica da tela
— × — px
Resolução total da tela em pixels CSS (lógicos). É o que o sistema operacional reporta ao navegador. Não desconta a barra de tarefas.
Resolução física real
— × — px reais
Pixels físicos do hardware: resolução lógica × DPR. É o valor mostrado nas especificações técnicas do fabricante.
Tela disponível (menos barra de tarefas)
— × — px
Área utilizável da tela após descontar a barra de tarefas do SO e outros elementos fixos da área de trabalho.
Device Pixel Ratio (DPR)
— x
Proporção entre pixels físicos e pixels CSS. DPR 2 = tela Retina / HiDPI. Essencial para escalar imagens corretamente com srcset.
Profundidade de cor
— bits
Bits por pixel para representação de cores. 24 bits = 16,7 milhões de cores (true color). A maioria dos monitores modernos reporta 24 ou 30 bits.
Orientação do dispositivo
—
Orientação física atual. Muda ao girar o dispositivo. Relevante para @media (orientation: landscape). Atualiza automaticamente.
Documento HTML — área total do conteúdo
— × — px
Tamanho total do documento HTML, incluindo conteúdo fora do viewport (scroll). Se a largura do documento exceder a do viewport há overflow horizontal — um problema de CSS.

Navegador

Nome e versão
—
Motor de renderização
—
Componente que interpreta HTML e CSS. Blink (Chrome/Edge), WebKit (Safari), Gecko (Firefox). As diferenças entre motores explicam inconsistências visuais entre navegadores.
Idioma do navegador
—
Idioma configurado no navegador (navigator.language). Sites podem usá-lo para mostrar conteúdo no idioma preferido sem que o usuário precise selecioná-lo.
Fuso horário
—
Fuso horário do sistema detectado pelo navegador. Útil para apps que precisam exibir datas e horas locais sem solicitar configuração ao usuário.
Cookies habilitados
—
Se desabilitados, os sites não conseguem salvar sessões ou preferências. Afeta o funcionamento da maioria dos aplicativos web.
Status de conexão
—
Detectado via navigator.onLine. Útil para apps com suporte offline (PWA). Indica se o navegador tem acesso à rede agora.
User Agent
—
String enviada pelo navegador ao servidor em cada requisição HTTP. Permite detectar o navegador, versão e sistema operacional. Também usado para análise de audiência e personalização de conteúdo.

Dispositivo

Sistema operacional
—
Detectado a partir do User Agent. Útil para diagnosticar problemas de compatibilidade específicos de plataforma (Windows, macOS, iOS, Android).
Tipo de dispositivo
—
Mostra se o dispositivo possui touchscreen e quantos pontos de toque simultâneos suporta (navigator.maxTouchPoints). 0 = sem touchscreen.
Núcleos de CPU disponíveis
— núcleos lógicos
Processadores lógicos disponíveis para o navegador (navigator.hardwareConcurrency). Indica o grau de paralelismo possível com Web Workers e tarefas em segundo plano.
RAM aproximada
—
Disponível no Chrome e Edge (navigator.deviceMemory). O navegador reporta um valor arredondado (0,25, 0,5, 1, 2, 4 ou 8 GB) para proteger a privacidade do usuário.

Compartilhar diagnóstico

Copie todos os dados como texto simples para colar em um e-mail, Slack ou ticket de suporte.

O que significa cada leitura?

Explicação detalhada de cada métrica exibida por esta ferramenta. Seja você designer, desenvolvedor ou usuário comum, este glossário ajudará a interpretar os valores corretamente.

O viewport é a região do navegador que exibe o conteúdo de uma página web. É a largura e altura disponíveis dentro da janela, sem contar a barra de ferramentas, abas ou barra de rolagem.

No CSS, o viewport é a referência para as media queries: @media (max-width: 768px) é ativado quando a largura do viewport é menor que 768 px. Também é a base para as unidades vw (viewport width) e vh (viewport height).

No JavaScript, é obtido com window.innerWidth e window.innerHeight.

Breakpoints são os pontos nos quais o design responsivo altera seu comportamento. O Bootstrap 5 define 6:

  • xs — menos de 576 px (celulares pequenos em retrato)
  • sm — a partir de 576 px (celulares em paisagem)
  • md — a partir de 768 px (tablets)
  • lg — a partir de 992 px (notebooks)
  • xl — a partir de 1200 px (desktops)
  • xxl — a partir de 1400 px (telas grandes)

Conhecer seu breakpoint permite saber exatamente quais classes CSS do Bootstrap estão ativas: col-md-6, d-lg-flex, etc.

O Device Pixel Ratio é a proporção entre os pixels físicos do hardware e os pixels CSS lógicos que o navegador usa para calcular o layout.

  • DPR = 1 — Tela padrão. 1 px CSS = 1 px físico.
  • DPR = 2 — Retina / HiDPI. 1 px CSS = 2×2 = 4 px físicos.
  • DPR = 3 — Alta densidade (celulares modernos). 1 px CSS = 3×3 = 9 px físicos.

Isso é crítico para designers: uma imagem de 200×200 px em uma tela DPR 2 ficará borrada. A solução é usar srcset ou image-set().

Acesse pelo JavaScript com window.devicePixelRatio.

Resolução lógica é o que o navegador usa para calcular o layout (pixels CSS). Resolução física é o número real de pixels no painel: resolução lógica × DPR.

Por exemplo, um iPhone 15 tem resolução lógica de 390×844 px CSS, mas sua tela física é 1170×2532 px reais (DPR = 3). A resolução física é o valor listado nas especificações do fabricante.

O tamanho do documento inclui todo o conteúdo, incluindo o que está fora do viewport (scroll). Em condições normais, a largura do documento deve ser igual à do viewport.

Se a largura do documento exceder o viewport, há overflow horizontal: uma barra de rolagem horizontal aparece, fundos não chegam à borda ou o conteúdo transborda da área visível no celular. Use document.documentElement.scrollWidth.

O User Agent é uma string de texto que o navegador envia ao servidor em cada requisição HTTP, via cabeçalho User-Agent. Contém informações sobre o navegador, sua versão e o sistema operacional.

Servidores e aplicações web analisam o User Agent para detectar o tipo de cliente, servir recursos otimizados, personalizar conteúdo e gerar análises de audiência.

O motor de renderização interpreta HTML e CSS e desenha a página na tela. Os principais são:

  • Blink — Chrome, Edge, Opera, Brave e a maioria dos navegadores baseados em Chromium.
  • WebKit — Safari no macOS e iOS. Por política da Apple, todos os navegadores no iOS devem usar WebKit.
  • Gecko — Mozilla Firefox.

As diferenças entre motores explicam por que a mesma página pode parecer diferente no Safari e no Chrome.

Via Network Information API (disponível principalmente no Chrome e Edge), o navegador consegue estimar: tipo de conexão efetiva (4g, 3g, 2g, slow-2g), velocidade de download em Mbps, latência RTT em ms e se o usuário tem modo economia de dados ativo.

Esta seção não aparece se o navegador não suportar a API (Firefox e Safari não a expõem por razões de privacidade).