Polypane: un navigateur multi-écran spécialement con?u pour un développement Web efficace

Avantages de base:

• Vue de synchronisation multi-écrans: Les subvertions des subverts en polypane et utilisent des vues multi-écrans pour afficher simultanément l'effet du site Web sous différentes tailles d'écran, améliorant considérablement l'efficacité de la conception réactive.
• Outils de développement intégrés: Les outils de développement puissants sont intégrés, notamment le rechargement en temps réel, le débogage CSS, les tests sans barrière, les captures d'écran plein écran, la simulation de dispositifs, etc., simplifiant le processus de développement et améliorer la productivité.
• Améliore considérablement l'efficacité: La recherche montre que les développeurs utilisant le polypane sont 3 à 10 fois plus efficaces et réduisent considérablement la charge de travail des correctifs de bogues après s'être mis en ligne.

En tant que développeurs, nous recherchons des outils efficaces. Nous avons soigneusement sélectionné le clavier, l'éditeur de code et l'IDE, et même méticuleusement réfléchi sur le thème du code et les polices (j'ai utilisé le code FIRA). Nous optimisons le CSS et le flux de traitement d'image et utilisons des outils de construction efficaces.

Cependant, nous naviguons sur le Web en utilisant le même navigateur que Volkswagen. N'est-ce pas étrange? Nous avons soigneusement sélectionné parmi de nombreux éditeurs de code, et le sens de frappe du clavier est également efforcé d'être parfait, mais nous continuons à utiliser le même navigateur. Tout comme nous ne savons pas comment écrire du code dans Word, nous ne devrions pas nous contenter d'utiliser un navigateur normal pour le développement de sites Web.

(Cet article est extrait de la série d'articles "feuille de route", qui explorer la création et la promotion de produits du point de vue des développeurs. Nous partagerons les le?ons apprises par les chefs de produit et fournirons aux fondateurs techniques des fondateurs avec Expérience et le?ons apprises par les chefs de produit.

Le flux de travail de l'utilisation d'un navigateur traditionnel est généralement comme ceci: construisez d'abord le site Web à une seule taille, puis ajustez la taille du navigateur, puis construisez la conception pour cette taille. Répétez ceci, c'est inefficace. Pire, pendant le développement, de nouvelles demandes apportées par de nouvelles pages peuvent affecter les pages terminées, ce qui entra?ne une reprise.

De plus, en plus de la conception visuelle, nous devons également effectuer des tests d'accessibilité, générer des captures d'écran en plein écran, vérifier les balises META, etc., qui nécessite d'installer plusieurs extensions de navigateur, ce qui mène finalement à l'exécution du navigateur lent.

Ouvrez le polypane, vous ne voyez pas un seul site Web, mais une vue synchrone du site Web sous plusieurs tailles d'écran, comme si plusieurs appareils étaient placés sur un bureau. Plus important encore, ces tailles d'écran sont synchronisées: défilement, robinet, survolent ou les actions d'entrée sont synchronisées avec tous les écrans. Vous utilisez le même site Web, en le visualisant simplement en plusieurs tailles en même temps.

Plusieurs écrans sont affichés c?te à c?te, sans réglage répété de la taille du navigateur. Vous pouvez choisir parmi plus de 20 dispositifs prédéfinis (téléphones, tablettes et ordinateurs portables) ou vous pouvez ajuster la taille librement. Vous pouvez même demander à Polypane d'analyser la page CSS, de trouver toutes les requêtes de médias CSS et de créer des tailles d'écran à partir de celui-ci, en vous assurant de toujours tester le site Web à toutes les tailles cibles.

cela lui-même améliore considérablement la productivité. En plus d'éliminer le redimensionnement du navigateur à plusieurs reprises, le polypane a fait plus:

• Rechargement en temps réel: Polypane prend en charge tout système de rechargement chaud ou en temps réel et dispose d'un serveur de rechargement en temps réel intégré. Spécifiez simplement le dossier que vous souhaitez vérifier. Il prend même en charge les fichiers HTML purs! La meilleure chose est que si vous mettez à jour un fichier ou une image CSS, le polypane actualise uniquement le contenu, plut?t que de recharger toute la page.

OUTIL DE DéVELOPPEMENT AVATAR BROWNER:

Vous pouvez demander: Que faire si vous développez un outil? Les outils de développement pour les navigateurs traditionnels sont excellents et Polypane utilise également les mêmes outils de développement puissants (y compris les extensions d'outils de développeur) que Google Chrome et Microsoft Edge. Mais les outils du développeur du navigateur sont après tout des modules complémentaires. 99% des utilisateurs cibles du navigateur ne sont pas développés, nous ne pouvons donc obtenir cette petite zone d'outils de développeur.

Si nous considérons l'ensemble du navigateur comme un outil de développement, nous pouvons non seulement déverrouiller plus de nouvelles fonctionnalités, mais aussi l'optimiser afin que chaque nouvelle fonctionnalité ne ralentit pas le navigateur comme une extension de navigateur.

C'est pourquoi le polypane a de nombreuses fonctionnalités intégrées:

• Capture d'écran complète
• Simulation de l'équipement
• Aper?u du partage des médias sociaux
• Test d'accessibilité intégrée
• Mode sombre et simulation de requête de support de mouvement réduit
• édition CSS en temps réel sur tous les écrans
• En-tête personnalisé
• Touch Simulation
• Color Blindness Emulator
• navigateur latéral qui affiche vos outils de livraison, documents ou conceptions directement à c?té de votre site Web
• Vérificateur de contraste de couleurs CSS, suggérez les couleurs et prévisualisez-les en temps réel
• superposition d'image pour les tests de régression visuelle ou le conception parfaite du pixel

Outil de test avancé:

Ce n'est que le début. Y a-t-il un inspecteur d'élément qui vous permet de modifier des pages sur tous les écrans en même temps et de tester facilement de nouveaux styles et contenus? L'inspecteur de l'élément polypane peut le faire.

Aucun autre navigateur ne peut modifier plusieurs tailles d'écran simultanément d'une manière aussi intuitive et rapide. Nous avons également un panneau qui vérifie le contour de la page (affiche tous les titres et leurs hiérarchies), édite toutes les informations locales et cookies, ou écrit du code CSS ou SASS et l'inserte dans chaque écran pour un prototypage super rapide.

Les superpositions en polypane vous permettent d'essayer rapidement diverses actions sur un seul écran, telles que la simulation de la cécité couleur ou d'autres déficiences visuelles, de vérifier les problèmes de mise en page ou de répertorier tous les indices Z sur la page.

Tous ces outils peuvent vous aider à développer différentes parties de votre page Web, et selon nos recherches sur les utilisateurs de polypane, les développeurs deviennent 3 à 10 fois plus efficaces, selon la tache. De plus, comme le polypane facilite la vérification des méta-informations et toutes les tailles de navigateur, la charge de travail de la fixation des bogues après s'être rendu en ligne est également considérablement réduite.

Dans les futurs articles, nous explorerons comment utiliser le polypane pour une revue complète de site Web et comment créer une conception réactive à partir de zéro en utilisant toutes les capacités de Polypane.

Polypane propose un essai gratuit de 14 jours.

FAQ du navigateur de développeur polypane:

(La partie FAQ est omise ci-dessous car elle est trop longue et ne correspond pas à l'objectif pseudo-original. Vous pouvez conserver ou réorganiser de manière sélective une partie de la FAQ au besoin, et effectuer des opérations pseudo-originales telles que les synonymes remplacement.)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!