要点
3つのブレークポイントを一度に比較する最速の方法は？
URLをResponsive Previewに貼り付けると、モバイル（390px）、タブレット（820px）、デスクトップ（1280px）が同一オリジンの場合はスクロール同期付きで3つのライブiframeに表示されます。DevToolsのデバイスモードは1ビューポートずつリサイズ——1つの幅のデバッグには適していますが、ブレークポイント間の回帰を見つけるのは遅くなります。
比較
Responsive Preview vs DevToolsデバイスモード。
| オプション | コスト | 3幅同時表示 | スクロール同期 | 最適な用途 |
|---|---|---|---|---|
| Responsive Preview (TDS) | 無料 | はい — 390 / 820 / 1280px列 | 同一オリジン時は可 | ブレークポイント間のレイアウトずれの発見；プレビューリンクの共有 |
| ブラウザDevToolsデバイスモード | 無料（組み込み） | いいえ — 1幅ずつ | N/A | 1ビューポートの詳細検査、ネットワーク、DOM |
| 有料マルチビューポートツール | 有料プラン | はい | 多くの場合は可 | クラウドプレビューとコラボレーションが必要なチーム |
| /responsive-preview Cursorコマンド | 無料 | 3幅すべてのスクリーンショット | N/A（チャット内監査） | 構築中にCursor内でAI pass/warn/failレポート |
横並びの理由
3つのライブiframeが1つずつのリサイズに勝る理由。
レスポンシブのバグは、ブレークポイント間のずれとして現れることが多い——タブレットでは不自然に折り返すナビ、820pxでのみはみ出す画像など。DevToolsのプリセットを1つずつ切り替えると、その比較を見逃しやすくなります。横並びのライブiframeなら、同じページ状態を3幅すべてでスクロールし、不一致をすぐに発見できます。
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.
使い方
1分以内にお試し。
- Responsive Previewを開きます。
- ローカル開発URL（例：
http://localhost:8787/）を貼り付けてPreviewをクリックします。 - 1つのフレームをスクロール——同期が利用可能な場合、他も連動します。
- 任意：/responsive-previewコマンドをダウンロードして、CursorでAIスクリーンショットを取得します。
詳しい手順はResponsive Preview guideをご覧ください。