จำลองอุปกรณ์เคลื่อนที่ด้วยโหมดอุปกรณ์

ใช้โหมดอุปกรณ์เพื่อประมาณลักษณะและประสิทธิภาพของหน้าเว็บในอุปกรณ์เคลื่อนที่

ภาพรวม

โหมดอุปกรณ์คือชื่อของชุดฟีเจอร์ในเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome ที่ช่วยจำลองอุปกรณ์เคลื่อนที่ ฟีเจอร์เหล่านี้ ได้แก่

• การจำลองวิวพอร์ตของอุปกรณ์เคลื่อนที่
• การควบคุม CPU
• การควบคุมปริมาณการใช้เครือข่าย
• นอกจากนี้ ในแผงเซ็นเซอร์ ให้ทำดังนี้
  • การจำลองตำแหน่งทางภูมิศาสตร์
  • การตั้งค่าการวางแนว

ข้อจำกัด

โปรดคิดว่าโหมดอุปกรณ์เป็นการประมาณอันดับแรกของลักษณะหน้าเว็บ และประสบการณ์การใช้งานบนอุปกรณ์เคลื่อนที่ โหมดอุปกรณ์ไม่ได้รันโค้ดจริง บนอุปกรณ์เคลื่อนที่ แต่เป็นการจำลองประสบการณ์ของผู้ใช้บนอุปกรณ์เคลื่อนที่จากแล็ปท็อป หรือเดสก์ท็อป

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

เปิดแถบเครื่องมืออุปกรณ์

หากต้องการเปิดแถบเครื่องมือของอุปกรณ์ ให้ทำตามขั้นตอนต่อไปนี้

1. เปิดเครื่องมือสำหรับนักพัฒนาเว็บ
2. คลิกอุปกรณ์ สลับแถบเครื่องมือของอุปกรณ์ที่อยู่ในแถบการดำเนินการที่ด้านบน

จำลองวิวพอร์ตของอุปกรณ์เคลื่อนที่

โดยค่าเริ่มต้น แถบเครื่องมืออุปกรณ์จะเปิดขึ้นในวิวพอร์ตโดยมีขนาดที่ตั้งค่าเป็น ปรับเปลี่ยนตามอุปกรณ์ คุณสามารถจำลองขนาดของอุปกรณ์เคลื่อนที่ที่เฉพาะเจาะจงได้โดยใช้เมนูแบบเลื่อนลงมิติข้อมูล

โหมดวิวพอร์ตที่ปรับเปลี่ยนตามอุปกรณ์

ลากแฮนเดิลเพื่อปรับขนาดวิวพอร์ตเป็นขนาดใดก็ได้ที่คุณต้องการ หรือป้อนค่าที่เฉพาะเจาะจง ในช่องความกว้างและความสูง ในตัวอย่างนี้ ความกว้างตั้งค่าเป็น 480 และความสูงตั้งค่าเป็น 415

หรือจะใช้แถบค่าที่ตั้งไว้ล่วงหน้าสำหรับความกว้างเพื่อตั้งค่าความกว้างด้วยการคลิกตัวเลือกใดตัวเลือกหนึ่งต่อไปนี้ก็ได้

มือถือขนาดเล็ก	Mobile M	มือถือขนาดใหญ่	แท็บเล็ต	แล็ปท็อป	แล็ปท็อปขนาดใหญ่	4K
320px	375 พิกเซล	425px	768 พิกเซล	1024px	1440px	2560 พิกเซล

แสดงการค้นหาสื่อ

หากต้องการแสดงจุดพักของ Media Query เหนือ Viewport ให้คลิก ตัวเลือกเพิ่มเติม > แสดง Media Query

ตอนนี้ DevTools จะแสดงแถบเพิ่มเติม 2 แถบเหนือวิวพอร์ต ดังนี้

• แถบสีน้ำเงินที่มีจุดพัก max-width
• แถบสีส้มที่มีจุดพัก min-width จุด

คลิกระหว่างเบรกพอยท์เพื่อเปลี่ยนความกว้างของวิวพอร์ตเพื่อให้ระบบทริกเกอร์เบรกพอยท์

หากต้องการค้นหา@mediaการประกาศที่เกี่ยวข้อง ให้คลิกขวาระหว่างจุดพัก แล้วเลือกแสดงในซอร์สโค้ด จากนั้น DevTools จะเปิดแผงแหล่งที่มาที่บรรทัดที่เกี่ยวข้องในเอดิเตอร์

ตั้งค่าอัตราส่วนพิกเซลของอุปกรณ์

อัตราส่วนพิกเซลของอุปกรณ์ (DPR) คืออัตราส่วนระหว่างพิกเซลจริงบนหน้าจอฮาร์ดแวร์กับพิกเซลเชิงตรรกะ (CSS) กล่าวคือ DPR จะบอก Chrome ว่าควรใช้พิกเซลหน้าจอจำนวนเท่าใดในการวาดพิกเซล CSS Chrome จะใช้ค่า DPR เมื่อวาดบนจอแสดงผล HiDPI (High Dots Per Inch)

วิธีกำหนดค่า DPR

1. คลิกตัวเลือกเพิ่มเติม > เพิ่มอัตราส่วนพิกเซลของอุปกรณ์

   

2. ในแถบการดำเนินการที่ด้านบนของ Viewport ให้เลือกค่า DPR จากเมนูแบบเลื่อนลง DPR ใหม่

   

ตั้งค่าประเภทอุปกรณ์

ใช้รายการประเภทอุปกรณ์เพื่อจำลองอุปกรณ์เคลื่อนที่หรืออุปกรณ์เดสก์ท็อป

หากไม่เห็นรายการในแถบการดำเนินการที่ด้านบน ให้เลือกตัวเลือกเพิ่มเติม > เพิ่มประเภทอุปกรณ์

ตารางถัดไปจะอธิบายความแตกต่างระหว่างตัวเลือกต่างๆ วิธีการแสดงผลหมายถึงการที่ Chrome แสดงผลหน้าเว็บเป็นวิวพอร์ตของอุปกรณ์เคลื่อนที่หรือ เดสก์ท็อป ไอคอนเคอร์เซอร์หมายถึงประเภทเคอร์เซอร์ที่คุณเห็นเมื่อ วางเมาส์เหนือหน้าเว็บ เหตุการณ์ที่เริ่มทำงานหมายถึงหน้าเว็บเริ่มทำงาน touch หรือ click เมื่อคุณโต้ตอบกับหน้าเว็บ

ตัวเลือก	วิธีการแสดงผล	ไอคอนเคอร์เซอร์	เหตุการณ์ที่ทริกเกอร์
มือถือ	มือถือ	วงกลม	การสัมผัส
อุปกรณ์เคลื่อนที่ (ไม่ต้องสัมผัส)	มือถือ	ปกติ	click
เดสก์ท็อป	เดสก์ท็อป	ปกติ	click
เดสก์ท็อป (สัมผัส)	เดสก์ท็อป	วงกลม	การสัมผัส

โหมดเฉพาะอุปกรณ์

หากต้องการจำลองขนาดของอุปกรณ์เคลื่อนที่ที่เฉพาะเจาะจง ให้เลือกอุปกรณ์จากรายการขนาด

ดูข้อมูลเพิ่มเติมได้ที่หัวข้อเพิ่มอุปกรณ์เคลื่อนที่ที่กำหนดเอง

หมุนวิวพอร์ตเป็นแนวนอน

คลิก screen_rotation หมุน เพื่อหมุนวิวพอร์ตเป็นแนวนอน

โปรดทราบว่าปุ่มหมุน จะหายไปหากแถบเครื่องมือของอุปกรณ์แคบ

โปรดดูตั้งค่าการวางแนวด้วย

เปิด/ปิดโหมด Dual Screen

อุปกรณ์บางอย่าง เช่น Surface Duo มี 2 หน้าจอและมี 2 วิธีในการใช้งาน ได้แก่ การใช้งานโดยเปิดใช้งานหน้าจอเดียวหรือทั้ง 2 หน้าจอ

หากต้องการสลับระหว่างหน้าจอคู่กับหน้าจอเดียว ให้คลิก devices_fold เปิด/ปิดโหมดหน้าจอคู่ในแถบเครื่องมือ

ตั้งค่าลักษณะการทำงานของอุปกรณ์

อุปกรณ์บางอย่าง เช่น Asus Zenbook Fold มีหน้าจอที่พับได้ ซึ่งหน้าจอเหล่านี้มีท่าทาง 2 แบบ ได้แก่ ต่อเนื่องหรือพับ ท่าทางต่อเนื่องหมายถึงตำแหน่ง "แบน" และท่าทางพับจะสร้างมุมระหว่างส่วนต่างๆ ของจอแสดงผล

หากต้องการตั้งค่าท่าทางของอุปกรณ์ ให้เลือกต่อเนื่องหรือพับจากเมนูแบบเลื่อนลงที่เกี่ยวข้องในแถบเครื่องมือ

แสดงเฟรมของอุปกรณ์

เมื่อจำลองขนาดของอุปกรณ์เคลื่อนที่ที่เฉพาะเจาะจง เช่น Nest Hub ให้เลือกตัวเลือกเพิ่มเติม > แสดงกรอบอุปกรณ์เพื่อแสดงกรอบอุปกรณ์จริงรอบๆ Viewport

ในตัวอย่างนี้ เครื่องมือสำหรับนักพัฒนาเว็บจะแสดงเฟรมสำหรับ Nest Hub

เพิ่มอุปกรณ์เคลื่อนที่ที่กำหนดเอง

วิธีเพิ่มอุปกรณ์ที่กำหนดเอง

1. คลิกรายการอุปกรณ์ แล้วเลือกแก้ไข

   

2. ในแท็บการตั้งค่า การตั้งค่า > อุปกรณ์ ให้เลือกอุปกรณ์จากรายการอุปกรณ์ที่รองรับ หรือคลิกเพิ่มอุปกรณ์ที่กำหนดเองเพื่อเพิ่มอุปกรณ์ของคุณเอง

3. หากต้องการเพิ่มอุปกรณ์ของคุณเอง ให้ป้อนชื่อ ความกว้าง และความสูงของอุปกรณ์ แล้วคลิกเพิ่ม

   

   ฟิลด์อัตราส่วนพิกเซลของอุปกรณ์, สตริง User Agent และประเภทอุปกรณ์เป็นฟิลด์ที่ไม่บังคับ ฟิลด์ประเภทอุปกรณ์คือรายการที่ตั้งค่าเป็นอุปกรณ์เคลื่อนที่โดยค่าเริ่มต้น

4. กลับไปที่ Viewport แล้วเลือกอุปกรณ์ที่เพิ่มใหม่จากรายการมิติข้อมูล

แสดงไม้บรรทัด

คลิกตัวเลือกเพิ่มเติม > แสดงไม้บรรทัดเพื่อดูไม้บรรทัด หน่วยการวัดของไม้บรรทัดคือพิกเซล

DevTools จะแสดงไม้บรรทัดที่ด้านบนและด้านซ้ายของวิวพอร์ต

คลิกไม้บรรทัดที่เครื่องหมายที่ต้องการเพื่อตั้งค่าความกว้างและความสูงของวิวพอร์ต

ซูมวิวพอร์ต

ใช้รายการซูมเพื่อซูมเข้าหรือออก

จับภาพหน้าจอ

หากต้องการจับภาพหน้าจอของสิ่งที่คุณเห็นใน Viewport ให้คลิก ตัวเลือกเพิ่มเติม > จับภาพหน้าจอ

หากต้องการจับภาพหน้าจอทั้งหน้า รวมถึงเนื้อหาที่มองไม่เห็นใน Viewport ให้เลือกจับภาพหน้าจอขนาดเต็มจากเมนูเดียวกัน

หากต้องการใส่กรอบอุปกรณ์เมื่อจับภาพหน้าจอในโหมดเฉพาะอุปกรณ์ ให้แสดงกรอบอุปกรณ์ก่อน แล้วคลิกจับภาพหน้าจอตามที่แนะนำไว้ก่อนหน้านี้

ดูวิธีอื่นๆ ในการถ่ายภาพหน้าจอด้วยเครื่องมือสำหรับนักพัฒนาเว็บได้ที่4 วิธีในการจับภาพหน้าจอด้วยเครื่องมือสำหรับนักพัฒนาเว็บ

ควบคุมเครือข่ายและ CPU

หากต้องการควบคุมทั้งเครือข่ายและ CPU ให้เลือกอุปกรณ์เคลื่อนที่ระดับกลางหรืออุปกรณ์เคลื่อนที่ระดับล่างจากรายการควบคุม

อุปกรณ์เคลื่อนที่ระดับกลางจะจำลอง 3G ที่รวดเร็วและควบคุม CPU ให้ช้ากว่าปกติ 4 เท่า อุปกรณ์เคลื่อนที่ระดับล่างจะจำลอง 3G ที่ช้าและควบคุม CPU ให้ช้ากว่าปกติ 6 เท่า โปรดทราบว่าการจำกัดนี้เกี่ยวข้องกับความสามารถปกติของแล็ปท็อปหรือเดสก์ท็อป

โปรดทราบว่าระบบจะซ่อนรายการจำกัดหากแถบเครื่องมือของอุปกรณ์แคบ

ควบคุมเฉพาะ CPU

หากต้องการควบคุม CPU เท่านั้นและไม่ควบคุมเครือข่าย ให้ไปที่แผงประสิทธิภาพ คลิกการตั้งค่าการจับภาพ และ จากนั้นเลือกช้าลง 4 เท่า ช้าลง 6 เท่า หรือช้าลง 20 เท่า จากรายการ CPU

ควบคุมเครือข่ายเท่านั้น

หากต้องการควบคุมเครือข่ายเท่านั้นและไม่ควบคุม CPU ให้ไปที่แผงเครือข่าย แล้วเลือก 3G เร็วหรือ 3G ช้าจากรายการควบคุม

หรือกด Command+Shift+P (Mac) หรือ Control+Shift+P (Windows, Linux, ChromeOS) เพื่อ เปิดเมนูคำสั่ง พิมพ์ 3G แล้วเลือกเปิดใช้การควบคุม 3G อย่างรวดเร็วหรือ เปิดใช้การควบคุม 3G อย่างช้า

นอกจากนี้ คุณยังตั้งค่าการควบคุมเครือข่ายได้จากแผงประสิทธิภาพ คลิกการตั้งค่าการจับภาพ จากนั้นเลือก 3G เร็วหรือ 3G ช้าจากรายการเครือข่าย

จำลองเซ็นเซอร์

ใช้แผงเซ็นเซอร์เพื่อลบล้างตำแหน่งทางภูมิศาสตร์ จำลองการวางแนวอุปกรณ์ บังคับการแตะ และจำลองสถานะว่าง

ส่วนถัดไปจะแสดงวิธีลบล้างตำแหน่งทางภูมิศาสตร์และตั้งค่าการวางแนวอุปกรณ์อย่างรวดเร็ว ดูรายการฟีเจอร์ทั้งหมดได้ที่จำลองเซ็นเซอร์ของอุปกรณ์

ลบล้างตำแหน่งทางภูมิศาสตร์

หากต้องการเปิด UI การลบล้างตำแหน่งทางภูมิศาสตร์ ให้คลิกปรับแต่งและควบคุม DevTools แล้วเลือกเครื่องมือเพิ่มเติม > เซ็นเซอร์

หรือกด Command+Shift+P (Mac) หรือ Control+Shift+P (Windows, Linux, ChromeOS) เพื่อเปิดเมนูคำสั่ง พิมพ์ Sensors แล้วเลือกแสดงเซ็นเซอร์

เลือกค่าที่กำหนดล่วงหน้าจากรายการตำแหน่ง หรือเลือกอื่นๆ... เพื่อป้อนพิกัดของคุณเอง หรือเลือกตำแหน่งไม่พร้อมใช้งานเพื่อทดสอบลักษณะการทำงานของหน้าเว็บเมื่อตำแหน่งทางภูมิศาสตร์อยู่ในสถานะข้อผิดพลาด

ตั้งค่าการวางแนว

หากต้องการเปิด UI การวางแนว ให้คลิกปรับแต่งและควบคุม DevTools แล้วเลือกเครื่องมือเพิ่มเติม > เซ็นเซอร์

หรือกด Command+Shift+P (Mac) หรือ Control+Shift+P (Windows, Linux, ChromeOS) เพื่อเปิดเมนูคำสั่ง พิมพ์ Sensors แล้วเลือกแสดงเซ็นเซอร์

เลือกค่าที่กำหนดล่วงหน้าจากรายการการวางแนว หรือเลือกการวางแนวที่กำหนดเองเพื่อตั้งค่าอัลฟ่า เบต้า และแกมมาของคุณเอง