คำตอบสั้น
วิธีที่เร็วที่สุดในการเปรียบเทียบสาม breakpoint พร้อมกัน?
วาง URL ลงใน Responsive Preview เพื่อดูมือถือ (390px) แท็บเล็ต (820px) และเดสก์ท็อป (1280px) ใน iframe สดสามอันพร้อม scroll ซิงค์เมื่อ same-origin โหมดอุปกรณ์ DevTools ปรับ viewport ทีละอัน — เหมาะสำหรับ debug ความกว้างเดียว ช้ากว่าในการจับ regression ข้าม breakpoint
เปรียบเทียบ
Responsive Preview vs โหมดอุปกรณ์ DevTools
| ตัวเลือก | ค่าใช้จ่าย | สามความกว้างพร้อมกัน | scroll ซิงค์ | เหมาะสำหรับ |
|---|---|---|---|---|
| Responsive Preview (TDS) | ฟรี | ใช่ — คอลัมน์ 390 / 820 / 1280px | ใช่เมื่อ same-origin | จับ layout drift ข้าม breakpoint; แชร์ลิงก์ preview |
| โหมดอุปกรณ์ DevTools ของเบราว์เซอร์ | ฟรี (ในตัว) | ไม่ — ทีละความกว้าง | N/A | ตรวจสอบ viewport เดียวอย่างลึก เน็ตเวิร์ก และ DOM |
| เครื่องมือ multi-viewport แบบเสียเงิน | แผนเสียเงิน | ใช่ | มักใช่ | ทีมที่ต้องการ cloud preview และการทำงานร่วมกัน |
| คำสั่ง /responsive-preview Cursor | ฟรี | screenshot ที่ความกว้างทั้งสาม | N/A (ตรวจในแชท) | รายงาน AI pass/warn/fail ใน Cursor ขณะสร้าง |
ทำไมต้องเคียงข้าง
ทำไม iframe สดสามอันชนะการปรับทีละอัน
บั๊ก responsive มักปรากฏเป็น drift ระหว่าง breakpoint — nav ที่ wrap แปลกที่แท็บเล็ตแต่ไม่ใช่มือถือ รูปที่ overflow เฉพาะ 820px สลับ preset DevTools ทีละอันทำให้พลาดการเปรียบเทียบนั้น iframe สดเคียงข้างให้ scroll สถานะหน้าเดียวกันทั้งสามความกว้างและจับความไม่ตรงกันทันที
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 dev ในเครื่อง (เช่น
http://localhost:8787/) แล้วคลิก Preview - scroll frame หนึ่ง — อื่นๆ จะตามเมื่อ sync ใช้ได้
- ทางเลือก: ดาวน์โหลดคำสั่ง /responsive-preview สำหรับ AI screenshot ใน Cursor
อ่าน walkthrough เต็มใน Responsive Preview guide