Começar é simples. Instale a extensão, abra qualquer página da web e acesse mais de 39 ferramentas de desenvolvedor a partir do pop-up ou do dock flutuante. Não é necessária configuração.
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.
Abra qualquer página da web e inicie a ferramenta
Vá para qualquer site e clique no ícone do DevSuite Pro na barra de ferramentas ou use o dock flutuante na página.
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 39 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.
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.
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.
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.
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.
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.
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 39 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.
