# Diff visuel de breakpoints responsifs Rend une URL a plusieurs largeurs et affiche les captures, cartes de chaleur et metriques de mise en page. > Page canonique: https://elysiatools.com/fr/tools/responsive-breakpoint-diff - **Catégorie:** Development - **Mots-clés:** responsive, breakpoint, diff visuel ## Présentation 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. ## Entrées - **URL du site** (text): https://example.com - **Largeurs de viewport (px)** (text) - **Hauteur de viewport (px)** (number) - **Attente après chargement (ms)** (number) - **Mode de comparaison** (select) ## Quand l'utiliser - Lors de l'intégration de maquettes pour valider le comportement responsive sur mobile, tablette et bureau. - Pour identifier rapidement les sauts de mise en page inattendus ou les éléments qui débordent entre deux résolutions. - Avant la mise en production d'une feuille de style CSS pour s'assurer de la fluidité des grilles et des conteneurs. ## Fonctionnement - Saisissez l'URL de la page web à analyser et indiquez les largeurs de viewport cibles séparées par des virgules. - Définissez la hauteur du viewport, le délai d'attente après chargement et le mode de comparaison (adjacent ou par rapport au plus large). - Le moteur Chromium headless effectue les captures d'écran et calcule les différences de pixels pour générer les cartes de chaleur. - Consultez le rapport interactif contenant les captures, les métriques DOM et téléchargez l'archive ZIP des résultats. ## Cas d'usage - Validation de l'adaptation d'une grille CSS Grid ou Flexbox entre les formats mobile (375px) et tablette (768px). - Détection des éléments qui débordent (overflow) ou des textes tronqués lors du redimensionnement de la fenêtre. - Audit visuel rapide d'une page d'atterrissage sur les résolutions d'écran les plus courantes du marché. ## Questions fréquentes ### 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. ## Outils associés - [Sync de palette Tailwind](https://elysiatools.com/fr/tools/tailwind-color-palette-sync): Entrez des HEX, choisissez le schéma de noms (échelle 50–950 / nom unique / imbrication) et générez le fragment theme.extend.colors de tailwind.config.ts avec les niveaux WCAG AA/AAA. Dark mode optionnel. - [Analyseur de Complexite du Code](https://elysiatools.com/fr/tools/code-complexity-analyzer): Mesure la complexite, limbrication et la duplication du code - [Testeur de Requêtes HTTP](https://elysiatools.com/fr/tools/http-request-tester): Client HTTP léger dans le navigateur (mini Postman) : envoyez des requêtes GET/POST/PUT/DELETE avec en-têtes et corps personnalisés, inspectez statut, en-têtes, temps et réponse formatée — entièrement dans le navigateur - [Explorateur d’Expressions Cron](https://elysiatools.com/fr/tools/cron-expression-explainer): Analyse une expression cron (5/6 champs ou Quartz) en description en langage naturel, détaille les champs et liste les N prochaines exécutions dans tout fuseau IANA, avec une explication IA - [Extracteur de Domaine](https://elysiatools.com/fr/tools/domain-extractor): Extraire les noms de domaine des URLs. Prend en charge diverses options d'extraction incluant les sous-domaines et l'analyse des chemins. - [Auditeur de dépendances package.json](https://elysiatools.com/fr/tools/package-json-dependency-auditor): Audite un package.json pour l’hygiène des dépendances et la qualité des plages de versions, et peut inspecter l’arbre transitif depuis package-lock.json ou yarn.lock. Signale les doublons, wildcard/pré-version, clés non triées, métadonnées manquantes et dépendances runtime/dev mal classées. - [Détecteur de graphe de dépendances de fixtures pytest et de fuites mock.patch](https://elysiatools.com/fr/tools/pytest-conftest-fixture-dependency-graph-and-mock-patch-leak-detector): Analyse statiquement une chaîne de conftest.py : construit le graphe de dépendances des fixtures selon les cinq portées (function/class/module/package/session), détecte les overrides des conftest plus profonds et signale les fuites d'état entre tests : mock.patch().start() sans .stop(), monkeypatch dans une fixture à portée large (son annulation au niveau fonction ne s'exécute jamais) et with mock.patch maintenu ouvert au travers d'un yield. - [Analyseur de Paramètres URL](https://elysiatools.com/fr/tools/url-query-analyzer): Analyse par lots les paramètres de requête URL avec sortie de fréquence des clés, échantillons de valeurs et détection d'anomalies d'encodage ## Exemples - [Exemples de Traitement d'Images Android Java](https://elysiatools.com/fr/samples/android-image-processing-java): Exemples de traitement d'images Android Java incluant lecture/écriture, mise à l'échelle et conversion de format - [Exemples de Traitement d'Images Android Kotlin](https://elysiatools.com/fr/samples/android-image-processing-kotlin): Exemples de traitement d'images Android Kotlin incluant lecture/écriture, mise à l'échelle et conversion de format - [Exemples de Traitement d'Images Web Python](https://elysiatools.com/fr/samples/web-image-processing-python): Exemples de traitement d'images Web Python utilisant PIL/Pillow incluant la lecture, l'enregistrement, le redimensionnement et la conversion de format - [Exemples de Traitement d'Images Web Rust](https://elysiatools.com/fr/samples/web-image-processing-rust): Exemples de traitement d'images Web Rust incluant lecture/écriture, redimensionnement et conversion de format ## Contenu associé - [Outils de Comparaison de Fichiers et de Donnees](https://elysiatools.com/fr/hubs/file-data-diff-comparison-tools): Comparez deux artefacts, choisissez la bonne branche de diff selon le format, examinez les changements structurels ou semantiques, puis terminez par une verification d'integrite lorsque l'acceptation exige une certitude au niveau des octets.