Polypane - Le navigateur pour les développeurs web ambitieux

• Un navigateur de bureau intégré (basé sur Chromium) réunissant des fonctionnalités pour le développement, le débogage et les tests de sites web, notamment le responsive design, l’accessibilité et les tests de performance
• Toutes les opérations sont synchronisées en temps réel, et il est possible d’afficher et de manipuler simultanément des viewports de différentes tailles
  • Tous les gestes comme le clic, la saisie, le défilement et le hover sont immédiatement répercutés sur tous les viewports
• Disponible sur Mac, Windows et Linux, avec un essai gratuit de 14 jours

Résumé des fonctionnalités clés

• Responsive design

  • Permet de visualiser d’un seul coup d’œil tous les viewports, du mobile jusqu’aux écrans 5K
  • Permet de tester les breakpoints CSS sans redimensionner manuellement le navigateur

• Analyse et synchronisation en temps réel

  • Toutes les actions, du défilement au clic, à la saisie et au hover, sont synchronisées en temps réel sur tous les viewports
  • La console et l’inspecteur d’éléments sont également intégrés pour réduire les tâches répétitives

• Vérification de l’accessibilité et des performances

  • Vérifie en temps réel la structure, les métadonnées et l’accessibilité (A11y), et propose des pistes d’amélioration
  • Plus de 40 outils de débogage intégrés permettent de tester de nombreuses situations

• Mode sombre et tests de médias variés

  • Permet de tester simultanément les modes sombre et clair sans modifier les réglages du système d’exploitation
  • Simule diverses conditions média comme la réduction des animations, l’économie de données et les styles d’impression

• Prévisualisation des cartes pour les réseaux sociaux

  • Prend en charge l’aperçu des meta cards des principales plateformes comme Twitter(X), Facebook, Slack, LinkedIn et Discord
  • Fournit des aperçus précis au pixel près en mode clair/sombre et même en localhost

• Prise en charge des extensions d’outils développeur

  • Compatible avec diverses extensions DevTools comme React, Vue, Angular, Svelte et Redux
  • Comme il s’agit d’un navigateur basé sur Chromium, l’environnement de développement reste familier

Les atouts propres à Polypane

• Permet de tester différents appareils et environnements dans un seul navigateur
• Accélère jusqu’à 5 fois les workflows de développement et de design
• Une configuration tout-en-un avec outils de débogage multifonctions, vérification d’accessibilité, synchronisation des viewports, captures d’écran et rechargement en temps réel
• Un projet qui évolue grâce aux retours des utilisateurs, entièrement autofinancé et centré à 100 % sur les utilisateurs

Autres fonctionnalités principales

• Création illimitée de viewports
• Synchronisation du clavier, du hover et du défilement
• Superposition de grille
• Visionneuse JSON et nombreux préréglages d’appareils
• Détection du débordement horizontal
• Comparaison visuelle de design (diff)
• Simulation du daltonisme
• Vue d’ensemble des métadonnées
• Vérificateur de Web Vitals
• Émulation tactile
• Détection des liens cassés
• Configuration d’en-têtes personnalisés
• Sauvegarde et partage des workspaces

Le mot du créateur

• Un projet lancé par le développeur Kilian Valkhof pour résoudre les difficultés rencontrées en créant de nombreux sites web
• Le rythme de travail a augmenté d’environ 60 % par rapport à l’utilisation de Chrome seul, et les utilisateurs constatent eux aussi un gain de productivité de 2 à 5 fois
• Un projet financé sans investisseurs, grâce aux retours et aux abonnements des utilisateurs, avec un focus sur la création d’outils pensés pour les développeurs

Résumé des avis utilisateurs

• Vivian Guillen : « Extrêmement rapide, et la synchronisation du défilement est fantastique »
• Scott Tolinski : « Permet de repérer facilement les problèmes d’espacement entre les breakpoints »
• Sara Soueidan : « Les outils de débogage sont tellement excellents qu’ils impressionnent vraiment »
• Kevin Powell : « La vérification de l’accessibilité et les fonctions de débogage sont remarquables »
• Segun Adebayo (développeur de Chakra UI) : « Un outil indispensable pour développer des applications et des sites modernes »

[nemorize]

https://responsiveviewer.org/
Il existe aussi une version distribuée sous forme d’extension Chrome. Si vous acceptez de renoncer à certaines fonctionnalités, il est également possible de l’utiliser directement sans extension.

[qyurila]

C’est assez curieusement difficile à trouver, mais si vous liez votre compte étudiant GitHub, vous pouvez l’utiliser gratuitement. Grâce à ça, je l’ai bien utilisé pour mon projet personnel précédent.

[luiseok]

Il existe un navigateur similaire, même s’il manque un peu de fonctionnalités.
https://responsively.app/
Si vous hésitez parce que Polypane est payant, je vous recommande de l’essayer.

[GN⁺]

Avis Hacker News

• Bonjour, je suis Kilian, le créateur et développeur solo de Polypane. C’est intéressant de le voir revenir en page d’accueil.
• J’ai récemment appris flexbox et grid en implémentant pour la première fois un design web responsive moderne en CSS, en utilisant plusieurs navigateurs et émulateurs d’appareils. Si j’avais connu cette application, cela m’aurait épargné beaucoup d’efforts.
• J’ai beaucoup utilisé Polypane. C’est un excellent produit, et il émule bien les subtils problèmes liés aux appareils que la vue appareil de Chrome gère mal.
• J’utilise Polypane depuis plus d’un an, et même si ce n’est peut-être pas fait pour tout le monde, cela correspond bien à mes besoins.
  • La gestion des sessions rend mon workflow bien organisé.
  • Un design orienté responsive avec des panneaux pour les vues desktop et mobile.
  • Une fonction de capture d’écran complète avec annotations.
  • On peut reproduire ces fonctionnalités avec d’autres navigateurs ou plugins, mais j’apprécie que tout soit configuré par défaut sans nécessiter de réglages supplémentaires.
  • Le support est excellent. Quand j’ai eu un problème où mon IDE ne lançait pas correctement Polypane, j’ai reçu de l’aide sur Slack et cela a été résolu rapidement.
  • En lisant les échanges sur Slack, il est clair qu’ils sont déterminés à créer le meilleur produit possible pour les utilisateurs.
• J’aimerais qu’il existe un navigateur capable d’émuler fidèlement le navigateur d’un appareil mobile, pas seulement de changer la taille de l’écran. Même le simulateur iOS d’Apple échoue sur ce point.
• On dirait qu’il émule beaucoup de choses, mais je me demande ce qu’il n’émule pas correctement.
  • Comme cela semble basé sur Chromium, il ne doit probablement pas montrer les problèmes qui n’apparaissent que sur Safari ou Mozilla.
  • C’est probablement dans la documentation.
  • Modification : c’est en bas de la FAQ. Je me demande s’il y a d’autres limitations connues en dehors du moteur de navigateur réel.
• Presque toutes les fonctionnalités sont déjà intégrées aux outils de développement de Firefox. Je me demande pourquoi il faudrait un nouveau navigateur. Cela semblerait aussi possible via une extension.
• Je me demande quelles sont les fonctionnalités qu’il offre par rapport à Browserstack (concernant les tests cross-browser).
• Je me demande s’il propose une intégration GenAI (Copilot, Claude, etc.).
  • J’aimerais m’en servir pour aider à vendre ce produit à mon manager.
• J’aimerais que le modèle tarifaire propose un achat unique. Cela a l’air excellent, mais il serait difficile de justifier un coût mensuel ou annuel.
• Vraiment très cool ! Je me demande s’il est possible d’obtenir une réduction étudiante. Je vais d’abord essayer l’essai gratuit.