簡答
一次比較三個斷點最快的方式？
將 URL 貼到 Responsive Preview，即可在相同來源時以同步捲動在三個即時 iframe 查看行動（390px）、平板（820px）、桌面（1280px）。DevTools 裝置模式一次只調整一個視埠——適合除錯單一寬度，較難發現跨斷點回歸。
比較
Responsive Preview vs DevTools 裝置模式。
| 選項 | 費用 | 三寬同時 | 同步捲動 | 最適用途 |
|---|---|---|---|---|
| Responsive Preview (TDS) | 免費 | 是 — 390 / 820 / 1280px 欄 | 相同來源時可 | 發現跨斷點版面漂移；分享預覽連結 |
| 瀏覽器 DevTools 裝置模式 | 免費（內建） | 否 — 一次一寬 | N/A | 深入檢查單一視埠、網路與 DOM |
| 付費多視埠工具 | 付費方案 | 是 | 通常可 | 需要雲端預覽與協作的團隊 |
| /responsive-preview Cursor 指令 | 免費 | 三寬截圖 | N/A（聊天內稽核） | 開發時在 Cursor 內取得 AI pass/warn/fail 報告 |
為何並排
三個即時 iframe 勝過逐一調整。
響應式問題常表現為斷點間漂移——平板導覽換行怪異但行動正常、820px 才溢出的圖片。逐一切換 DevTools 預設容易漏看。並排即時 iframe 可在三種寬度捲動同一頁面狀態，立即發現不一致。
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.
如何使用
一分鐘內試用。
- 開啟 Responsive Preview。
- 貼上本地開發 URL（例如
http://localhost:8787/）並點擊 Preview。 - 捲動一個框架——同步可用時，其餘會跟隨。
- 選用：下載 /responsive-preview 指令，在 Cursor 取得 AI 截圖。
完整 walkthrough 請見 Responsive Preview guide。