Combien de viewports puis-je tester simultanément ?

Vous pouvez configurer et comparer jusqu'à six largeurs de viewport différentes lors d'une seule analyse.

Qu'est-ce que la carte de chaleur (heatmap) de pixels ?

C'est une image superposée qui met en évidence en couleur les zones exactes où les pixels diffèrent d'une résolution à l'autre.

L'outil effectue-t-il une comparaison sémantique du code HTML ?

Non, il mesure uniquement les changements physiques de pixels rendus à l'écran et ne compare pas la structure sémantique du DOM.

Pourquoi configurer un délai d'attente après le chargement ?

Cela permet de laisser le temps aux animations CSS, aux polices web ou aux scripts de s'exécuter avant la capture d'écran.

Puis-je récupérer les captures d'écran générées ?

Oui, le rapport final inclut un lien pour télécharger une archive ZIP contenant toutes les captures d'écran et cartes de chaleur.

Elysia Tools

Navigation mobile

Development

Diff visuel de breakpoints responsifs

Rend une URL a plusieurs largeurs et affiche les captures, cartes de chaleur et metriques de mise en page.

Détails

Ce que cet outil vous aide à faire

Chromium headless capture jusqu a six viewports et marque les changements de pixels. Le rapport affiche captures, cartes de chaleur, metriques et telechargement ZIP; aucun appariement semantique n est revendique.

Exécution

Exécuter cet outil

Remplissez le formulaire, lancez l’outil et consultez le résultat au même endroit.

Exécutions d’exemple préparées

Cliquez sur un exemple pour remplir automatiquement le formulaire. Les fichiers doivent toujours être téléversés.

1 exemples

La mise en page des cartes change entre 375 px et 768 px

Rend une page de cartes responsive integree a deux largeurs et telecharge un ZIP avec captures, carte de chaleur des pixels et rapport de viewport.

<section><h2>Responsive visual diff</h2><p>375 px and 768 px screenshots, a 375-to-768 pixel heatmap, layout metrics, and a ZIP download.</p></section>

Entrées

Renseignez les champs nécessaires, puis lancez l’outil.

5 réglages

ContenuCollez ou saisissez les valeurs principales.2

URL du sitetextRequisLargeurs de viewport (px)textRequis

RéglagesAjustez formats, plages, nombres et modes.3

Hauteur de viewport (px)numberOptionnelAttente après chargement (ms)numberOptionnelMode de comparaisonselectOptionnel

Résultat

Prêt à exécuter

Après exécution, les fichiers, textes, données structurées ou sorties en flux apparaîtront ici.

Exemples

Exemples adaptés à cet outil

Associé

Diff visuel de breakpoints responsifs

Ce que cet outil vous aide à faire

Exécuter cet outil

Exécutions d’exemple préparées

Entrées

Résultat

Exemples adaptés à cet outil

Continuer avec des outils et dossiers associés

Exécutions d’exemple préparées

Entrées

Résultat

Découvrez quand utiliser cet outil, ce qu'il prend en charge et comment les utilisateurs l'appliquent.

Points clés

Aperçu

Quand l’utiliser

Fonctionnement

Cas d’usage

Exemples

1. Vérification du comportement d'une grille de cartes

2. Audit de la barre de navigation sur grand écran

FAQ

Exemples de Traitement d'Images Android Java

Exemples de Traitement d'Images Android Kotlin

Exemples de Traitement d'Images Web Python

Exemples de Traitement d'Images Web Rust

Sync de palette Tailwind

Analyseur de Complexite du Code

Testeur de Requêtes HTTP

Explorateur d’Expressions Cron

Outils de Diff et de Comparaison de Fichiers et de Données

Outils d’analyse de texte, de lisibilité et d’inspection de contenu

Outils de mesure et d inspection audio

Outils d analyse statistique, de tests et de distributions