Extensão Chrome · Grátis · Sem conta
O painel de desenvolvimento
que estava a faltar
no Chrome
Inspector, SEO, Colors, Performance, Design, API Tester, Diagnóstico e 40+ utilitários num painel lateral que fica sempre visível enquanto navegas.
✓ Grátis
✓ Sem conta
✓ Sem telemetria
✓ PT · EN · ES
✓ Tema claro e escuro
5
Painéis especializados
40+
Utilitários integrados
8
Idiomas
0
Recolha de dados
100%
Gratuito
Funcionalidades
8 painéis. 40+ ferramentas. Um único painel.
Cada tab do Devtools Web Studio é um painel especializado. Instala uma vez e tens tudo integrado: Inspector, SEO, Colors, Performance, Design, API Tester, Diagnóstico e mais utilitários.
Inspector
Inspeciona elementos, estilos e metadados da página sem sair do painel lateral.
SEO
Verifica meta tags, Open Graph, Twitter Card, schema.org e muito mais.
Colors
Extrai cores, verifica contraste e converte entre formatos de cor.
Performance
Audita recursos de carregamento: prefetch, lazy load, compressão e mais.
Design & Layout
Mede distâncias, visualiza estrutura com X-Ray e sobrepõe grids.
API Tester
Cliente REST completo com coleções, environments e visualização de resposta.
Diagnóstico
Inspeciona headers HTTP, cookies, stack tecnológico e erros JS em tempo real.
Utilitários
Code formatter, snippets, image replacer, todo, pomodoro e mais 40+ ferramentas.
🔍 Tab: Inspector
Web Studio Inspector: painel lateral em ação
Inspeciona qualquer elemento sem abrir o DevTools nativo. Clica num elemento na página e vê imediatamente os seus estilos, atributos e box model no painel lateral.
Element Inspector
Estilos, atributos e box model
Clica em qualquer elemento da página para inspecionar os seus estilos CSS computados, atributos HTML e dimensões exatas no box model — tudo sem abrir o DevTools nativo do Chrome.
- Estilos CSS computados do elemento selecionado
- Atributos HTML e valores em tempo real
- Box model com margin, border, padding e content
- Dimensões e posição exatas do elemento
- Navegação pelos elementos pai e filho
- Copia o seletor CSS ou XPath do elemento
Page Meta
Verificação rápida do SEO
Acede rapidamente às meta informações essenciais da página ativa sem precisar de abrir as ferramentas de desenvolvimento.
- Title
- Meta description
- Canonical URL
- Viewport
- Charset
- Language
Font Inspector
Identifica as fontes usadas em qualquer elemento
Seleciona qualquer elemento de texto e vê imediatamente a família tipográfica, tamanho, peso e line-height aplicados.
Accessibility Audit
Audita automaticamente a acessibilidade da página
Verifica os principais problemas de acessibilidade da página ativa de acordo com as diretrizes WCAG.
- Contraste de cor
- Textos alternativos
- Hierarquia de headings
- Labels de formulários
- ARIA
- Links sem texto âncora
- Atributos de idioma
- Tabelas sem cabeçalhos
- Foco visível
Media Explorer
Explora todos os media da página
Vê e descarrega todas as imagens, vídeos, áudios e iframes da página ativa num painel organizado.
- Lista todas as imagens, vídeos e áudios da página
- Filtra por tipo de media
- Mostra dimensões e tamanho de cada ficheiro
- Abre o media diretamente numa nova aba
- Descarrega qualquer media diretamente do painel
- Copia o URL do media para a área de transferência
🎯 Tab: SEO
SEO completo sem sair da página
Verifica meta tags, Open Graph, Twitter Card, canonical, robots e muito mais — diretamente no painel lateral, sem extensões adicionais.
🏷️
Title & Meta Description
Título, descrição e keywords com verificação de limites de caracteres e pixels.
📤
Open Graph (OG)
Pré-visualização do card social com image, title, description e URL.
🐦
Twitter Card
Verifica o card do Twitter com todos os campos obrigatórios e opcionais.
🔗
Canonical & Robots
Canonical URL, meta robots, X-Robots-Tag e verificação de indexação.
📋
Schema.org
Deteta e valida JSON-LD, Microdata e RDFa com propriedades obrigatórias por tipo.
📑
Heading Map
Mapa visual da hierarquia H1–H6 com deteção de saltos e headings vazios.
🖼️
Imagens & Links
Lista imagens sem ALT e links sem texto âncora para correção rápida.
🔄
Re-scan
Digitaliza novamente a página após mudanças no conteúdo para atualizar os resultados.
Scan automático ao abrir o tab. Clica em Re-scan após mudanças no conteúdo para atualizar os resultados.
🎨 Tab: Colors
Conversão entre formatos de cor
Converte, extrai e verifica cores diretamente na página. Um seletor de cor integrado com conversão instantânea entre todos os formatos.
Color Picker
Seletor de cor com conversão instantânea
Escolhe qualquer cor e converte automaticamente entre HEX, RGB, HSL, OKLCH e outros formatos — com pré-visualização em tempo real.
- Copia qualquer formato com um clique
- Pré-visualização em tempo real à medida que ajustas os valores
- Histórico das cores mais recentes
- Alterna os dados entre RGB e hexadecimal
- Compatível com variáveis CSS personalizadas
Page Colors
Verificação automática de cores da página e contraste
Extrai e verifica automaticamente todas as cores presentes na página, incluindo variáveis CSS, e avalia o contraste de acordo com as normas WCAG.
- Pré-visualização em tempo real à medida que ajustas os valores de contraste
- Verifica todas as variáveis de cor do site
- Verifica como ficaria o site forçando o dark mode
- Alterna os dados entre RGB e hexadecimal (#7c3aed → rgb(124, 58, 237))
- Modos de dark mode distintos: CSS Invert, seletores para Tailwind, Bootstrap ou DaisyUI
- Relatório de contraste com classificação WCAG AA e AAA
⚡ Tab: Performance
Audita a performance de carregamento da página
Identifica recursos que podem ser otimizados para melhorar o tempo de carregamento: prefetch, preconnect, lazy loading, compressão e mais.
🔌
DNS Prefetch
Deteta ligações em falta para domínios externos críticos.
⚡
Preconnect
Verifica conexões TCP/TLS antecipadas para recursos de terceiros.
🖼️
Lazy Load
Lista imagens sem atributo loading="lazy" que podem atrasar o carregamento.
📦
Compressão
Verifica se os recursos de texto estão comprimidos com gzip ou brotli.
🔡
Font Display
Verifica font-display para evitar FOIT e FOUT no carregamento de fontes.
💡
Sugestões
Recomendações práticas para melhorar o Core Web Vitals da página.
Todas as métricas são medidas diretamente da Performance API do browser — sem servidores externos.
📐 Tab: Design & Layout
Design Overlay e ferramentas de alinhamento
Verifica espaçamentos, alinha elementos com precisão pixel a pixel e visualiza a estrutura da página de forma diferente.
Réguas & Alinhamento
Alinhe com precisão pixel a pixel
Réguas persistentes nas bordas da página, com marcadores de posição e guias de alinhamento que ficam visíveis enquanto navegas.
- Réguas horizontais e verticais persistentes
- Guias de alinhamento arrastáveis
- Destaque de margens e padding de elementos
- Modo de comparação lado a lado
- Captura de screenshot com anotações
- Snap to grid automático
Element Distance & Manual Measure
Mede distâncias e dimensões de elementos
Mede a distância entre quaisquer dois elementos ou pontos da página com precisão de pixel.
- Clica em dois elementos para medir a distância entre eles
- Mostra a distância em pixels e em rem
- Modo de régua manual para medir áreas personalizadas
- Exporta as medições para referência futura
X-Ray Overlay
Visualize a estrutura da página de outra forma
Ativa diferentes modos de visualização da página para identificar problemas de layout e estrutura de forma rápida e intuitiva.
- Blue Outline: Destaca todos os elementos com contorno azul
- Grayscale: Converte a página para tons de cinzento
- Box Outline: Mostra as box boundaries de todos os elementos
- Heatmap: Mapa de calor de elementos por densidade
- Interactive: Destaca elementos interativos (clicáveis)
Responsive & Grid
Grid, breakpoints e Pixel Perfect
Sobrepõe uma grelha de design à página, visualiza os breakpoints ativos e compara o layout com o mockup original.
- Grid Overlay: Grelha personalizada com colunas, gutter e offset configuráveis
- Breakpoint Badge: Mostra o breakpoint ativo no canto da página
- Pixel Perfect: Sobrepõe o mockup original para comparação visual
Multi-device Preview
Vê o teu site em vários dispositivos em simultâneo
Simula o aspeto do site em vários tamanhos de ecrã ao mesmo tempo — útil para verificar layouts responsivos sem ter de redimensionar o browser.
- Mobile: 375px — iPhone SE
- Mobile L: 425px — iPhone Plus
- Tablet: 768px — iPad
- Laptop: 1024px — Laptop HD
- Desktop: 1440px — Desktop full
- Throttle: Simula internet lenta: 2G, Slow 3G, Fast 3G ou 4G
🚀 Tab: API Tester
Cliente REST completo, no painel lateral ou em janela
Testa APIs REST diretamente no browser, sem instalar ferramentas externas. Suporta todos os métodos HTTP, headers, body e autenticação.
Organização
Coleções, pastas e pedidos
Organiza os teus pedidos API em coleções e pastas. Importa coleções do Postman e guarda os resultados para consulta futura.
- Cria coleções e organiza pedidos em pastas
- Importa e exporta coleções no formato Postman
- Duplica pedidos com um clique
- Histórico de pedidos recentes
- Filtra pedidos por método ou nome
- Autenticação por pedido ou herdada da coleção
- Fácil de editar em qualquer altura os environments do projeto
Environments
Variáveis por ambiente
Define variáveis para cada ambiente (dev, staging, production) e alterna entre eles sem alterar os pedidos.
- Variáveis de ambiente reutilizáveis
- Alterna entre ambientes com um clique
- Variáveis globais partilhadas entre coleções
- Autenticação: Inherit from collection
- Autenticação: Bearer Token
- Autenticação: Basic Auth
- Autenticação: API Key
Resposta
Visualizador de resposta avançado
Visualiza a resposta da API em JSON formatado, tabela interativa ou gráfico. Ideal para APIs que retornam dados estruturados.
- JSON formatado com syntax highlighting
- Vista em tabela para arrays de objetos
- Gráfico de colunas para dados numéricos
- Gráfico de linhas para séries temporais
- Gráfico pie para distribuição de valores
- Status code, tempo de resposta e tamanho
- Headers da resposta detalhados
- Copia ou exporta a resposta completa
Autenticação suportada
Bearer Token
Token JWT ou OAuth 2.0 — enviado automaticamente no header Authorization.
Basic Auth
Username e password — codificados em Base64 e enviados no header.
API Key
Chave de API enviada no header ou como parâmetro de query string.
Herdar da coleção
O pedido herda automaticamente a autenticação definida na coleção.
Compatível com o formato de coleções do Postman — importa os teus pedidos existentes sem reconfigurar nada.
O CORS Bypass integrado permite testar APIs que bloqueiam pedidos do browser sem configuração adicional.
🩺 Tab: Diagnóstico
Diagnóstico completo da página em tempo real
Inspeciona headers HTTP, cookies, stack tecnológico, erros JS e muito mais — tudo em tempo real, sem recarregar a página.
URLs
Lista todos os URLs carregados pela página com status code e tipo de recurso.
HTTP Headers
Inspeciona todos os headers HTTP de pedidos e respostas.
Cookies
Lista, filtra e apaga cookies com todos os seus atributos.
Stack Detector
Deteta automaticamente frameworks, CMS, analytics e outras tecnologias.
Analytics Tags
Identifica scripts de analytics e marketing presentes na página.
JS Errors
Captura e lista erros JavaScript em tempo real enquanto navegas.
Live opt-in
Console
Regista mensagens do console.log em tempo real no painel lateral.
Live opt-in
Event Listeners
Lista todos os event listeners registados nos elementos da página.
Verifica o certificado SSL e 10 tipos de registo DNS
Consulta qualquer domínio via DNS over HTTPS diretamente no browser — sem apps externas, sem terminal.
A
Endereço IPv4 do servidor
AAAA
Endereço IPv6 do servidor
CNAME
Alias para outro domínio
NS
Servidores de nomes autoritativos
MX
Servidores de email
TXT
Registos de texto (SPF, verificação de domínio)
SOA
Start of Authority — informação administrativa
CAA
Autoridades de certificação permitidas
SPF
Política de envio de email (via TXT)
DMARC
Política de autenticação de email
Os registos de JS Errors e Console funcionam em modo opt-in: ativa-os quando precisares e desativa para não consumir recursos desnecessários.
Utilitários
40+ utilitários integrados
Além dos 8 painéis principais, o Web Studio inclui mais de 40 utilitários para as tarefas do dia a dia de um programador web.
Resources
Lista todos os recursos carregados pela página: scripts, estilos, imagens e fontes.
Code Formatter
Formata e valida código HTML, CSS, JavaScript e JSON diretamente no painel.
Sitemap Viewer
Visualiza o sitemap XML do site atual de forma estruturada.
Network Throttle
Simula ligações lentas: 2G, Slow 3G, Fast 3G ou 4G para testar o carregamento.
Image Replacer
Substitui imagens da página por outras para testar layouts sem alterar o código.
Media Downloader
Descarrega todas as imagens e vídeos da página com um clique.
Snippets
Guarda e executa snippets de JavaScript reutilizáveis em qualquer página.
Todo
Lista de tarefas integrada no painel para anotar o que fazer enquanto desenvolves.
Pomodoro
Temporizador Pomodoro integrado para gerir o foco e as pausas durante o trabalho.
Eraser
Remove elementos da página temporariamente para ver o layout sem eles.
CORS Bypass
Desativa as restrições CORS do browser para testar APIs que bloqueiam pedidos diretos.
Menu de Contexto
Acede rapidamente a ferramentas de diagnóstico com o botão direito do rato em qualquer elemento.
Sincronização
As tuas preferências, em qualquer computador
O Web Studio sincroniza automaticamente as tuas definições, coleções de API e snippets via Google Chrome Sync — sem criar conta, sem palavra-passe.
Sem instalação adicional
Não é necessário criar conta nem instalar aplicações adicionais.
Multi-device
As tuas preferências ficam disponíveis em todos os computadores onde usas o Chrome.
Sincronização automática
Qualquer alteração às definições é sincronizada automaticamente via Google Chrome Sync.
Export/Import
Exporta e importa as tuas coleções de API e configurações manualmente.
Privacidade
A sincronização é feita pela infraestrutura do Google. O Web Studio não acede nem armazena os teus dados.
Sem ligação
Todas as ferramentas funcionam sem ligação à internet — exceto o DNS over HTTPS.
O que é sincronizado via Google Chrome Sync:
✓ Preferências e tema
✓ Coleções de API
✓ Environments e variáveis
✓ Snippets de código
✓ Configurações de cores
✓ Guias de alinhamento
✓ Todo list
✓ Definições do grid
Como começar
Começa em menos de 30 segundos
Instala, abre o painel lateral e começa a trabalhar. Sem configuração, sem conta, sem recolha de dados.
1
Instala no Chrome
Vai à Chrome Web Store, clica em "Adicionar ao Chrome" e confirma a instalação.
2
Abre o painel lateral
Clica no ícone do Web Studio na barra de extensões do Chrome para abrir o painel lateral.
3
Navega para qualquer site
O painel fica sempre visível enquanto navegas — não precisas de reabrir para cada página.
4
Escolhe o painel que precisas
Usa as 8 tabs para alternar entre Inspector, SEO, Colors, Performance, Design, API Tester, Diagnóstico e Utilitários.
Privacidade
Os teus dados ficam no teu browser
O Devtools Web Studio foi desenvolvido com privacidade por definição. Não recolhemos dados, não temos servidores e não precisamos de conta.
📊 Sem recolha de dados
✓ Nenhum dado recolhido
O Web Studio não envia nenhuma informação para servidores externos. Todas as operações são feitas localmente no teu browser.
💾 O que é armazenado localmente
As tuas preferências e coleções são guardadas no storage do Chrome — nunca nos nossos servidores.
- Preferências: Tema, idioma e configurações dos painéis
- Coleções API: Pedidos, headers e environments guardados
- Snippets: Código JavaScript reutilizável
- Todo list: Tarefas guardadas localmente
- Grid & Guias: Configurações de design guardadas
- Sincronização: Via Google Chrome Sync (opcional)
🌐 Pedidos externos (opt-in)
Algumas funcionalidades fazem pedidos a serviços externos — sempre que tu inicias a ação:
- DNS over HTTPS: consultas de DNS via dns.google (apenas quando usas o tab Diagnóstico > DNS)
- API Tester: os pedidos são feitos pelo teu browser para o endpoint que escolhes
- Verificação SSL: feita localmente através da API do Chrome
O Web Studio não faz nenhum pedido em background sem a tua ação explícita.
🔐 Sem cookies de rastreamento
A extensão não usa cookies de terceiros, pixels de rastreamento, fingerprinting nem qualquer outra técnica de identificação.
🔓 Código aberto e auditável
O código da extensão pode ser inspecionado diretamente no Chrome em chrome://extensions → Detalhes → Inspecionar views.
⚙️ Permissões necessárias
| Permissão | Para quê |
|---|---|
| sidePanel | Mostrar o painel lateral do Web Studio |
| activeTab | Aceder ao conteúdo da tab ativa para inspeção |
| scripting | Injetar scripts de inspeção nas páginas |
| storage | Guardar preferências e coleções no browser |
| contextMenus | Menu de contexto com o botão direito do rato |
| webRequest | Monitorizar pedidos de rede da página |
| declarativeNetRequest | Implementar CORS bypass de forma declarativa |
| debugger | Aceder à consola e eventos de JS em tempo real |
Pronto para começar?
Instala o Devtools Web Studio
Grátis. Sem conta. Sem recolha de dados. Um painel, tudo o que precisas.
Adicionar ao Chrome — Grátis