คุณลักษณะที่ไม่ค่อยเป็นที่รู้จักของ Google Chrome บนระบบปฏิบัติการเดสก์ท็อปคือความสามารถในการจับภาพหน้าจอของหน้าที่เปิดราวกับว่าภาพหน้าจอที่ถ่ายเป็นของเบราว์เซอร์ที่ทำงานบนอุปกรณ์เคลื่อนที่ มันยังสามารถเพิ่มกรอบรอบ ๆ ภาพหน้าจอเพื่อให้ดูเหมือนภาพถ่ายจริงของสมาร์ทโฟน นี่คือวิธีที่สามารถทำได้
มีเครื่องมือพิเศษใน Chrome Developer Tools ซึ่งช่วยให้คุณเลียนแบบอุปกรณ์เคลื่อนที่ได้ เป็นประโยชน์อย่างมากสำหรับนักพัฒนาในการตรวจสอบว่าเว็บไซต์ของตนมีลักษณะอย่างไรบนสมาร์ทโฟนและอุปกรณ์หน้าจอขนาดเล็ก อนุญาตให้ระบุขนาดหน้าจอที่กำหนดเองหรือใช้ขนาดอุปกรณ์ที่กำหนดไว้ล่วงหน้าเช่น iPhone, iPad, Nexus หรือ Galaxy ของ Samsung เมื่อหน้าที่เปิดแสดงขึ้นในโปรแกรมจำลองอุปกรณ์ผู้ใช้สามารถจับภาพหน้าจอของหน้านั้นได้ นอกจากนี้ยังเป็นไปได้ที่จะเปิดใช้งานกรอบอุปกรณ์รอบ ๆ หน้าเพื่อให้ดูเหมือนภาพถ่ายจริง
คุณสามารถทำได้ดังนี้
- เปิดหน้าที่ต้องการใน Chrome แล้วกด F12 สิ่งนี้จะเปิดเครื่องมือสำหรับนักพัฒนา:
- คลิกปุ่มโปรแกรมจำลองอุปกรณ์เคลื่อนที่เพื่อเปลี่ยนโหมดเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์:
- ภายใต้ตัวเลือกอุปกรณ์ให้เลือกอุปกรณ์บางอย่าง ตัวอย่างเช่นฉันจะเลือก iPhone 6:
- ตอนนี้คลิกเมนู 3 จุดทางด้านขวาของตัวเลือกอุปกรณ์และเลือกตัวเลือก 'แสดงเฟรมอุปกรณ์':
- Voila ตอนนี้หน้าเว็บของคุณแสดงอยู่ในกรอบอุปกรณ์ที่ดี:
ตอนนี้คลิกเมนูสามจุดอีกครั้งแล้วเลือก 'จับภาพหน้าจอ':
ผลลัพธ์จะเป็นดังนี้:
คุณทำเสร็จแล้ว
