Kurzantwort
Was ist der schnellste Weg, drei Breakpoints gleichzeitig zu vergleichen?
Fügen Sie Ihre URL in Responsive Preview ein, um Mobile (390px), Tablet (820px) und Desktop (1280px) in drei Live-Iframes mit synchronisiertem Scrollen bei Same-Origin zu sehen. Der DevTools-Gerätemodus skaliert jeweils ein Viewport — gut für eine Breite, langsamer für Cross-Breakpoint-Regressionen.
Vergleich
Responsive Preview vs DevTools-Gerätemodus.
| Option | Kosten | Drei Breiten gleichzeitig | Scroll-Sync | Am besten für |
|---|---|---|---|---|
| Responsive Preview (TDS) | Kostenlos | Ja — Spalten 390 / 820 / 1280px | Ja bei Same-Origin | Layout-Drift über Breakpoints erkennen; Preview-Link teilen |
| Browser-DevTools-Gerätemodus | Kostenlos (integriert) | Nein — eine Breite nacheinander | N/A | Tiefe Inspektion eines Viewports, Netzwerk und DOM |
| Kostenpflichtige Multi-Viewport-Tools | Kostenpflichtige Pläne | Ja | Oft ja | Teams mit Cloud-Previews und Zusammenarbeit |
| /responsive-preview Cursor-Befehl | Kostenlos | Screenshots an allen drei Breiten | N/A (Audit im Chat) | KI pass/warn/fail-Bericht in Cursor beim Entwickeln |
warum nebeneinander
Warum drei Live-Iframes besser sind als nacheinander skalieren.
Responsive-Bugs zeigen sich oft als Drift zwischen Breakpoints — Nav bricht auf Tablet ungünstig um, Bilder überlaufen nur bei 820px. DevTools-Presets nacheinander zu wechseln lässt diesen Vergleich leicht übersehen. Nebeneinander-Live-Iframes scrollen denselben Seitenzustand über alle drei Breiten und zeigen Abweichungen sofort.
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.
Anleitung
In unter einer Minute ausprobieren.
- Öffnen Sie Responsive Preview.
- Fügen Sie Ihre lokale Dev-URL ein (z. B.
http://localhost:8787/) und klicken Sie Preview. - Scrollen Sie einen Frame — die anderen folgen, wenn Sync verfügbar ist.
- Optional: Laden Sie den /responsive-preview-Befehl für KI-Screenshots in Cursor herunter.
Den vollständigen Walkthrough finden Sie im Responsive Preview guide.