ใช้แผงเซ็นเซอร์เพื่อจําลองอินพุตเซ็นเซอร์ของอุปกรณ์ใดก็ได้
ภาพรวม
แผงเซ็นเซอร์ช่วยให้คุณทำสิ่งต่อไปนี้ได้
เปิดแผงเซ็นเซอร์
กดแป้นต่อไปนี้เพื่อเปิดเมนูคำสั่ง ทั้งนี้ขึ้นอยู่กับระบบปฏิบัติการของคุณ
- ใน macOS ให้กด Command+Shift+P
- ใน Windows, Linux หรือ ChromeOS ให้กด Control+Shift+P
พิมพ์
sensorsเลือกแสดงเซ็นเซอร์ แล้วกด Enter แผงเซ็นเซอร์จะเปิดขึ้นที่ด้านล่างของหน้าต่าง DevTools
ลบล้างตำแหน่งทางภูมิศาสตร์
เว็บไซต์จํานวนมากใช้ประโยชน์จากตําแหน่งของผู้ใช้เพื่อให้ประสบการณ์การใช้งานมีความเกี่ยวข้องมากขึ้น เช่น เว็บไซต์พยากรณ์อากาศอาจแสดงการพยากรณ์อากาศในพื้นที่ของผู้ใช้ เมื่อผู้ใช้ให้สิทธิ์เว็บไซต์เข้าถึงตำแหน่งของตน
หากคุณกำลังสร้าง UI ที่เปลี่ยนแปลงไปตามสถานที่ตั้งของผู้ใช้ คุณอาจต้องตรวจสอบว่าเว็บไซต์ทำงานได้อย่างถูกต้องในที่ต่างๆ ทั่วโลก
หากต้องการลบล้างตำแหน่งทางภูมิศาสตร์ ให้เปิดแผงเซ็นเซอร์ แล้วเลือกตัวเลือกใดตัวเลือกหนึ่งต่อไปนี้จากรายการตำแหน่งทางภูมิศาสตร์
- เมืองที่กำหนดล่วงหน้าเมืองใดเมืองหนึ่ง เช่น โตเกียว
- สถานที่ที่กำหนดเองเพื่อป้อนพิกัดลองจิจูดและละติจูดที่กำหนดเอง
- เลือกตำแหน่งไม่พร้อมใช้งานเพื่อดูลักษณะการทำงานของเว็บไซต์เมื่อตำแหน่งของผู้ใช้ไม่พร้อมใช้งาน
จำลองการวางแนวของอุปกรณ์
หากต้องการจำลองการวางแนวอุปกรณ์ต่างๆ ให้เปิดแผงเซ็นเซอร์ แล้วเลือกตัวเลือกใดตัวเลือกหนึ่งต่อไปนี้จากรายการการวางแนว
- การวางแนวที่กำหนดไว้ล่วงหน้าอย่างใดอย่างหนึ่ง เช่น แนวตั้งกลับหัว
- การวางแนวที่กำหนดเองเพื่อระบุการวางแนวที่แน่นอนของคุณเอง
หลังจากเลือกการวางแนวที่กำหนดเอง ระบบจะเปิดใช้ช่อง alpha, beta และ gamma ดูอัลฟ่า เบต้า และแกมมาเพื่อทำความเข้าใจวิธีการทำงานของแกนเหล่านี้
นอกจากนี้ คุณยังตั้งค่าการวางแนวที่กำหนดเองได้โดยลากรูปแบบการวางแนว กด Shift ค้างไว้ก่อนลากเพื่อหมุนตามแกน alpha
การแตะแบบสัมผัสที่แรง
หากต้องการทดสอบเหตุการณ์การสัมผัสในเว็บไซต์ คุณสามารถบังคับให้แตะแทนการคลิกได้ แม้ว่าจะทดสอบในอุปกรณ์ที่ไม่มีหน้าจอสัมผัสก็ตาม
วิธีเรียกเหตุการณ์การสัมผัสด้วยเคอร์เซอร์
- เปิดแผงเซ็นเซอร์
- เลือกแตะในรายการแบบเลื่อนลง แล้วเลือกแตะสองครั้ง
- คลิกโหลดเครื่องมือสำหรับนักพัฒนาเว็บซ้ำในพรอมต์ที่ด้านบน
จำลองสถานะของ Idle Detector
Idle Detection API ช่วยให้คุณตรวจหาผู้ใช้ที่ไม่ได้ใช้งานและตอบสนองต่อการเปลี่ยนแปลงสถานะ "ไม่มีการใช้งาน" ได้ เมื่อใช้ DevTools คุณสามารถจําลองการเปลี่ยนแปลงสถานะไม่มีการใช้งานสําหรับทั้งสถานะผู้ใช้และสถานะหน้าจอแทนที่จะรอให้สถานะไม่มีการใช้งานจริงมีการเปลี่ยนแปลง
วิธีจำลองสถานะ "ไม่มีการใช้งาน"
เปิดแผงเซ็นเซอร์ สำหรับบทแนะนำนี้ คุณสามารถลองใช้หน้าสาธิตนี้ได้
เปิดใช้ช่องทำเครื่องหมายข้างชั่วคราว และในพรอมต์ ให้มอบสิทธิ์การตรวจหาการใช้งานอยู่หรือไม่ให้กับหน้าเดโม จากนั้นให้โหลดหน้าซ้ำ
ในส่วนเมนูแบบเลื่อนลงจำลองสถานะของ Idle Detector ให้เลือกตัวเลือกใดตัวเลือกหนึ่งต่อไปนี้
- ไม่มีการจําลองที่ไม่มีการใช้งาน
- ผู้ใช้มีการใช้งาน ปลดล็อกหน้าจอแล้ว
- ผู้ใช้มีการใช้งาน ล็อกหน้าจอแล้ว
- ผู้ใช้ไม่มีการใช้งาน ปลดล็อกหน้าจอแล้ว
- ผู้ใช้ไม่มีการใช้งาน ล็อกหน้าจอแล้ว
ในตัวอย่างนี้ DevTools จะจำลองสถานะผู้ใช้ไม่ได้ใช้งาน หน้าจอล็อกอยู่ และในกรณีนี้ หน้าเดโมจะเริ่มนับถอยหลัง 10 วินาทีเพื่อล้างแคนวาส
เลียนแบบการเกิดขึ้นพร้อมกันของฮาร์ดแวร์
หากต้องการจําลองประสิทธิภาพของเว็บไซต์ในอุปกรณ์ที่มีจำนวนแกนประมวลผลต่างกัน คุณสามารถลบล้างค่าที่พร็อพเพอร์ตี้ navigator.hardwareConcurrency รายงานได้ แอปพลิเคชันบางรายการใช้พร็อพเพอร์ตี้นี้เพื่อควบคุมระดับการทำงานแบบขนานของแอปพลิเคชัน เช่น เพื่อควบคุมขนาดพูล Emscripten pthread
วิธีจําลองการเกิดขึ้นพร้อมกันของฮาร์ดแวร์
- เปิดแผงเซ็นเซอร์
- ค้นหาและเปิด การเรียกใช้ฮาร์ดแวร์พร้อมกันที่ด้านล่างของแผง
- ป้อนจำนวนแกนประมวลผลที่ต้องการจำลองในช่องป้อนตัวเลข
หากต้องการเปลี่ยนกลับไปใช้ค่าเริ่มต้น ให้คลิกปุ่ม รีเซ็ต