MultiView: การแสดงตัวอย่างอุปกรณ์พร้อมกันสำหรับการทดสอบเว็บที่ตอบสนอง
MultiView - ตัวจำลองที่ตอบสนองต่ออุปกรณ์ จาก multiview.dev เป็นส่วนขยายของ Chrome ที่สร้างขึ้นสำหรับการออกแบบเว็บที่ตอบสนองและการทดสอบ มันแสดง URL เดียวในกรอบอุปกรณ์หลายตัวในขณะที่สะท้อนการโต้ตอบเพื่อการเปรียบเทียบแบบเคียงข้างกัน ความสามารถหลักรวมถึงการเลื่อนและการป้อนข้อมูลที่ซิงโครไนซ์ โปรไฟล์อุปกรณ์ที่กำหนดเอง การจับภาพหน้าจอ และการสลับทิศทาง เครื่องมือนี้มุ่งเป้าไปที่นักพัฒนาฝั่งหน้า นักออกแบบ UI/UX และวิศวกร QA ที่ต้องการการตรวจสอบความเท่าเทียมกันทางสายตาอย่างรวดเร็วในหลายความละเอียดระหว่างการพัฒนาที่ทำซ้ำได้
วิธีการแสดงความแตกต่างของเลย์เอาต์อย่างรวดเร็ว
MultiView แสดงหน้าเดียวกันในหลายมุมมองของอุปกรณ์พร้อมกัน ซึ่งช่วยให้ทีมสามารถเปรียบเทียบการเรนเดอร์ระหว่างสมาร์ทโฟน แท็บเล็ต และกรอบเดสก์ท็อปโดยไม่ต้องปรับขนาดหน้าต่าง ส่วนขยายจะสะท้อนการกระทำของผู้ใช้ เช่น การเลื่อน คลิก และพิมพ์ในทุกมุมมองที่มองเห็นได้ ดังนั้นการถดถอยทางสายตาจึงชัดเจนในครั้งเดียว วิธีการนี้ช่วยขจัดขั้นตอนที่ซ้ำซากในการโหลด URL เดียวกันซ้ำในอีมูเลเตอร์แยกต่างหาก。
วิธีการที่เหมาะสมกับเวิร์กโฟลว์ด้านหน้า
ส่วนขยายรวมการทดสอบไว้ในแท็บเบราว์เซอร์เดียว ซึ่งช่วยลดการเปลี่ยนบริบทเมื่อยืนยันเลย์เอาต์ที่ตอบสนองในระหว่างการพัฒนา มันสามารถโหลด URL ใด ๆ ที่เบราว์เซอร์ของคุณเข้าถึงได้ รวมถึง localhost และไซต์สเตจภายใน ดังนั้นนักพัฒนาจึงสามารถทดสอบในสถานที่ได้ เวิร์กโฟลว์แบบแท็บเดียวนี้ช่วยเร่งการทำซ้ำใน CSS และการเปลี่ยนแปลงเลย์เอาต์โดยการรักษาตัวอย่างหลายตัวอย่างในมุมมองขณะแก้ไขโค้ดในหน้าต่างหรือโปรแกรมแก้ไขแยกต่างหาก。
วิธีการปรับแต่งสภาพแวดล้อมที่จำลองได้
MultiView รองรับโปรไฟล์อุปกรณ์ที่บันทึกและการควบคุมเชิงโต้ตอบ ผู้ใช้สามารถเพิ่มและใช้ความละเอียดที่กำหนดเอง สลับการจัดแนวแนวตั้งหรือแนวนอน และจับภาพหน้าจอของมุมมองแต่ละอันหรือพื้นที่ทำงานทั้งหมด นอกจากนี้ยังรวมเข้ากับ Chrome DevTools สำหรับการตรวจสอบองค์ประกอบ และทำงานในเบราว์เซอร์ที่ใช้ Chromium ซึ่งช่วยทีมที่ใช้เบราว์เซอร์ Chromium ที่แตกต่างกันในระหว่างการทดสอบ ควบคุมส่วนติดต่อหลักสามารถเข้าถึงได้โดยตรงจากพื้นที่ทำงานของส่วนขยาย。
MultiView เป็นเครื่องมือ QA ทางสายตาที่ใช้งานได้จริงสำหรับทีมงานด้านหน้าแบบวนซ้ำ
ในฐานะที่เป็นซิมูเลเตอร์ในเบราว์เซอร์ที่ไม่ต้องการการตั้งค่าภายนอก มันเหมาะสำหรับนักพัฒนาและนักออกแบบที่ต้องการการเปรียบเทียบทางสายตาอย่างรวดเร็วในขนาดต่างๆ คาดหวังการตรวจสอบเลย์เอาต์ที่รวดเร็วขึ้นในสปรินต์แรก ขณะที่การตรวจสอบขั้นสุดท้ายยังคงขึ้นอยู่กับการทดสอบเฉพาะอุปกรณ์และการทำงานดีบักที่ลึกซึ้ง สำหรับทีมที่มุ่งเน้นความเท่าเทียมทางสายตาและวงจรการตอบกลับที่รวดเร็ว ส่วนขยายนี้เป็นการเพิ่มที่มีเหตุผลในชุดเครื่องมือการพัฒนา