Adicionar extensão ao Chrome
- Abra a Chrome Web Store e pesquise pela extensão "DevSuite Pro".
- Clique em "Adicionar ao Chrome" e confirme clicando em "Adicionar extensão" na janela pop-up.
Mais de 64 ferramentas poderosas para inspecionar, medir, capturar, analisar e projetar páginas da web diretamente no seu navegador.
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.
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.
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 →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 →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 →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 →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 →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 →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
Capture a Área Visível ou Capturas de Tela de Página Inteira
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
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
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
Decodifique JSON Web Tokens num Instante
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
Formate, Valide e Visualize XML com Realce de Sintaxe
Embeleze e Formate Consultas SQL
Salve Páginas da Web como PDFs Limpos
Escolha o melhor plano para seu fluxo de trabalho. Comece grátis, atualize a qualquer momento.
Perguntas comuns sobre os recursos e o uso da extensão DevSuite Pro. Se você tiver uma pergunta, a resposta já pode estar abaixo.
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.
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.
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.
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.
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.
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.
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.
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.