Polypane - o navegador para desenvolvedores web ambiciosos

• Navegador desktop (baseado em Chromium) com recursos integrados para desenvolvimento, depuração e testes de sites, incluindo design responsivo, acessibilidade e testes de desempenho
• Todo o trabalho é sincronizado em tempo real, permitindo visualizar e manipular simultaneamente viewports de vários tamanhos
  • Todas as ações, como clique, entrada de texto, rolagem e hover, são refletidas imediatamente em todos os viewports
• Disponível para Mac, Windows e Linux, com teste grátis de 14 dias

Resumo dos principais recursos

• Design responsivo

  • Permite visualizar de uma só vez todos os viewports, do mobile até monitores 5K
  • Possibilita testar breakpoints de CSS sem redimensionar manualmente a janela do navegador

• Análise e sincronização em tempo real

  • Todas as ações, incluindo rolagem, clique, entrada de texto e hover, são sincronizadas em tempo real entre todos os viewports
  • Console e inspetor de elementos também são integrados, reduzindo tarefas repetitivas

• Verificação de acessibilidade e desempenho

  • Inspeciona em tempo real estrutura, metadados e acessibilidade (A11y), além de sugerir melhorias
  • Inclui mais de 40 ferramentas de depuração para testar de várias formas

• Modo escuro e testes de diferentes mídias

  • Permite testar simultaneamente os modos claro/escuro sem alterar as configurações do sistema operacional
  • Simula várias condições de mídia, como redução de movimento, modo de economia de dados e estilo de impressão

• Pré-visualização de cartões de redes sociais

  • Suporta pré-visualização de meta cards das principais plataformas, como Twitter(X), Facebook, Slack, LinkedIn e Discord
  • Fornece previews com precisão em nível de pixel, inclusive em modo claro/escuro e em localhost

• Suporte a extensões de ferramentas de desenvolvedor

  • Compatível com várias extensões de DevTools, como React, Vue, Angular, Svelte e Redux
  • Por ser um navegador baseado em Chromium, oferece um ambiente de desenvolvimento familiar

Diferenciais do Polypane

• Permite testar vários dispositivos e ambientes em um único navegador
• Acelera o fluxo de trabalho de desenvolvimento e design em até 5x
• Solução all-in-one com ferramentas multifuncionais de depuração, verificação de acessibilidade, sincronização de viewports, capturas de tela, recarregamento em tempo real e mais
• Evolui com base no feedback dos usuários e é um projeto 100% autofinanciado e centrado no usuário

Outros recursos importantes

• Criação ilimitada de viewports
• Sincronização de teclado, hover e rolagem
• Sobreposição de grid
• Visualizador JSON e vários presets de dispositivos
• Detecção de overflow horizontal
• Comparação visual de design (diff)
• Simulação de daltonismo
• Visão geral de metadados
• Verificador de Web Vitals
• Emulação de toque
• Detecção de links quebrados
• Configuração de cabeçalhos personalizados
• Recursos para salvar e compartilhar workspaces

Palavra do criador

• Projeto iniciado pelo desenvolvedor Kilian Valkhof para resolver inconvenientes que encontrou ao criar inúmeros sites
• Em comparação com usar apenas o Chrome, a velocidade de trabalho melhorou cerca de 60%, e os usuários também relatam ganhos de produtividade de 2x a 5x
• Projeto operado sem investimento externo, sustentado pelo feedback e pelas assinaturas dos usuários, com foco no desenvolvimento de ferramentas para desenvolvedores

Resumo das avaliações de usuários

• Vivian Guillen: “Extremamente rápido, e a sincronização de rolagem é fantástica”
• Scott Tolinski: “Encontra facilmente problemas de espaçamento entre breakpoints”
• Sara Soueidan: “As ferramentas de depuração são tão boas que impressionam”
• Kevin Powell: “A verificação de acessibilidade e os recursos de depuração são excelentes”
• Segun Adebayo (desenvolvedor do Chakra UI): “Uma ferramenta indispensável para criar apps e sites modernos”

[nemorize]

https://responsiveviewer.org/
Também existe uma versão distribuída como extensão do Chrome. Se você abrir mão de alguns recursos, também dá para usar direto sem a extensão.

[qyurila]

Está meio difícil encontrar essa informação, mas se você vincular uma conta de estudante do GitHub, pode usar de graça. Graças a isso, usei bem no meu projeto pessoal anterior.

[luiseok]

Há um navegador semelhante, embora falte um pouco em recursos.
https://responsively.app/
Se você está hesitando porque o Polypane é pago, recomendo experimentar este.

[GN⁺]

Comentários do Hacker News

• Olá, sou Kilian, criador e desenvolvedor solo do Polypane. É interessante ver isso na homepage de novo
• Recentemente implementei pela primeira vez design web responsivo moderno em CSS, aprendendo flexbox e grid e usando vários navegadores e emuladores de dispositivos. Se eu tivesse conhecido este app, teria poupado muito trabalho
• Usei bastante o Polypane. É um produto excelente e emula bem problemas sutis de dispositivos que a visualização de dispositivos do Chrome não lida bem
• Uso o Polypane há mais de um ano e, embora possa não servir para todo mundo, atende bem às minhas necessidades
  • O gerenciamento de sessões mantém meu fluxo de trabalho bem organizado
  • Design com foco em responsividade, com painéis para visualizações desktop e mobile
  • Recurso abrangente de captura de tela com anotações
  • Dá para reproduzir esses recursos com outros navegadores ou plugins, mas prefiro que tudo venha configurado por padrão, sem exigir ajustes extras
  • O suporte é excelente. Quando tive um problema em que minha IDE não conseguia executar o Polypane corretamente, recebi ajuda no Slack e resolvi rapidamente
  • Ao ler as conversas no Slack, fica claro que há dedicação em criar o melhor produto possível para os usuários
• Queria que existisse um navegador capaz de emular com precisão o navegador de dispositivos móveis. Não apenas mudar o tamanho da tela; até o simulador de iOS da Apple falha nisso
• Parece emular muita coisa, mas tenho curiosidade sobre o que ele não emula bem
  • Como parece ser baseado em Chromium, imagino que não consiga mostrar problemas que só aparecem no Safari ou no Mozilla
  • Provavelmente isso está na documentação
  • Edit: está no fim do FAQ. Tenho curiosidade se há outras limitações conhecidas além do motor de navegador real
• Quase todos os recursos já estão embutidos nas ferramentas de desenvolvedor do Firefox. Fico me perguntando por que seria necessário um novo navegador. Parece que isso também poderia ser uma extensão
• Fico curioso sobre quais recursos ele oferece em comparação com o Browserstack (em relação a testes cross-browser)
• Fico curioso se oferece integração com GenAI (Copilot, Claude etc.)
  • Quero ajudar a vender este produto para o meu gerente
• Gostaria que o modelo de preços oferecesse compra única. Parece ótimo, mas acho difícil justificar um custo mensal/anual
• Muito legal! Fico curioso se existe alguma possibilidade de desconto para estudantes. Por enquanto, vou experimentar o teste grátis