resposta curta
Qual é a forma mais rápida de comparar três breakpoints de uma vez?
Cole o seu URL em Responsive Preview para ver mobile (390px), tablet (820px) e desktop (1280px) em três iframes live com scroll sincronizado quando same-origin. O modo dispositivo DevTools redimensiona um viewport de cada vez — adequado para depurar uma largura, mais lento para detetar regressões entre breakpoints.
comparação
Responsive Preview vs modo dispositivo DevTools.
| Opção | Custo | Três larguras de uma vez | Scroll sync | Ideal para |
|---|---|---|---|---|
| Responsive Preview (TDS) | Grátis | Sim — colunas 390 / 820 / 1280px | Sim quando same-origin | Detetar drift de layout entre breakpoints; partilhar link de preview |
| Modo dispositivo DevTools do browser | Grátis (integrado) | Não — uma largura de cada vez | N/A | Inspeção profunda de um viewport, rede e DOM |
| Ferramentas multi-viewport pagas | Planos pagos | Sim | Muitas vezes sim | Equipas que precisam de previews na cloud e colaboração |
| Comando /responsive-preview Cursor | Grátis | Capturas nas três larguras | N/A (auditoria no chat) | Relatório AI pass/warn/fail no Cursor enquanto constrói |
por que lado a lado
Por que três iframes live vencem redimensionar um a um.
Bugs responsive aparecem muitas vezes como drift entre breakpoints — nav que quebra mal no tablet mas não no mobile, imagens que transbordam só a 820px. Alternar presets DevTools um a um faz perder essa comparação. Iframes live lado a lado permitem scroll do mesmo estado de página nas três larguras e detetar discrepâncias de imediato.
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.
como experimentar
Experimente em menos de um minuto.
- Abra Responsive Preview.
- Cole o seu URL de dev local (por exemplo
http://localhost:8787/) e clique Preview. - Faça scroll num frame — os outros seguem quando o sync está disponível.
- Opcional: descarregue o comando /responsive-preview para capturas com IA no Cursor.
Leia o walkthrough completo no Responsive Preview guide.