ตรวจเว็บ Responsive บนหลายหน้าจอ

เริ่มพรีวิวเว็บไซต์หลายหน้าจอ

ใส่ URL แบบ HTTP หรือ HTTPS ในแถบด้านบนแล้วกด Load หากใส่เฉพาะชื่อโดเมน ระบบจะใช้ HTTPS ส่วน localhost ใช้ HTTP คุณเลือกโหลด URL ไปยังทุกอุปกรณ์หรือเฉพาะอุปกรณ์ที่เลือกไว้ได้

• เปิด Add device แล้วเลือกขนาดมือถือ แท็บเล็ต หรือเดสก์ท็อปได้หลายรายการ
• คลิกส่วนหัวเพื่อเลือกอุปกรณ์ ใช้ Shift, Ctrl หรือ Command พร้อมคลิกเพื่อเลือกหลายอุปกรณ์
• เปิด Device properties เพื่อตั้ง URL เฉพาะอุปกรณ์ ขนาด CSS viewport ชื่อ กรอบ และ visual scale

แยกขนาด viewport, visual scale และ zoom

CSS viewport เป็นขนาดที่หน้าเว็บใช้คำนวณ responsive layout ส่วน visual scale ย่อหรือขยายภาพของอุปกรณ์หนึ่งชิ้น และ canvas zoom เปลี่ยนมุมมองของพื้นที่ทำงานทั้งหมด การซูม canvas ไม่เปลี่ยน breakpoint ภายในหน้าเว็บ

• เลือกโหมด viewport เมื่อจะปรับความกว้างและความสูงจริง หรือเปลี่ยนเป็นโหมด visual scale จากเมนูอุปกรณ์เพื่อปรับเฉพาะภาพที่แสดง
• Rotate สลับความกว้างกับความสูง ค่าพรีเซ็ตเป็นจุดเริ่มต้นที่แก้ไขได้ ไม่ใช่ผลวัดฮาร์ดแวร์จริงทุกเครื่อง
• สร้าง custom preset สำหรับจอ kiosk หรือ breakpoint ของโครงการ ช่อง DPR และ user-agent เป็นข้อมูลกำกับเท่านั้น

จัดพื้นที่ทดสอบให้เหมาะกับงาน

ลากจากส่วนหัวของอุปกรณ์เพื่อจัดตำแหน่งโดยไม่รบกวนการใช้งานหน้าเว็บ การลากเองจะคงโหมด Manual ปุ่ม Fit all จัดมุมมองให้เห็นอุปกรณ์ ใช้ Space พร้อมลากหรือปุ่มเมาส์กลางเพื่อเลื่อนพื้นที่ทำงาน

• Horizontal และ Vertical จัดเป็นแถวหรือคอลัมน์ ส่วน Grid และ Masonry เหมาะกับชุดอุปกรณ์จำนวนมาก
• Auto Fit ประเมินการจัดวางและปรับมุมมอง ส่วน Focus ให้ความสำคัญกับอุปกรณ์ที่เลือก
• ปรับระยะห่าง ขอบพื้นที่ การเรียงลำดับ snap-to-grid และเส้นช่วยจัดแนวได้ใน Settings อุปกรณ์ที่ล็อกจะคงตำแหน่ง

บันทึก กู้คืน และแบ่งปันเลย์เอาต์

Device Studio บันทึก workspace ปัจจุบันใน localStorage และเก็บรายการ workspace กับ template ใน IndexedDB เมื่อเปิด session restore ตำแหน่ง ขนาด สเกล URL กรอบ การซ่อน และมุมมอง canvas จะกลับมาตามข้อมูลที่บันทึกไว้

• บันทึกเลย์เอาต์เป็น personal template หรือเริ่มจากเทมเพลตมาตรฐาน 6 แบบ
• Export JSON หรือ full backup ก่อนเปลี่ยนเครื่อง ล้างข้อมูลเบราว์เซอร์ หรือย้ายโดเมนและพอร์ต
• Import เลือกแทน workspace หรือรวมอุปกรณ์ได้ ควรอ่านสรุปก่อนยืนยัน ระบบตรวจ JSON เป็นข้อมูลและไม่รันสคริปต์จากไฟล์
• แท็บที่ใช้ origin เดียวกันซิงก์ข้อมูลที่บันทึกแล้ว หากมีงานที่ยังไม่บันทึกชนกัน ระบบให้เลือกเวอร์ชันที่จะเก็บ

ใช้ Browser mode กับเว็บที่บล็อก iframe

เลือกอุปกรณ์แล้วเลือก Browser · Playwright ใน sidebar บริการจะเปิดเว็บไซต์เป็นหน้าหลักใน Chromium และส่งภาพกลับมา ต้องเปิดบริการ Browser ก่อน ส่วนโฮสติ้งแบบ static อย่างเดียวใช้ iframe ได้ตามเดิม

• คลิกภาพเพื่อพิมพ์ วางข้อความ และใช้คีย์บอร์ด เลื่อนด้วยล้อเมาส์ กด Escape เพื่อคืนโฟกัสให้พื้นที่ทำงาน
• การ resize viewport หรือหมุนจอยังคงหน้าและฟอร์มเดิม ปุ่มย้อนกลับ/ไปข้างหน้าอยู่ในเมนูอุปกรณ์
• แต่ละอุปกรณ์มี session แยกกัน ข้อมูลเว็บไซต์และข้อมูลที่พิมพ์เข้าสู่เว็บทำงานบนเครื่องบริการ เมื่อรีโหลดหรือเชื่อมต่อใหม่ต้องเข้าสู่ระบบอีกครั้ง
• ค่าเริ่มต้นรองรับ Browser พร้อมกัน 6 อุปกรณ์ ส่วน dialog ของเบราว์เซอร์ การรับส่งไฟล์ และการเข้าสู่ระบบหลายหน้าต่างให้เปิดเว็บต้นฉบับ

เข้าใจข้อจำกัดของเบราว์เซอร์

เว็บไซต์อาจห้ามฝัง iframe ด้วย Content Security Policy หรือ X-Frame-Options การเกิด frame load ไม่ยืนยันว่าหน้าเว็บข้ามโดเมนแสดงสำเร็จ หากมีบริการรองรับให้เลือก Browser mode หรือใช้ Open original URL

• ไม่สามารถซิงก์การเลื่อนหรืออ่าน DOM ของ iframe ข้ามโดเมนได้ตามปกติ
• CSS viewport ไม่ได้จำลองโทรศัพท์ ระบบปฏิบัติการ mobile Safari, DPR หรือ user-agent จริง
• แต่ละหน้าใช้ทรัพยากร ความลื่นไหลขึ้นกับเว็บไซต์ เครื่อง และขีดจำกัดของบริการ

จับภาพเฉพาะพื้นที่ที่คุณเลือก

Screenshot และ Record ใช้หน้าต่างขอแชร์หน้าจอของเบราว์เซอร์ คุณเลือกแท็บ หน้าต่าง หรือจอได้ ภาพดาวน์โหลดเป็น PNG และวิดีโอเป็น WebM แบบไม่มีเสียง ระบบไม่ได้จับภาพพิกเซลเฉพาะอุปกรณ์ข้ามโดเมนโดยตรง

• ปฏิเสธหรือยกเลิกคำขอแชร์ได้ การจับภาพไม่เริ่มเอง
• กด Stop เพื่อดาวน์โหลดวิดีโอและหยุด media tracks ที่แชร์
• วิดีโอจะหยุดและดาวน์โหลดเมื่อถึง 256 MB เพื่อจำกัดการใช้หน่วยความจำ ความสามารถขึ้นกับเบราว์เซอร์

คีย์ลัดที่ใช้บ่อย

คำถามที่พบบ่อย