A Definitiva Caixa de Ferramentas do Desenvolvedor para Web Design e Desenvolvimento

Mais de 64 ferramentas poderosas para inspecionar, medir, capturar, analisar e projetar páginas da web diretamente no seu navegador.

Tudo Favoritos Inspecionar Capturar Medir index.popup_tab_analyse
CSS Inspector
Inspetor de Animação
Copiar como Tailwind
Modo Somente Contorno
Ajudante Tailwind
Contorno da Página
Detector de Componentes
Mover Elemento
Excluir/Ocultar Elemento
Exportar Elemento
Copiar Componente
Captura de Tela
Extrair Imagens
Grabber SVG
Substituição de Imagem
Gerador de QR Code
Como começar

Comece a usar o DevSuite Pro em poucos cliques

Começar é simples. Instale a extensão, abra qualquer página da web e acesse mais de 64 ferramentas de desenvolvedor a partir do pop-up ou do dock flutuante. Não é necessária configuração.

Adicionar extensão ao Chrome

  1. Abra a Chrome Web Store e pesquise pela extensão "DevSuite Pro".
  2. Clique em "Adicionar ao Chrome" e confirme clicando em "Adicionar extensão" na janela pop-up.

Abra qualquer página da web e inicie a ferramenta

  1. Vá para qualquer site e clique no ícone do DevSuite Pro na barra de ferramentas ou use o dock flutuante na página.
  2. Escolha qualquer ferramenta da grade. Ferramentas como o CSS Inspector, Réguas ou Seletor de Cores são ativadas instantaneamente na página atual.
Recursos da Extensão

Principais Recursos do DevSuite Pro

DevSuite Pro fornece mais de 64 ferramentas de desenvolvedor para inspeção, medição, design e análise de páginas da web. Acelere seu fluxo de trabalho com recursos poderosos integrados diretamente no seu navegador.

CSS Inspector

Passe o mouse sobre qualquer elemento para ver seus estilos CSS instantaneamente e editá-los ao vivo, facilitando a depuração e o ajuste de designs em tempo real.

Saiba mais →

Inspetor de Elementos

Clique em qualquer elemento para inspecionar suas propriedades, dimensões, espaçamento, fontes e cores. Entenda a estrutura da página imediatamente sem abrir o DevTools do navegador.

Saiba mais →

Réguas e Guias

Meça distâncias, verifique o alinhamento e adicione réguas e guias com precisão de pixel em qualquer página da web para garantir que seus designs estejam perfeitamente alinhados.

Saiba mais →

Seletor de Cores

Escolha cores de qualquer elemento na página e copie os valores HEX, RGB ou HSL para sua área de transferência com um clique.

Saiba mais →

Captura de Tela

Capture telas de página inteira ou da área visível de qualquer página da web e baixe-as instantaneamente — perfeito para compartilhar designs e relatar erros.

Saiba mais →

Testador Responsivo

Visualize qualquer página da web em diferentes tamanhos de tela e resoluções de dispositivos para testar o design responsivo sem sair do navegador.

Saiba mais →
Explore mais ferramentas em detalhes:
CSS Inspector GRÁTIS

Inspeção e Edição de Estilos CSS em Tempo Real

O CSS Inspector é uma poderosa ferramenta de desenvolvedor que permite visualizar todas as propriedades CSS de qualquer…

Depure e Controle Animações CSS em Tempo Real

O Inspetor de Animação oferece controle total sobre cada animação e transição CSS em execução em qualquer página da web.

Converta o CSS de qualquer elemento em classes utilitárias Tailwind

O Copiar como Tailwind preenche a lacuna entre o design visual e o código Tailwind CSS.

Visualize a Estrutura Completa de Layout de Qualquer Página

O Modo Somente Contorno adiciona contornos de borda codificados por cores a cada elemento HTML em uma página da web…

Obtenha Classes Tailwind Categorizadas para Qualquer Elemento

O Ajudante Tailwind inspeciona qualquer elemento em uma página da web e gera um detalhamento abrangente e categorizado…

Sobreposição de Visualização em Árvore HTML Visual em Qualquer Página da Web

O Esboçador de Página renderiza a estrutura DOM completa de qualquer página da web como uma sobreposição de árvore…

Detecte Componentes React, Vue, Angular e Svelte em Qualquer Site

O Detector de Componentes identifica automaticamente qual framework de frontend um site está usando e revela sua árvore…

Arraste e Solte para Reposicionar Qualquer Elemento em uma Página

O Mover Elemento permite que você clique em qualquer elemento em uma página da web e o arraste fisicamente para uma nova posição.

Remova ou Alterne a Visibilidade de Qualquer Elemento

O Excluir/Ocultar Elemento permite que você remova ou oculte temporariamente qualquer elemento em uma página da web com um único clique.

Exporte Qualquer Elemento como HTML, CSS ou JSON

O Exportar Elemento permite que você clique em qualquer elemento em uma página da web e exporte sua estrutura completa…

Gere Componentes React, Vue e Svelte a partir de Qualquer Elemento

O Copiar Código do Componente transforma qualquer elemento em uma página da web em um arquivo de componente limpo e…

Captura de Tela GRÁTIS

Capture a Área Visível ou Capturas de Tela de Página Inteira

O Captura de Tela captura imagens de alta qualidade de qualquer página da web em dois modos: área visível (exatamente o…

Extrair Imagens GRÁTIS

Visualize, Selecione e Baixe Todas as Imagens de Qualquer Página da Web

O Extrair Imagens verifica qualquer página da web e apresenta cada imagem em uma galeria navegável.

Encontre, Visualize e Baixe Todos os SVGs em Qualquer Página

O Capturador de SVG descobre todos os SVGs em uma página da web — elementos SVG inline, referências a arquivos .svg…

Troque Qualquer Imagem em uma Página pela Sua Própria

O Substituidor de Imagem permite que você clique em qualquer imagem em uma página da web e a substitua pela sua própria…

Gere QR Codes para Qualquer URL ou Texto Instantaneamente

O Gerador de QR Code cria automaticamente um QR code escaneável para a URL da página atual — ou para qualquer URL ou…

Réguas, Guias e Medições com Precisão de Pixel em Qualquer Página

A Régua de Página adiciona réguas no estilo Photoshop e linhas de guia arrastáveis a qualquer página da web.

Visualize Múltiplas Janelas de Dispositivos Simultaneamente

O Visualizador Responsivo mostra a página da web atual renderizada em vários tamanhos de janela de dispositivo lado a…

Meça a Distância Exata entre Quaisquer Dois Elementos

A ferramenta Medir Distância permite calcular o espaçamento horizontal, vertical e diagonal entre quaisquer dois…

Visualize e Depure Camadas de Z-Index e Contextos de Empilhamento

O Inspetor de Z-Index torna visível a ordem de empilhamento oculta da sua página.

Visualize e Depure Layouts CSS Grid e Flexbox

O Visualizador de Grid & Flex torna os layouts invisíveis visíveis.

Simule Pontos de Atenção do Usuário em Qualquer Página

O Simulador de Mapa de Calor gera um mapa de calor de atenção previsto para qualquer página da web com base em padrões…

Limpe Seletivamente Cache, Cookies, localStorage e sessionStorage

O Limpar Dados de Navegação oferece aos desenvolvedores uma maneira rápida e seletiva de limpar tipos específicos de…

Detecte Todas as Tecnologias por Trás de Qualquer Site

O Site Stack escaneia qualquer site e identifica sua stack tecnológica completa — frameworks frontend (React, Vue…

SEO Inspector GRÁTIS

Auditoria SEO Abrangente: Meta Tags, Títulos, OpenGraph e Mais

O SEO Inspector fornece uma auditoria SEO instantânea e abrangente de qualquer página web.

Auditoria WCAG Automatizada: Contraste, Texto Alt, ARIA e Mais

O Inspetor de Acessibilidade executa verificações automatizadas de WCAG 2.1 Nível AA em qualquer página web e produz um…

Clique em Qualquer Texto em Qualquer Página para Editá-lo Instantaneamente

O Editor de Texto ao Vivo torna cada elemento de texto em uma página web editável com um único clique.

Troque Qualquer Fonte Globalmente ou por Elemento a partir do Google Fonts

O Trocador de Fontes permite substituir qualquer fonte em uma página web por outra da biblioteca Google Fonts — seja…

Descubra Todas as Fontes Usadas em Qualquer Página Web

O Listar Todas as Fontes analisa qualquer página web e apresenta um inventário completo de cada família de fontes em…

Conta-gotas de Precisão para Valores de Cor HEX, RGB e HSL

O Seletor de Cores fornece uma ferramenta de conta-gotas precisa ao nível do pixel para escolher cores de qualquer…

Paleta de Cores GRÁTIS

Extraia a Paleta de Cores Completa de Qualquer Página Web

A Paleta de Cores analisa cada elemento numa página web e extrai o conjunto completo de cores utilizadas — desde texto…

Aplique o Modo Escuro a Qualquer Website Instantaneamente

O Forçar Modo Escuro aplica um esquema de cores escuro a qualquer website que não ofereça um — ou substitui o tema claro de um site.

Ative ou Desative Instantaneamente o JavaScript por Separador

O Alternar JavaScript desativa ou reativa a execução de JavaScript para o separador atual do navegador com um único clique.

Visualize, Edite, Adicione e Elimine Cookies para Qualquer Domínio

O Editor de Cookies exibe todos os cookies para o domínio atual numa tabela limpa e ordenável.

Visualize a Saída da Consola num Painel Flutuante — Sem DevTools

O Registo de Consola captura toda a saída da consola (console.log, console.warn, console.error, console.info) e exibe-a…

Monitorize Todos os Pedidos de Rede em Tempo Real

O Monitor de Rede captura e exibe cada pedido de rede feito pela página atual — chamadas de API XHR/Fetch…

Visualize, Edite, Adicione e Elimine localStorage e sessionStorage

O Editor de Armazenamento Local fornece uma interface de tabela limpa para gerir entradas de localStorage e sessionStorage para o site atual.

Verifique Todos os Links de Uma Página e Encontre os Quebrados

O Verificador de Links Quebrados analisa cada link na página atual — hrefs de âncora, fontes de imagem, fontes de…

Painel de Desempenho Instantâneo: Tempo de Carregamento, Estatísticas do DOM e Recursos

O Desempenho da Página fornece uma visão geral instantânea de qualquer página web — métricas de tempo de carregamento…

Formate, Minifique e Valide JSON com um Clique

O Formatador de JSON formata, minifica e valida JSON diretamente no seu navegador.

Codifique e Decodifique Strings de e para Base64 Instantaneamente

O utilitário Base64 Encode / Decode converte texto para Base64 e vice-versa diretamente no navegador.

Codifique e Decodifique Strings de URL num Clique

O Codificador/Decodificador de URL converte strings de URL para e da sua forma com codificação percentual.

Codifique e Decodifique Entidades HTML Instantaneamente

O Codificador de Entidades HTML converte caracteres especiais (< > & " ') nos seus equivalentes de entidade HTML (&lt…

Adicione e Remova Escapes em Strings para o seu Código

Esta ferramenta converte strings para e de sua forma escapada (com contra-barras \n \t \r \" \' \\ e Unicode).

Converta Imagens De e Para Formatos Base64 em URIs de Dados

Este formato Imagem ↔ Base64 converte rapidamente qualquer imagem (seja PNG, JPG, SVG, WebP, GIF ou semelhante) em…

Depurador JWT GRÁTIS

Decodifique JSON Web Tokens num Instante

Este utilitário de Depurador JWT faz a descodificação na hora e inspeciona ao pormenor o JSON Web Token — fazendo parse…

Gerador de UUID GRÁTIS

Gere Identificadores UUID v4 em Massa

O Gerador de UUID produz identificadores UUID v4 criptograficamente fortes através da API Crypto do navegador.

Calcule Hashes MD5, SHA-1, SHA-256, SHA-384 e SHA-512

O Gerador de Hashes calcula hashes criptográficas (MD5, SHA-1, SHA-256, SHA-384, SHA-512) a partir de qualquer inserção texto livre.

Gere Senhas Criptograficamente Fortes

O Gerador de Senha produz senhas fortes e aleatórias usando a API de criptografia do navegador.

Teste Expressões Regulares (Regex) com Destacamento de Correspondência ao Vivo

O Testador de Regex avalia as expressões regulares no mesmo instante face a um determinado lote de texto numa simulação…

Converta Datas em Formato UNIX, ISO e Humano Real

O Conversor de Tempo faz duma só as traduções aos formatos Unix da hora num ecrã (desde segundos, a seus milissegundos…

Compare Dois Blocos de Texto em Paralelo a Cada Linha

A Ferramenta Diff Tool elabora e visualiza paralelos de dois textos ao avaliar e as comparar, evidenciando as mais…

Verifique o Rácio de Contraste WCAG de Quaisquer Duas Cores

O Verificador de Contraste faz o cálculo de rácios contrastante pelo padrão WCAG 2.1 entre dupla côr e dar graduação…

A Conversão Instantânea Ao Hex, RGB, HSL, HSV, OKLCH

Este conversor elabora traduções exatas numa cor por interposto das sintaxes nas vias em HEX, RGB, HSL, HSV e as OKLCH.

A Extração da Paleta Dominante para Qualquer de Imagem

O Extrator de Cores de Imagem estuda qualquer arquivo das imagem no de (de no a arrastar, do p/ dita de e colar ou de…

Obtenha Seletores CSS e XPath Para Qualquer Elemento

O Localizador de Caminho DOM permite passar o cursor por qualquer elemento de uma página para revelar o seu seletor CSS…

Teste Pedidos de Origem Cruzada e Inspecione Cabeçalhos CORS

O Verificador de CORS testa se um pedido de origem cruzada do seu site seria permitido pelo servidor de destino.

Capture Frames WebSocket em Tempo Real

O Inspetor de WebSocket captura todas as frames WebSocket — enviadas e recebidas — em todas as ligações da página.

Analise a Página em Busca de Imagens Partidas Instantaneamente

O Detetor de Imagens Partidas verifica todos os elementos &lt;img&gt; e background-image de CSS na página, deteta…

Preencha Formulários Automaticamente com Dados de Teste Realistas

O Preenchedor de Formulários preenche todos os campos de formulário visíveis na página com dados de teste realistas…

Converta Entre CSV e JSON em Qualquer Direção

O Conversor CSV ↔ JSON trata da conversão completa de ida e volta entre os dois formatos tabulares mais comuns.

Formatador XML GRÁTIS

Formate, Valide e Visualize XML com Realce de Sintaxe

O Formatador XML organiza (pretty-print), minifica e valida XML diretamente no navegador.

Formatador SQL GRÁTIS

Embeleze e Formate Consultas SQL

O Formatador SQL transforma consultas SQL minificadas ou bagunçadas em consultas legíveis e indentadas.

Salve Páginas da Web como PDFs Limpos

O Converter para PDF salva a página atual como PDF através do diálogo de impressão do navegador, aplicando estilos…

Preços e Planos

Preços Simples e Transparentes

Escolha o melhor plano para seu fluxo de trabalho. Comece grátis, atualize a qualquer momento.

Básico

Perfeito para experimentar o DevSuite Pro. Não é necessário cartão de crédito.

$0

Grátis para sempre
Começar Grátis
  • 43 ferramentas de desenvolvedor gratuitas
  • CSS Inspector e Seletor de Cores
  • Captura de tela
  • Interface do dock flutuante
  • Todas as futuras atualizações gratuitas

Mensal Mais Popular

Acesso total a todas as mais de 64 ferramentas profissionais. Faturado mensalmente.

$2.99

por mês
Iniciar Plano Mensal
  • Todas as 64+ ferramentas de desenvolvedor
  • Acesso total às Ferramentas Pro
  • Até 3 dispositivos
  • Suporte prioritário
  • Cancele a qualquer momento

Pagamento Único Melhor Valor

Pague uma vez, use para sempre. Acesso total a todas as 64+ ferramentas pro sem cobranças recorrentes.

$29.99

pagamento único
Compre uma vez, use para sempre
  • Todas as 64+ ferramentas de desenvolvedor
  • Acesso total às Ferramentas Pro
  • Até 3 dispositivos
  • Suporte prioritário
  • Sem cobranças recorrentes
DevSuite Pro FAQ section background
FAQ

Perguntas frequentes dos usuários do DevSuite Pro

Perguntas comuns sobre os recursos e o uso da extensão DevSuite Pro. Se você tiver uma pergunta, a resposta já pode estar abaixo.

Como instalo o DevSuite Pro?

Visite a Chrome Web Store, procure por "DevSuite Pro", clique em "Adicionar ao Chrome" e confirme selecionando "Adicionar extensão". Uma vez instalada, o ícone da extensão aparecerá na barra de ferramentas do seu navegador. Clique nele para acessar instantaneamente mais de 64 ferramentas de desenvolvedor.

Qual é a diferença entre as ferramentas Grátis e Pro?

As ferramentas gratuitas (mais de 43) estão disponíveis para todos sem licença. As ferramentas Pro têm um selo dourado PRO e exigem uma licença Pro ativa para serem usadas. Você pode ver quais ferramentas são gratuitas ou pro no pop-up — as ferramentas gratuitas não têm um ícone de cadeado, enquanto as ferramentas pro parecem um pouco esmaecidas até você ativar sua licença.

Por que a ferramenta não funciona em alguns sites?

Alguns sites têm Políticas de Segurança de Conteúdo (CSP) rígidas que bloqueiam certas ações de extensões de navegador. Isso é especialmente comum em sites bancários e governamentais. Além disso, as páginas internas do Chrome (chrome://) não permitem que as extensões executem scripts de conteúdo.

Minhas alterações na página são permanentes?

Não. Todas as alterações feitas por ferramentas como Mover Elemento, Editor de Texto ao Vivo, Excluir/Ocultar Elemento e CSS Inspector são temporárias. Elas afetam apenas o que você vê no seu navegador no momento. Recarregar a página restaurará tudo ao seu estado original.

Como ativo minha licença Pro?

Abra o pop-up do DevSuite Pro, clique no ícone de Configurações no canto superior direito. Role para baixo até a seção Licença, cole sua chave de licença no campo de entrada e clique em Ativar. Se a chave for válida, o selo mudará de FREE para PRO e todas as ferramentas pro serão desbloqueadas instantaneamente.

Como mover ou ocultar o dock flutuante?

Você pode mover o dock acessando as Configurações e escolhendo uma posição diferente na barra lateral — Superior, Inferior, Esquerda ou Direita. Você também pode ocultar o dock completamente desativando a opção "Mostrar dock nas páginas" nas Configurações ou pressionando Ctrl+Shift+X a qualquer momento.

O DevSuite Pro coleta dados de navegação?

Não. O DevSuite Pro não coleta, rastreia ou transmite nenhum de seus dados de navegação. Todas as configurações são armazenadas localmente no seu navegador. A única solicitação externa é feita durante a ativação da chave de licença para verificar sua chave em nosso servidor.

Posso usar o DevSuite Pro no Firefox?

Sim! O DevSuite Pro está disponível tanto na Chrome Web Store quanto no Firefox Add-ons. Ele funciona no Chrome, Edge, Brave e outros navegadores baseados em Chromium, bem como no Firefox.