Debugging webview via Native Android Application by Chrome inspect
Debug webview โดยไม่ต้องมี Source code บน Native Android App ทำยังไงแนะนำมาลองอ่าน Medium นี้ดูกันนะคะ #myfirstmedium
Medium แรกเลย วันนี้ขอนำเสนอ การ Debug webview บน Applicaton ทำยังไงนะ แล้วทำไปทำไมล่ะ ขอเริ่มด้วยคำถามว่า ทำไปทำไม ก่อนก็แล้วกัน
“ทำเพื่อ debuging webview ที่อยู่ใน Android app ต่างๆ ในกรณีที่ Flow บางอย่างไม่เป็นไปตาม Requirement”
“แล้วทำอย่างไรล่ะ ???”
เพื่อนๆ สามารถทำตาม step ด้านล่างได้เลยนะคะ รับรอง work แน่นอน ^^
ขั้นแรกสิ่งที่ต้องเตรียมคือ
- Emulator Build จาก Android Studio ในกรณีที่ไม่เครื่อง Android นะคะหรือถ้าผู้อ่านมีเครื่องจริงก็ใช้ได้เลย
- Chrome browser install บน Laptop หรือ Macbook
มีวิธีการดังนี้:
- ติดตั้ง APK package ไปที่ Emulator หรือ Real Devices
กรณีที่มี Emulator บนเครื่องแล้วให้ install Native Android application ไฟล์ APK ที่ต้องการจะ debug webview หรือ ถ้าเรามี Real devices ให้ install App จาก Play store หรือ ไฟล์ APK ที่ได้จาก Developer ก็ได้
2. เชื่อมต่อ Emulator หรือ Real Devices กับ Laptop
ถ้ามี Emulator อยู่แล้ว ลองรัน adb devices ที่ terminal หรือ command prompt เพื่อตรวจสอบว่าสามารถ debugging webview ได้หรือไม่
กรณีที่ใช้ Real devices ให้ต่อ USB จากมือถือเข้า laptop ก่อนแล้ว ไปที่ Settings > Developer options > turn on USB Debugging แล้วลองรัน command
adb devices
3. เปิด Chrome Inspect
เปิด Chrome browser และเข้าไป debug webview หรือ Mobile web ง่ายๆ โดย Enter URL ด้านล่างนี้
chrome://inspect/#devices
4. Start Debugging Webview บน Native app
เปิดใช้งาน application และไปยัง webview ที่ต้องการ debug จากหน้า เปิด Chrome > chrome://inspect/#devices อีกครังจะเห็น webview URL ที่ต้องการ Debug ให้กด Inspect link ก็จะแสดง DevTools pop-up ที่มีหน้าต่าง webview และ debugging area
สรุป: Chrome Inspect สามารถ Debug webview และ website ที่เปิดบน Mobile browser ได้เหมือนกัน แต่ต้องเปิด Mobile Browser ขึ้นมาก่อนเพื่อ ให้ Chrome inspect detect เจอว่าเราใช้งาน Mobile website URL ไหนอยู่ วิธีการก็เหมือนกับ Webview inspect เลย
หวังว่าบทความนี้จะเป็นประโยชน์ไม่มากก็น้อยต่อผู้อ่านนะคะ
ถ้าชอบฝากกดปรบมือเยอะๆ เป็นกำลังใจให้ด้วย ขอบคุณมากค่ะ
Reference: Chrome DevTools