Confira a estrutura da página
Veja título, descrição, canonical, idioma e contagens. Explore a hierarquia de headings, imagens sem alt e sinais básicos de acessibilidade.
Overview · Page Info · SEO · Accessibility
MARCOS DEV / EXTENSÃO DE NAVEGADOR
Marcos Dev Tools.
Entenda a página.
Inspecione os detalhes.
Uma caixa de ferramentas para quem desenvolve sites: metadados, SEO, acessibilidade, estilos e utilitários reunidos no navegador.
Versão 2.0.0 · ZIP · Instalação manual em computador
NA PRÁTICA
Da visão geral ao detalhe.
Abra a extensão na página que deseja examinar. As análises acontecem sob demanda, sem observar continuamente sua navegação.
Descubra como a interface foi construída
Selecione um elemento para consultar dimensões, espaçamentos e estilos. Inspecione famílias CSS, capture uma cor e meça a distância entre dois elementos.
Inspector · Box Model · Fonts · Colors · Measure
Observe tecnologias e recursos
Identifique tecnologias por evidências públicas e consulte APIs disponíveis no navegador. A captura de headers é passiva e depende do acesso concedido à página.
Technologies · Browser Capabilities · Security
Resolva pequenas tarefas sem sair do navegador
Formate JSON, converta URLs, Base64 e timestamps, gere UUIDs e hashes SHA-256. Teste dimensões de janela e exporte seu scan em JSON ou HTML.
12 utilitários · Responsive · Export Report
Uma nota com explicação, não uma promessa.
O Marcos Dev Scan mostra regras, pesos e cobertura. PASS recebe o peso completo; WARNING, metade; FAIL, zero. INFO e UNKNOWN não entram na nota. O resultado não é Lighthouse nem certificação de segurança ou acessibilidade.
PRIMEIRO ACESSO
Baixe. Extraia.
Carregue no navegador.
A versão disponível é distribuída em ZIP, fora da Chrome Web Store. A instalação é manual e não acontece apenas ao baixar o arquivo.
Base: Chromium 116 ou superior. Recursos e limites podem variar entre navegadores e sistemas.
Baixar versão 2.0.0Extraia o ZIP
Guarde a pasta em um local permanente. Dentro dela deve existir o arquivo
manifest.json.Abra o gerenciador de extensões
Digite
chrome://extensionsna barra de endereço do Chrome. No Edge, useedge://extensions.Ative o Modo do desenvolvedor
Clique em Carregar sem compactação e selecione a pasta extraída que contém o manifest. Não selecione o arquivo ZIP nem a pasta
src.Escolha uma página e abra a ferramenta
Acesse um site HTTP/HTTPS e clique no ícone Marcos Dev Tools para conceder acesso temporário. Use Scan Page para analisar.
DADOS E PERMISSÕES
O trabalho fica
no seu navegador.
A extensão não usa analytics, telemetria ou servidor de análise. Não envia URLs, HTML ou resultados à Marcos Dev.
Preferências, presets e histórico opcional de cores ficam no armazenamento local. Uma captura temporária de headers e a geometria da janela podem permanecer na sessão.
Não são lidos valores de formulários, credenciais ou cookies. Um relatório exportado contém a URL analisada: revise antes de compartilhar.
Por que cada permissão existe
Sem permissão permanente para todos os sites. Os links externos, novas janelas e recargas só são acionados por você.
ANTES DE USAR
O que é importante saber.
Esta versão está disponível para instalação manual. A validação completa das integrações nativas ainda está em andamento; não é uma versão certificada pela loja.
Onde troco o tema?
No botão Configurações, no topo da extensão, escolha Claro, Escuro ou Automático em Aparência / tema. O tema muda fundos, textos e controles; o azul da marca é mantido.
Por que o Inspector abre em outro painel?
O popup fecha quando você clica no site. Use a janela persistente ou o painel lateral para selecionar elementos. Escape encerra a seleção. O painel Marcos Dev também pode ser aberto dentro do DevTools, após conceder acesso à aba pelo ícone.
O Chrome mostra um aviso de host permissions?
A captura depende de acesso à origem da página. Abra um site HTTPS, clique no ícone e solicite a captura em Security. Se os headers continuarem indisponíveis, o resultado deve ser tratado como não observado. Esse fluxo ainda exige validação nativa; não desative proteções do navegador.
A análise garante que o site é seguro ou acessível?
Não. São verificações automáticas e sinais parciais. HTTPS indica uma conexão criptografada, não que todo o site seja seguro. Contraste e nomes acessíveis também exigem revisão humana.
Funciona em qualquer página ou dispositivo?
Não. Esta distribuição é voltada a Chromium em computadores. Páginas internas, Chrome Web Store e documentos protegidos podem bloquear a inspeção. Iframes e shadow DOM não são percorridos. Firefox, Safari e celulares não fazem parte desta versão.
O Responsive Tester emula um celular?
Ele testa dimensões reais de janela, sujeitas aos limites do sistema. Não simula touch, DPR, user agent, CPU ou rede.
Como atualizo ou removo?
Para atualizar, baixe o novo pacote, extraia e carregue a nova pasta no gerenciador, removendo a entrada antiga se necessário. Não instale duas cópias ao mesmo tempo. Para desinstalar, use Remover no gerenciador de extensões. As instruções também estão no README incluído no ZIP.
MARCOS DEV LABS
Mais experiências para explorar.
Conheça os experimentos de interfaces, APIs e tecnologias web da Marcos Dev.