the short answer
What is the fastest way to compare three breakpoints at once?
Paste your URL into Responsive Preview to see mobile (390px), tablet (820px), and desktop (1280px) in three live iframes with synced scrolling when same-origin. DevTools device mode resizes one viewport at a time — fine for debugging one width, slower for spotting cross-breakpoint regressions.
comparison
Responsive Preview vs DevTools device mode.
| Option | Cost | Three widths at once | Synced scroll | Best for |
|---|---|---|---|---|
| Responsive Preview (TDS) | Free | Yes — 390 / 820 / 1280px columns | Yes when same-origin | Spotting layout drift across breakpoints; sharing a preview link |
| Browser DevTools device mode | Free (built in) | No — one width at a time | N/A | Deep inspection of one viewport, network, and DOM |
| Paid multi-viewport tools | Paid tiers | Yes | Often yes | Teams needing cloud previews and collaboration |
| /responsive-preview Cursor command | Free | Screenshots at all three widths | N/A (audit in chat) | AI pass/warn/fail report inside Cursor while you build |
why side by side
Why three live iframes beat one-at-a-time resizing.
Responsive bugs often show up as drift between breakpoints — nav that wraps awkwardly at tablet but not mobile, images that overflow only at 820px. Switching DevTools presets one by one makes that comparison easy to miss. Side-by-side live iframes let you scroll the same page state across all three widths and spot mismatches immediately.
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.
how to
Try it in under a minute.
- Open Responsive Preview.
- Paste your local dev URL (for example
http://localhost:8787/) and click Preview. - Scroll one frame — others follow when sync is available.
- Optional: get the /responsive-preview Cursor command for AI screenshots in Cursor.
Read the full walkthrough in the Responsive Preview guide.