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

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

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

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

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

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

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