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

Depure e Controle Animações CSS em Tempo Real

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

Visualize a Estrutura Completa de Layout de Qualquer Página

Obtenha Classes Tailwind Categorizadas para Qualquer Elemento

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

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

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

Remova ou Alterne a Visibilidade de Qualquer Elemento

Exporte Qualquer Elemento como HTML, CSS ou JSON

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

Captura de Tela GRÁTIS

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

Extrair Imagens GRÁTIS

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

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

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

Gere QR Codes para Qualquer URL ou Texto Instantaneamente

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

Visualize Múltiplas Janelas de Dispositivos Simultaneamente

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

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

Visualize e Depure Layouts CSS Grid e Flexbox

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

Limpe Seletivamente Cache, Cookies, localStorage e sessionStorage

Detecte Todas as Tecnologias por Trás de Qualquer Site

SEO Inspector GRÁTIS

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

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

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

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

Descubra Todas as Fontes Usadas em Qualquer Página Web

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

Paleta de Cores GRÁTIS

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

Aplique o Modo Escuro a Qualquer Website Instantaneamente

Ative ou Desative Instantaneamente o JavaScript por Separador

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

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

Monitorize Todos os Pedidos de Rede em Tempo Real

Visualize, Edite, Adicione e Elimine localStorage e sessionStorage

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

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

Formate, Minifique e Valide JSON com um Clique

Codifique e Decodifique Strings de e para Base64 Instantaneamente

Codifique e Decodifique Strings de URL num Clique

Codifique e Decodifique Entidades HTML Instantaneamente

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

Converta Imagens De e Para Formatos Base64 em URIs de Dados

Depurador JWT GRÁTIS

Decodifique JSON Web Tokens num Instante

Gerador de UUID GRÁTIS

Gere Identificadores UUID v4 em Massa

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

Gere Senhas Criptograficamente Fortes

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

Converta Datas em Formato UNIX, ISO e Humano Real

Compare Dois Blocos de Texto em Paralelo a Cada Linha

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

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

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

Obtenha Seletores CSS e XPath Para Qualquer Elemento

Teste Pedidos de Origem Cruzada e Inspecione Cabeçalhos CORS

Capture Frames WebSocket em Tempo Real

Analise a Página em Busca de Imagens Partidas Instantaneamente

Preencha Formulários Automaticamente com Dados de Teste Realistas

Converta Entre CSV e JSON em Qualquer Direção

Formatador XML GRÁTIS

Formate, Valide e Visualize XML com Realce de Sintaxe

Formatador SQL GRÁTIS

Embeleze e Formate Consultas SQL

Salve Páginas da Web como PDFs Limpos

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
  • 20 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 20) 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.