เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome สำหรับเอเจนต์ช่วยให้เอเจนต์ยืนยันเลย์เอาต์ที่ตอบสนอง ทดสอบ API ที่รับรู้ตำแหน่ง และจำลองความเร็ว CPU หรือเครือข่ายที่แตกต่างกันได้ ใช้เครื่องมือเหล่านี้ เพื่อระบุกรณีที่พบได้ยากและทำการตรวจสอบประสิทธิภาพโดยอัตโนมัติได้อย่างมีประสิทธิภาพมากขึ้น
ฟีเจอร์การจำลองเหล่านี้ทำงานร่วมกับเครื่องมืออื่นๆ ที่ช่วยให้เอเจนต์โต้ตอบกับเว็บไซต์ได้ เช่น การคลิกองค์ประกอบ การกรอกแบบฟอร์ม และการไปยังส่วนต่างๆ ของหน้าเว็บ
สิ่งที่คุณจำลองได้มีดังนี้
- วิวพอร์ต และUser Agent จำลองขนาดหน้าจอและตัวระบุอุปกรณ์ที่เฉพาะเจาะจง
- ตำแหน่งทางภูมิศาสตร์: ปลอมแปลงพิกัดตำแหน่งเพื่อทดสอบ API ที่รับรู้ตำแหน่ง
- เครือข่ายและ CPU: ควบคุมสภาพเครือข่ายและความเร็วของ CPU เพื่อจำลองข้อจำกัดด้านประสิทธิภาพในโลกแห่งความเป็นจริง
- รูปแบบสี: สลับระหว่างโหมดสว่างและโหมดมืด
โปรดคำนึงถึงสิ่งต่อไปนี้เมื่อใช้การจำลอง
- การรองรับอุปกรณ์: ตัวแทนสามารถจำลองอุปกรณ์ใดก็ได้ในรายการของ
KnownDevicesPuppeteer ซึ่งรวมถึงการจำลองเหตุการณ์การแตะสำหรับวิวพอร์ตของอุปกรณ์เคลื่อนที่ - ลักษณะการทำงานของเครื่องมือเบราว์เซอร์: แม้ว่าเครื่องมือจะจำลองลักษณะของอุปกรณ์ แต่ก็ไม่ได้จำลองเครื่องมือเบราว์เซอร์ที่ไม่ใช่ Chromium หรือระบบปฏิบัติการ อื่นๆ Agent จะทำงานใน 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.
ตัวอย่างการดำเนินการของ Agent: Agent จะเปิดหน้าต่าง Chrome ไปยังหน้าเว็บ เริ่มการจำลอง และเปรียบเทียบรายการในทั้ง 2 Viewport ซึ่งยืนยัน ว่ามุมมองบนอุปกรณ์เคลื่อนที่ (เมนูแฮมเบอร์เกอร์) และมุมมองบนเดสก์ท็อป (ส่วนหัว) มี ลิงก์ที่คาดไว้
ตรวจสอบการโต้ตอบข้าม Viewport
เลย์เอาต์จะหยุดทำงานระหว่างการโต้ตอบ ไม่ใช่แค่ใน 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.
ตัวอย่างการดำเนินการของเอเจนต์: เอเจนต์จะไปยังเว็บไซต์ ค้นหา เบอร์ลิน จากนั้นแทรกพิกัดละติจูดและลองจิจูดที่เฉพาะเจาะจงแบบไดนามิก เพื่อจำลองปารีส ก่อนที่จะโต้ตอบกับฟีเจอร์ใช้ตำแหน่งของฉันเพื่อ ให้แน่ใจว่าระบบจะแสดงร้านค้าที่ถูกต้อง