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