วิธีทดสอบ (Debug) เว็บบนมือถือ iOS กับ Android ด้วย Web Inspector
ผมเชื่อว่าหลายๆ คนที่ทำเว็บไซต์จะลำบากมาก ถ้าไม่มีตัว Web Inspector ของ Safari หรือ Developer Tools ของ Chrome ซึ่งใช้ในการ Debug เว็บ (ส่วนตัวชอบของ Chrome มากกว่า) แต่คราวนี้ถ้าในมือถืออยาก Debug แบบบน Desktop บ้าง ต้องทำยังไงเรามาดูกัน
สำหรับมือถือ iOS
ต้องใช้ Safari ในการ Debug ทั้งในมือถือและใน Desktop
- ใน Safari บน Desktop ของเราตรงแถบเมนูด้านบน เช็คว่ามีเมนู Develop แล้วหรือยัง ถ้าไม่มีให้ไปเปิดที่ Safari > Perferences > Tab Advanced ตรงด้านล่างจะมีคำว่า Show Develop menu in menu bar ให้ติ๊กไว้ เราก็จะได้เมนู Develop มาแสดงด้านบนแล้ว
- ในมือถือที่ใช้ iOS ของเรา ก็จะต้องเปิด Web Inspector โดยไปที่ Settings > Safari > Advanced > เลือกเปิด Web Inspector
- เสียบสายมือถือเข้ากับคอม ดูที่เมนู Develop ใน Safari จะมีขึ้นชื่อโทรศัพท์พร้อมกับชื่อเว็บที่เราเปิดอยู่ กดแล้วก็สามารถใช้ Web Inspector ได้เลยซึ่งจะเห็นเหมือนตอนเรา Debug ใน Desktop เลย
สำหรับมือถือ Android
แน่นอนต้องใช้ Chrome ทั้งในมือถือ และ Desktop เช่นกัน
- อย่างแรกเราต้องเช็คว่ามือถือเราเป็น Developer Mode หรือเปล่า โดยไปที่ Settings แล้วดูว่ามีเมนู Developer Options หรือเปล่า
ถ้ายังไม่มี ให้ทำการเปิด Developer Mode โดยไปที่เมนู Settings > About Phone > หาคำว่า Build number แล้วกดย้ำๆ จะขึ้นว่า คุณเป็น Developer แล้ว (เป็นวิธีที่ Geek มาก)
- ในมือถือ ทำการเปิด USB Debugging โดยไปที่
Settings > Developer Options > USB Debugging ให้เปิดไว้
- ใน Chrome บน Desktop ให้เปิด Developer Tools โดยไปที่เมนูด้านบน View > Developer > Developer Tools พอเปิดแล้วให้ไปที่เมนูที่เป็น 3 จุดด้านขวาบน ให้เลือก More tools > Remote Devices จะขึ้นหน้าตาประมาณนี้
- คราวนี้เอามือถือมาเสียบกับ (ต้องดูสาย USB ดีๆ ว่าสามารถส่งข้อมูลได้หรือเปล่า เพราะบางสายใช้สำหรับจ่ายไฟเท่านั้น) พอเสียบแล้ว ในมือถือจะขึ้นมาให้เรายืนยันการเชื่อมต่อโหมด USB Debugging ให้เราตกลง ก็จะเห็นชื่อมือถือใน Developer Tools แล้ว พร้อมกับเว็บที่กำลังเปิดอยู่ เราก็สามารถทำการ Debug ได้เลย
คราวหน้าเดียวจะมาแนะนำการใช้ Developer Tools แบบคร่าวๆ ที่ใช้บ่อยและจำเป็นในการตรวจสอบเว็บกันนะครับ
