จับภาพหน้าจอของหน้าเว็บพร้อมกรอบอุปกรณ์ใน Chrome

คุณลักษณะที่ไม่ค่อยเป็นที่รู้จักของ Google Chrome บนระบบปฏิบัติการเดสก์ท็อปคือความสามารถในการจับภาพหน้าจอของหน้าที่เปิดราวกับว่าภาพหน้าจอที่ถ่ายเป็นของเบราว์เซอร์ที่ทำงานบนอุปกรณ์เคลื่อนที่ มันยังสามารถเพิ่มกรอบรอบ ๆ ภาพหน้าจอเพื่อให้ดูเหมือนภาพถ่ายจริงของสมาร์ทโฟน นี่คือวิธีที่สามารถทำได้

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

คุณสามารถทำได้ดังนี้

1. เปิดหน้าที่ต้องการใน Chrome แล้วกด F12 สิ่งนี้จะเปิดเครื่องมือสำหรับนักพัฒนา:
2. คลิกปุ่มโปรแกรมจำลองอุปกรณ์เคลื่อนที่เพื่อเปลี่ยนโหมดเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์:
3. ภายใต้ตัวเลือกอุปกรณ์ให้เลือกอุปกรณ์บางอย่าง ตัวอย่างเช่นฉันจะเลือก iPhone 6:
4. ตอนนี้คลิกเมนู 3 จุดทางด้านขวาของตัวเลือกอุปกรณ์และเลือกตัวเลือก 'แสดงเฟรมอุปกรณ์':
5. Voila ตอนนี้หน้าเว็บของคุณแสดงอยู่ในกรอบอุปกรณ์ที่ดี:
   
   ตอนนี้คลิกเมนูสามจุดอีกครั้งแล้วเลือก 'จับภาพหน้าจอ':

ผลลัพธ์จะเป็นดังนี้:

คุณทำเสร็จแล้ว