การแสดงตัวอย่างแบบข้างเคียงที่ตอบสนองสำหรับการตรวจสอบภาพอย่างรวดเร็ว
Sense - Multi-Screen Preview, จาก Sense, เป็นส่วนขยายของ Chrome ที่ช่วยให้นักพัฒนาเว็บและนักออกแบบตรวจสอบเลย์เอาต์ที่ตอบสนองได้ มันให้การตรวจสอบภาพพร้อมกันในหมวดหมู่ของอุปกรณ์เพื่อให้ทีมสามารถยืนยันได้ว่า breakpoints ทำงานอย่างไรโดยไม่ต้องสลับหน้าต่าง ส่วนขยายนี้เน้นการเรนเดอร์บนอุปกรณ์จริงและรายการอุปกรณ์ที่สามารถปรับแต่งได้เพื่อตรงตามเป้าหมายของโครงการ มันมุ่งเป้าไปที่วิศวกรด้านหน้าและนักออกแบบ UI ที่ต้องการการตรวจสอบภาพที่รวดเร็วและสามารถทำซ้ำได้ในระหว่างการพัฒนาและการทำเอกสาร
ส่วนขยายแสดงตัวอย่างอุปกรณ์พร้อมกันสี่ตัวด้วยความกว้างจริง
Sense เปิดกริดการ์ดสี่ใบที่แสดง URL เดียวกันที่ความกว้างของ viewport ที่แตกต่างกัน เพื่อให้นักออกแบบสามารถเปรียบเทียบเลย์เอาต์ของ Mobile, Tablet, Laptop และ Desktop ได้ในครั้งเดียว เครื่องมือนี้มี การตั้งค่าของอุปกรณ์จริง และการสลับทิศทางต่อการ์ด; การตั้งค่าตัวอย่างรวมถึง:
- iPhone SE และ Pixel 7 (มือถือ)
- iPad Pro (แท็บเล็ต)
- MacBook Air (แล็ปท็อป)
กรอบการดูทำงานในแท็บเดียวเพื่อลดผลกระทบของเบราว์เซอร์ที่กว้างขึ้น
Sense จำกัดการดูของมันไว้ในแท็บที่กำหนด ซึ่งเป็นวิธีที่ทำให้เซสชันเบราว์เซอร์ที่เหลือไม่เปลี่ยนแปลงและทำให้กิจกรรมของส่วนขยายอยู่ในขอบเขตเฉพาะ กริดจะเปิดจากไอคอนแถบเครื่องมือหรือผ่านทางแป้นพิมพ์ Ctrl+Shift+Y สำหรับการเปิดใช้งานทันที ส่วนขยายนี้มีให้สำหรับ Chrome และเบราว์เซอร์ที่ใช้ Chromium อื่นๆ ซึ่งทำให้การติดตั้งในสภาพแวดล้อมของนักพัฒนาทั่วไปง่ายขึ้น
การส่งออกและตัวเลือกช่วยให้ทีมสามารถจับภาพและมาตรฐานภาพหน้าจอที่ตอบสนองได้
ส่วนขยายนี้รวมถึงการส่งออกภาพหน้าจอด้วยการคลิกเดียวที่ถูกตัดให้ตรงกับขนาดของอุปกรณ์ที่ใช้งานอยู่และหน้าตัวเลือกเพื่อปรับแต่งว่าอุปกรณ์และหมวดหมู่ใดที่จะปรากฏ ทีมงานสามารถปรับแต่งรายการอุปกรณ์และการมองเห็นให้ตรงกับ breakpoints ของโครงการ การควบคุมเหล่านี้สนับสนุนการถ่ายภาพสถานะเลย์เอาต์ได้เร็วขึ้นและช่วยผลิตภาพที่สอดคล้องกันสำหรับเอกสารหรือการตรวจสอบ
ดีที่สุดในการตรวจสอบภาพมากกว่าการดีบักเชิงลึก
Sense มุ่งเน้นไปที่การตรวจสอบคุณภาพภาพ: มันให้ viewport ที่ตรงกันสำหรับการเปรียบเทียบและเอกสารอย่างรวดเร็ว ในขณะที่ปล่อยให้การตรวจสอบ DOM, การวิเคราะห์ประสิทธิภาพ และการติดตามเครือข่ายอยู่ในเครื่องมือพัฒนาของเบราว์เซอร์ ใช้ส่วนขยายเพื่อยืนยันเลย์เอาต์และจับภาพหน้าจอขนาดอุปกรณ์ จากนั้นสลับไปที่ DevTools แบบเต็มสำหรับการดีบักระดับองค์ประกอบหรือการวิเคราะห์ประสิทธิภาพ
เครื่องมือ QA ทางสายตาที่ใช้งานได้จริงสำหรับนักพัฒนาที่ต้องการตรวจสอบเลย์เอาต์อย่างรวดเร็ว
Sense เป็นโซลูชันที่มุ่งเน้นสำหรับมืออาชีพด้านฟรอนต์เอนด์ที่ให้ความสำคัญกับการตรวจสอบทางสายตาอย่างรวดเร็วและเอกสารที่สอดคล้องกัน มันเร่งกระบวนการตรวจสอบเลย์เอาต์ในหลายขนาดของ viewport แต่ไม่สามารถแทนที่การดีบักหรือการวิเคราะห์เชิงลึกได้ ให้ถือว่าเป็นขั้นตอนการตรวจสอบทางสายตาภายในกิจวัตรการทดสอบที่กว้างขึ้นซึ่งจับคู่การแสดงตัวอย่างอย่างรวดเร็วกับเครื่องมือสำหรับนักพัฒนาที่ครบถ้วนเมื่อจำเป็นต้องมีการวิเคราะห์ที่ลึกซึ้งมากขึ้น.
