เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome สำหรับเอเจนต์ช่วยให้เอเจนต์ยืนยันเลย์เอาต์ที่ปรับเปลี่ยนตามอุปกรณ์ ทดสอบ API ที่รับรู้ตำแหน่ง และจำลองความเร็ว CPU หรือเครือข่ายที่หลากหลายได้ ใช้เครื่องมือเหล่านี้เพื่อระบุกรณีขอบและทำให้การตรวจสอบประสิทธิภาพเป็นไปโดยอัตโนมัติได้อย่างมีประสิทธิภาพมากขึ้น
ฟีเจอร์การจำลองเหล่านี้ทำงานร่วมกับเครื่องมืออื่นๆ ที่ช่วยให้เอเจนต์โต้ตอบกับเว็บไซต์ได้ เช่น การคลิกองค์ประกอบ การกรอกแบบฟอร์ม และการไปยังหน้าต่างๆ
สิ่งที่คุณจำลองได้มีดังนี้
- วิวพอร์ต และ User Agent: จำลองขนาดหน้าจอและตัวระบุอุปกรณ์ที่เฉพาะเจาะจง
- ตำแหน่งทางภูมิศาสตร์: ปลอมแปลงพิกัดตำแหน่งเพื่อทดสอบ API ที่รับรู้ตำแหน่ง
- เครือข่ายและ CPU: ควบคุมสภาพเครือข่ายและความเร็ว CPU เพื่อจำลองข้อจำกัดด้านประสิทธิภาพในโลกแห่งความเป็นจริง
- รูปแบบสี: สลับระหว่างโหมดสว่างและโหมดมืด
เมื่อใช้การจำลอง โปรดคำนึงถึงสิ่งต่อไปนี้
- การรองรับอุปกรณ์: เอเจนต์สามารถจำลองอุปกรณ์ใดก็ได้ในรายการของ
KnownDevicesPuppeteer ซึ่งรวมถึงการจำลองเหตุการณ์การสัมผัสสำหรับวิวพอร์ตของอุปกรณ์เคลื่อนที่ - ลักษณะการทำงานของกลไกเบราว์เซอร์: แม้ว่าเครื่องมือจะจำลองลักษณะของอุปกรณ์ แต่ก็ไม่ได้จำลองกลไกเบราว์เซอร์ที่ไม่ใช่ Chromium หรือระบบปฏิบัติการ อื่นๆ เอเจนต์จะทำงานใน Chrome ในระบบปฏิบัติการปัจจุบันเสมอ
กรณีการใช้งานสำหรับการจำลองผู้ใช้
สั่งให้เอเจนต์จำลองสภาพแวดล้อมและยืนยัน UI ให้คุณแทนที่จะปรับขนาดเบราว์เซอร์ ปลอมแปลง IP หรือควบคุมเครือข่ายด้วยตนเองหลังจากการเปลี่ยนแปลงโค้ดทุกครั้ง
ผสานรวมการจำลองเข้ากับกระบวนการพัฒนาด้วยเวิร์กโฟลว์ต่อไปนี้
ทำซ้ำการออกแบบที่ปรับเปลี่ยนตามอุปกรณ์
รูปแบบการนำทางมักจะเปลี่ยนแปลงไปอย่างมากระหว่างปัจจัยรูปแบบของอุปกรณ์เคลื่อนที่และเดสก์ท็อป เมื่อสร้างแอปพลิเคชัน คุณสามารถสั่งให้เอเจนต์ยืนยันว่าคอมโพเนนต์ที่เพิ่งเขียนแสดงผลอย่างถูกต้องและแสดงเนื้อหาเดียวกันในอุปกรณ์ต่างๆ
ตัวอย่างพรอมต์:
Go to developer.chrome.com. Click the burger menu on mobile, check the top level
items and ensure the same items are available for a desktop device.
ตัวอย่างการทำงานของเอเจนต์: เอเจนต์จะเปิดหน้าต่าง Chrome ไปยังหน้าเว็บ เริ่มการจำลอง และเปรียบเทียบรายการในวิวพอร์ตทั้ง 2 รายการ โดยจะยืนยันว่ามุมมองบนมือถือ (เมนูแฮมเบอร์เกอร์) และมุมมองบนเดสก์ท็อป (ส่วนหัว) มีลิงก์ที่คาดไว้
ตรวจสอบการโต้ตอบระหว่างวิวพอร์ต
เลย์เอาต์จะเสียหายระหว่างการโต้ตอบ ไม่ใช่แค่ใน CSS ภาพหน้าจอแบบคงที่มักจะพลาดข้อบกพร่องที่เกิดขึ้นเมื่อผู้ใช้สัมผัส UI จริงๆ คุณสามารถมอบหมายให้เอเจนต์ทดสอบโฟลว์การโต้ตอบที่เฉพาะเจาะจงในวิวพอร์ตหลายรายการเพื่อตรวจหาข้อบกพร่องในการทำงานที่ซ่อนอยู่
ตัวอย่างพรอมต์:
Go to https://developer.chrome.com/ on mobile, tablet and desktop device, type
in a search query but don't submit it and wait for the type-ahead suggestions.
Ensure the Sign in button is visible all the time. Let me know if that's not the
case.
ตัวอย่างการทำงานของเอเจนต์: เอเจนต์จะพิมพ์คำค้นหาและปรับขนาดหน้าจอเป็น 3 ขนาด ในตัวอย่างนี้ เอเจนต์จะตรวจพบว่าในแท็บเล็ตและอุปกรณ์เคลื่อนที่ แถบค้นหาจะขยายเต็มความกว้างของส่วนหัว ซึ่งบดบังลิงก์ลงชื่อเข้าใช้
สร้างต้นแบบฟีเจอร์ที่รับรู้ตำแหน่ง
การทดสอบ API ที่อิงตามตำแหน่งจริงของผู้ใช้ (เช่น การค้นหา "ใกล้ฉัน" หรือเครื่องมือค้นหาสาขา) มักจะต้องให้คุณลบล้างเซ็นเซอร์ด้วยตนเอง ตอนนี้คุณสามารถสั่งให้เอเจนต์ปลอมแปลงตำแหน่งทางภูมิศาสตร์ที่เฉพาะเจาะจงเพื่อยืนยันตรรกะส่วนหน้าและส่วนหลังได้อย่างราบรื่น
ตัวอย่างพรอมต์:
Go to chrome.dev/devtools-store-locator. Search for Berlin, and confirm there's
a store showing. Confirm there's no store for Washington. Finally, simulate
Paris as location and verify there are stores listed.
ตัวอย่างการทำงานของเอเจนต์: เอเจนต์จะไปยังเว็บไซต์ ค้นหาเบอร์ลิน แล้วแทรกพิกัดละติจูดและลองจิจูดที่เฉพาะเจาะจงแบบไดนามิกเพื่อจำลองปารีส ก่อนที่จะโต้ตอบกับฟีเจอร์ใช้ตำแหน่งของฉัน เพื่อให้แน่ใจว่าร้านค้าที่ถูกต้องจะปรากฏขึ้น