Responsive Tester - Vista móvel, verificador de breakpoint e editor CSS

Veja qualquer página em vários ecrãs ao mesmo tempo. Teste a vista móvel, cada tamanho e breakpoint, e edite CSS ao vivo.

O Responsive Tester permite verificar o design responsivo em tamanhos de ecrã de telemóveis, tablets e computadores, num único separador do navegador. Pré-visualize o seu site em várias áreas de visualização lado a lado, percorra a mesma página com o deslocamento sincronizado e detete problemas de disposição sem redimensionar constantemente o navegador. Utilize os tamanhos de dispositivo predefinidos, introduza dimensões personalizadas ou crie áreas de visualização a partir dos próprios breakpoints CSS do seu site. Com o Pro, sincronize interações entre ecrãs, inspecione estilos responsivos e edite CSS em tempo real enquanto compara os resultados. Funcionalidades gratuitas - Pré-visualize vários tamanhos de ecrã numa linha com deslocamento ou numa grelha. - Mantenha o deslocamento sincronizado entre as áreas de visualização, incluindo zonas com deslocamento dentro da página. - Escolha predefinições para telemóveis, tablets e computadores, ou introduza dimensões personalizadas. - Detete os breakpoints CSS do seu site e crie áreas de visualização correspondentes com um clique. - Arraste para redimensionar as áreas de visualização e testar as larguras entre breakpoints. - Alterne entre orientação vertical e horizontal e ajuste o zoom ao seu espaço de trabalho. - Identifique conteúdo que ultrapassa a largura do ecrã com avisos automáticos em cada área de visualização. - Faça capturas de ecrã de áreas de visualização individuais. - Escolha uma interface clara ou escura, ou siga o tema do sistema. Responsive Tester Pro Sincronização de interações Clique, passe o cursor, escreva e navegue numa área de visualização para acompanhar as mesmas interações nas restantes. Teste menus, formulários e disposições responsivas em conjunto. Inspetor de breakpoints Selecione um elemento e compare as suas dimensões e estilos responsivos em diferentes larguras de visualização. Veja que propriedades mudam à medida que a disposição se adapta. Edição de CSS e classes em tempo real Inspecione as regras CSS correspondentes, edite declarações, adicione regras e altere as classes dos elementos diretamente na página. Pré-visualize as alterações nas áreas de visualização abertas, com as media queries a controlar onde cada regra se aplica. Force estados como :hover e :focus para inspecionar estilos interativos. Registo de alterações e exportação de CSS Reveja as suas alterações, anule e refaça edições, descarte alterações selecionadas e copie o CSS editado para o seu projeto. As alterações de classes são registadas separadamente e podem ser copiadas como listas de classes. Edições de CSS guardadas As alterações em folhas de estilo e as regras adicionadas são guardadas localmente e restauradas quando as regras correspondentes estão disponíveis no mesmo site. Os estilos inline e as alterações de classes duram durante a sessão atual. Aplique as alterações exportadas ao código-fonte quando as quiser publicar. Ferramentas de programação com IA através de MCP Ligue um cliente de programação com IA compatível, como o Claude Code ou o Cursor, ao Responsive Tester. O seu agente pode abrir páginas, comparar elementos entre áreas de visualização, inspecionar estilos responsivos, editar CSS e classes e fazer capturas de ecrã. Requer o servidor MCP local e um cliente compatível. Experimente o Pro gratuitamente Cada instalação inclui uma avaliação de 7 dias do Pro, sem necessidade de cartão. Após a avaliação, as funcionalidades gratuitas de pré-visualização continuam disponíveis. O Pro oferece acesso vitalício mediante um pagamento único, com 3 ativações e uma garantia de reembolso de 30 dias. Primeiros passos Abra um site e ative o Responsive Tester através do ícone da barra de ferramentas, do menu do botão direito ou de Alt/Option + Shift + V. Escolha os tamanhos de visualização e comece a comparar. Personalize o atalho em chrome://extensions/shortcuts. Requer o Chrome 116 ou mais recente. O Responsive Tester pré-visualiza páginas em diferentes tamanhos através do motor de renderização do navegador.