หน้าที่ของคุณไม่ได้จบลงคือการตรวจสอบว่าเว็บไซต์ทำงานได้อย่างดีทั้งบน Chrome และ Android แม้ว่าโหมดอุปกรณ์จะสามารถจำลองอุปกรณ์อื่นๆ เช่น iPhone ได้ แต่เราก็ขอแนะนำให้คุณลองดูโซลูชันเบราว์เซอร์อื่นๆ เพื่อจำลอง
สรุป
- เมื่อคุณไม่มีอุปกรณ์ใดโดยเฉพาะ หรือต้องการตรวจสอบแบบเฉพาะจุด ตัวเลือกที่ดีที่สุด คือการจำลองอุปกรณ์จากภายในเบราว์เซอร์
- โปรแกรมจำลองและเครื่องจำลองอุปกรณ์ช่วยให้คุณสามารถเลียนแบบเว็บไซต์การพัฒนาบนอุปกรณ์ต่างๆ จากเวิร์กสเตชัน
- โปรแกรมจำลองในระบบคลาวด์ช่วยให้คุณทำการทดสอบ 1 หน่วยสำหรับเว็บไซต์ได้โดยอัตโนมัติในแพลตฟอร์มต่างๆ
โปรแกรมจำลองเบราว์เซอร์
โปรแกรมจำลองเบราว์เซอร์เหมาะสำหรับการทดสอบการตอบสนองของเว็บไซต์ แต่ไม่ได้เลียนแบบความแตกต่างใน API, การรองรับ CSS และพฤติกรรมบางอย่างที่คุณเห็นในเบราว์เซอร์บนอุปกรณ์เคลื่อนที่ ทดสอบเว็บไซต์ในเบราว์เซอร์ที่ทำงานในอุปกรณ์จริงเพื่อให้แน่ใจว่าทุกอย่างทำงานตามที่คาดไว้
มุมมองการออกแบบที่ปรับเปลี่ยนตามอุปกรณ์ของ Firefox
Firefox มีมุมมองการออกแบบที่ปรับเปลี่ยนตามอุปกรณ์ซึ่งสนับสนุนให้คุณหยุดคิดในแง่ของอุปกรณ์ที่เจาะจง และสำรวจการออกแบบที่เปลี่ยนไปตามขนาดหน้าจอทั่วไปหรือขนาดของคุณเองด้วยการลากขอบแทน
การจำลอง F12 ของ Edge
หากต้องการจำลอง Windows Phones ให้ใช้โปรแกรมจำลองในตัวของ Microsoft Edge
เนื่องจาก Edge ไม่มีความเข้ากันได้กับรูปแบบเดิม ให้ใช้โปรแกรมจำลองของ IE 11 เพื่อจำลองลักษณะของหน้าเว็บใน Internet Explorer เวอร์ชันเก่า
โปรแกรมจำลองและเครื่องจำลองอุปกรณ์
เครื่องจำลองและโปรแกรมจำลองอุปกรณ์จะจำลองทั้งสภาพแวดล้อมของเบราว์เซอร์และทั้งอุปกรณ์ วิธีนี้มีประโยชน์ในการทดสอบสิ่งต่างๆ ที่ต้องมีการผสานรวมระบบปฏิบัติการ เช่น การป้อนข้อมูลแบบฟอร์มด้วยแป้นพิมพ์เสมือน
โปรแกรมจำลองของ Android
Stock Browser ในโปรแกรมจำลองของ Android
ขณะนี้ยังไม่มีวิธีติดตั้ง Chrome ในโปรแกรมจำลองของ Android อย่างไรก็ตาม คุณสามารถใช้เบราว์เซอร์ Android, Chromium Content Shell และ Firefox สำหรับ Android ซึ่งเราจะพูดถึงในภายหลังในคู่มือนี้ Chromium Content Shell ใช้เครื่องมือแสดงผลของ Chrome เดียวกัน แต่จะไม่มีฟีเจอร์เฉพาะของเบราว์เซอร์
โปรแกรมจำลอง Android มาพร้อมกับ Android SDK ซึ่งคุณต้องดาวน์โหลดจากที่นี่ จากนั้นทำตามวิธีการเพื่อตั้งค่าอุปกรณ์เสมือนและเริ่มโปรแกรมจำลอง
เมื่อโปรแกรมจำลองเปิดเครื่องแล้ว ให้คลิกไอคอน "เบราว์เซอร์" จากนั้นคุณจะทดสอบเว็บไซต์ใน Stock Browser เวอร์ชันเก่าสำหรับ Android ได้
Chromium Content Shell ใน Android
Content Shell ของโปรแกรมจำลอง Android
หากต้องการติดตั้ง Chromium Content Shell สำหรับ Android ให้เรียกใช้โปรแกรมจำลองต่อไป และเรียกใช้คำสั่งต่อไปนี้ในพรอมต์คำสั่ง
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) เลือกเครื่องเสมือนในหน้าดาวน์โหลดที่นี่
โปรแกรมจำลองและเครื่องมือจำลองในระบบคลาวด์
ถ้าไม่สามารถใช้โปรแกรมจำลองและเข้าถึงอุปกรณ์จริงไม่ได้ โปรแกรมจำลองในระบบคลาวด์ก็เป็นทางเลือกที่ดีที่สุดลำดับถัดไป ข้อดีที่สำคัญของโปรแกรมจำลองในระบบคลาวด์เมื่อเทียบกับอุปกรณ์จริงและโปรแกรมจำลองในเครื่อง คือคุณทำการทดสอบ 1 หน่วยสำหรับเว็บไซต์โดยอัตโนมัติในแพลตฟอร์มต่างๆ ได้
- BrowserStack (เชิงพาณิชย์) คือวิธีที่ง่ายที่สุดที่จะใช้สำหรับการทดสอบด้วยตนเอง โดยเลือกระบบปฏิบัติการ เลือกเวอร์ชันของเบราว์เซอร์และประเภทอุปกรณ์ เลือก URL ที่จะเรียกดู จากนั้นระบบจะสร้างเครื่องเสมือนที่โฮสต์ซึ่งคุณจะโต้ตอบด้วยได้ คุณยังสามารถเริ่มการทำงานของโปรแกรมจำลองหลายตัวในหน้าจอเดียวกัน เพื่อทดสอบว่าแอปมีหน้าตาและความรู้สึกเป็นอย่างไรในอุปกรณ์หลายเครื่องได้พร้อมกัน
- SauceLabs (เชิงพาณิชย์) ให้คุณเรียกใช้การทดสอบ 1 หน่วยภายในโปรแกรมจำลอง ซึ่งมีประโยชน์มากสำหรับการเขียนสคริปต์โฟลว์ผ่านเว็บไซต์ และดูวิดีโอการบันทึกวิดีโอการประชุมนี้ในภายหลังบนอุปกรณ์ต่างๆ นอกจากนี้ คุณยังทดสอบเว็บไซต์ด้วยตนเองได้
- อุปกรณ์ทุกที่ (เชิงพาณิชย์) ไม่ได้ใช้โปรแกรมจำลอง แต่เป็นอุปกรณ์จริงที่คุณควบคุมจากระยะไกลได้ ซึ่งจะเป็นประโยชน์มากในกรณีที่คุณต้องการทำให้เกิดปัญหาซ้ำในอุปกรณ์หนึ่งๆ และไม่เห็นข้อบกพร่องในตัวเลือกใดเลยในคำแนะนำก่อนหน้า
- LambdaTest (โฆษณา) จะช่วยให้คุณทำการทดสอบข้ามเบราว์เซอร์ด้วยตนเองโดยใช้เบราว์เซอร์และระบบปฏิบัติการต่างๆ รวมกันได้มากกว่า 2,000 รายการ ผู้ใช้จะสามารถบันทึกวิดีโอข้อบกพร่องที่ซับซ้อนและแชร์ผ่านการผสานรวมต่างๆ ได้ เช่น MS Teams, Slack และอีกมากมาย ผู้ใช้สามารถเร่งการทดสอบ โดยทำการทดสอบควบคู่กันไป