หน้าที่ของคุณไม่ได้จบลงที่การทำให้เว็บไซต์ทำงานได้อย่างยอดเยี่ยมใน Chrome และ Android แม้ว่าโหมดอุปกรณ์จะจําลองอุปกรณ์อื่นๆ ได้หลากหลาย เช่น iPhone แต่เราขอแนะนําให้ลองใช้โซลูชันการจําลองเบราว์เซอร์อื่นๆ
สรุป
- เมื่อคุณไม่มีอุปกรณ์ที่ต้องการ หรือต้องการตรวจสอบบางอย่าง ตัวเลือกที่ดีที่สุดคือการจําลองอุปกรณ์ในเบราว์เซอร์
- โปรแกรมจําลองอุปกรณ์และเครื่องจำลองช่วยให้คุณจำลองเว็บไซต์สำหรับนักพัฒนาซอฟต์แวร์ในอุปกรณ์ต่างๆ จากเวิร์กสเตชันได้
- โปรแกรมจําลองระบบที่ใช้ระบบคลาวด์ช่วยให้คุณทําการทดสอบหน่วยสําหรับเว็บไซต์ในแพลตฟอร์มต่างๆ ได้โดยอัตโนมัติ
โปรแกรมจำลองเบราว์เซอร์
โปรแกรมจำลองเบราว์เซอร์เหมาะสําหรับการทดสอบการตอบสนองของเว็บไซต์ แต่จะไม่ได้จำลองความแตกต่างใน API, การรองรับ CSS และลักษณะการทํางานบางอย่างที่คุณจะเห็นในเบราว์เซอร์บนอุปกรณ์เคลื่อนที่ ทดสอบเว็บไซต์ในเบราว์เซอร์ที่ทํางานบนอุปกรณ์จริงเพื่อให้แน่ใจว่าทุกอย่างทํางานตามที่คาดไว้
มุมมองการออกแบบที่ปรับเปลี่ยนตามอุปกรณ์ของ Firefox
Firefox มีมุมมองการออกแบบที่ปรับเปลี่ยนตามอุปกรณ์ซึ่งช่วยให้คุณเลิกคิดถึงอุปกรณ์ที่เจาะจง แล้วลองดูว่าการออกแบบจะเปลี่ยนไปอย่างไรเมื่อใช้หน้าจอขนาดทั่วไปหรือขนาดของคุณเองโดยการลากขอบ
การจําลอง F12 ของ Edge
หากต้องการจําลอง Windows Phone ให้ใช้การจําลองในตัวของ Microsoft Edge
เนื่องจาก Edge ไม่ได้มาพร้อมกับความเข้ากันได้แบบเดิม ให้ใช้การจําลองของ IE 11 เพื่อจําลองลักษณะที่หน้าเว็บจะปรากฏใน Internet Explorer เวอร์ชันเก่า
โปรแกรมจำลองและเครื่องจำลองอุปกรณ์
เครื่องจำลองและโปรแกรมจําลองอุปกรณ์จะจำลองทั้งอุปกรณ์และสภาพแวดล้อมของเบราว์เซอร์ ซึ่งมีประโยชน์ในการทดสอบสิ่งต่างๆ ที่ต้องผสานรวมกับระบบปฏิบัติการ เช่น การป้อนข้อมูลแบบฟอร์มด้วยแป้นพิมพ์เสมือนจริง
โปรแกรมจำลองของ Android
เครื่องมือค้นหาหุ้นในโปรแกรมจำลอง Android
ขณะนี้ยังไม่มีวิธีติดตั้ง Chrome ในโปรแกรมจำลอง Android แต่คุณใช้เบราว์เซอร์ Android, Chromium Content Shell และ Firefox สำหรับ Android ได้ ซึ่งเราจะกล่าวถึงในคู่มือนี้ในภายหลัง Chromium Content Shell ใช้เครื่องมือแสดงผล Chrome เดียวกัน แต่ไม่มีฟีเจอร์เฉพาะเบราว์เซอร์
โปรแกรมจําลอง Android มาพร้อมกับ Android SDK ซึ่งคุณต้องดาวน์โหลดจากที่นี่ จากนั้นทำตามวิธีการเพื่อตั้งค่าอุปกรณ์เสมือนและเริ่มโปรแกรมจำลอง
เมื่อบูตโปรแกรมจำลองแล้ว ให้คลิกไอคอนเบราว์เซอร์ แล้วคุณจะทดสอบเว็บไซต์ใน Stock Browser เวอร์ชันเก่าสำหรับ Android ได้
Chromium Content Shell ใน Android
เชลล์เนื้อหาของโปรแกรมจำลอง Android
หากต้องการติดตั้ง Chromium Content Shell สําหรับ Android ให้เปิดโปรแกรมจําลองไว้และเรียกใช้คําสั่งต่อไปนี้ใน Command Prompt
git clone https://github.com/PaulKinlan/chromium-android-installer.git
chmod u+x ./chromium-android-installer/\*.sh
./chromium-android-installer/install-chromeandroid.sh
ตอนนี้คุณทดสอบเว็บไซต์ด้วย Chromium Content Shell ได้แล้ว
Firefox ใน Android
ไอคอน Firefox ในโปรแกรมจำลอง Android
คุณรับ APK เพื่อติดตั้ง Firefox ลงในโปรแกรมจำลองได้เช่นเดียวกับ Content Shell ของ Chromium
ดาวน์โหลดไฟล์ .apk ที่ถูกต้องจาก https://ftp.mozilla.org/pub/mozilla.org/mobile/releases/latest/
จากตรงนี้ คุณสามารถติดตั้งไฟล์ลงในโปรแกรมจำลองที่เปิดอยู่หรืออุปกรณ์ Android ที่เชื่อมต่ออยู่ได้ด้วยคำสั่งต่อไปนี้
adb install <path to APK>/fennec-XX.X.XX.android-arm.apk
เครื่องจำลอง iOS
เครื่องจำลอง iOS สำหรับ Mac OS X มาพร้อมกับ Xcode ซึ่งคุณสามารถติดตั้งจาก App Store ได้
เมื่อดำเนินการเสร็จแล้ว ให้ดูวิธีใช้โปรแกรมจำลองผ่านเอกสารประกอบของ Apple
Modern.IE
VM ของ IE เวอร์ชันทันสมัย
เครื่องเสมือน Modern.IE ช่วยให้คุณเข้าถึง IE เวอร์ชันต่างๆ ในคอมพิวเตอร์ผ่าน VirtualBox (หรือ VMWare) ได้ เลือกเครื่องเสมือนในหน้าดาวน์โหลดที่นี่
โปรแกรมจำลองและเครื่องจำลองในระบบคลาวด์
หากใช้โปรแกรมจำลองไม่ได้และไม่มีสิทธิ์เข้าถึงอุปกรณ์จริง โปรแกรมจำลองบนระบบคลาวด์ก็เป็นทางเลือกที่ดีรองลงมา ข้อได้เปรียบที่สำคัญของโปรแกรมจำลองบนระบบคลาวด์เหนืออุปกรณ์จริงและโปรแกรมจำลองในเครื่องคือคุณสามารถทำให้การทดสอบหน่วยสำหรับเว็บไซต์ของคุณเป็นแบบอัตโนมัติในแพลตฟอร์มต่างๆ
- BrowserStack (เวอร์ชันเชิงพาณิชย์) ใช้งานง่ายที่สุดสำหรับการทดสอบด้วยตนเอง คุณเลือกระบบปฏิบัติการ เลือกเวอร์ชันเบราว์เซอร์และประเภทอุปกรณ์ เลือก URL เพื่อเรียกดู แล้วระบบจะเปิดเครื่องเสมือนที่โฮสต์ซึ่งคุณสามารถโต้ตอบด้วย นอกจากนี้ คุณยังเปิดโปรแกรมจําลองหลายรายการในหน้าจอเดียวกันได้ ซึ่งจะช่วยให้คุณทดสอบลักษณะที่ปรากฏของแอปในอุปกรณ์หลายเครื่องพร้อมกันได้
- SauceLabs (เชิงพาณิชย์) ช่วยให้คุณเรียกใช้การทดสอบหน่วยภายในโปรแกรมจำลอง ซึ่งมีประโยชน์อย่างยิ่งสำหรับสคริปต์ขั้นตอนในเว็บไซต์และดูวิดีโอที่บันทึกไว้ของขั้นตอนนี้ในภายหลังบนอุปกรณ์ต่างๆ นอกจากนี้ คุณยังทดสอบด้วยตนเองกับเว็บไซต์ได้ด้วย
- Device Anywhere (เวอร์ชันเชิงพาณิชย์) ไม่ได้ใช้โปรแกรมจำลอง แต่เป็นอุปกรณ์จริงที่คุณควบคุมจากระยะไกลได้ ซึ่งจะมีประโยชน์มากในกรณีที่คุณต้องจำลองปัญหาในอุปกรณ์ที่เฉพาะเจาะจงและไม่เห็นข้อบกพร่องในตัวเลือกใดๆ ในคู่มือก่อนหน้านี้
- LambdaTest (เวอร์ชันเชิงพาณิชย์) จะช่วยให้คุณทำการทดสอบข้ามเบราว์เซอร์ด้วยตนเองในเบราว์เซอร์และระบบปฏิบัติการกว่า 2,000 ระบบ ผู้ใช้จะบันทึกวิดีโอของข้อบกพร่องที่ซับซ้อนและแชร์ผ่านการทำงานร่วมกันได้ เช่น MS Teams, Slack และอื่นๆ ผู้ใช้สามารถเร่งความเร็วการทดสอบได้โดยการดำเนินการทดสอบพร้อมกัน