réponse courte
Quel est le moyen le plus rapide de comparer trois breakpoints à la fois ?
Collez votre URL dans Responsive Preview pour voir mobile (390px), tablette (820px) et bureau (1280px) dans trois iframes live avec défilement synchronisé en same-origin. Le mode appareil DevTools redimensionne un viewport à la fois — adapté au débogage d'une largeur, plus lent pour repérer les régressions entre breakpoints.
comparaison
Responsive Preview vs mode appareil DevTools.
| Option | Coût | Trois largeurs à la fois | Scroll sync | Idéal pour |
|---|---|---|---|---|
| Responsive Preview (TDS) | Gratuit | Oui — colonnes 390 / 820 / 1280px | Oui en same-origin | Repérer la dérive de layout entre breakpoints ; partager un lien de preview |
| Mode appareil DevTools du navigateur | Gratuit (intégré) | Non — une largeur à la fois | N/A | Inspection approfondie d'un viewport, réseau et DOM |
| Outils multi-viewport payants | Offres payantes | Oui | Souvent oui | Équipes nécessitant previews cloud et collaboration |
| Commande /responsive-preview Cursor | Gratuit | Captures aux trois largeurs | N/A (audit dans le chat) | Rapport IA pass/warn/fail dans Cursor pendant le développement |
pourquoi côte à côte
Pourquoi trois iframes live battent le redimensionnement un par un.
Les bugs responsive apparaissent souvent comme une dérive entre breakpoints — nav qui se casse mal en tablette mais pas en mobile, images qui débordent seulement à 820px. Changer les presets DevTools un par un rend cette comparaison facile à manquer. Des iframes live côte à côte permettent de faire défiler le même état de page sur les trois largeurs et repérer les écarts immédiatement.
Fix in Cursor copies viewport context from the frame where you spotted the issue, so you can paste it into chat and annotate with Design Mode without re-describing the breakpoint.
comment essayer
Essayez en moins d'une minute.
- Ouvrez Responsive Preview.
- Collez votre URL de dev local (par ex.
http://localhost:8787/) et cliquez sur Preview. - Faites défiler un frame — les autres suivent quand la sync est disponible.
- Optionnel : téléchargez la commande /responsive-preview pour des captures IA dans Cursor.
Consultez le walkthrough complet dans le Responsive Preview guide.