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 แน่นอน ^^

ขั้นแรกสิ่งที่ต้องเตรียมคือ

1. Emulator Build จาก Android Studio ในกรณีที่ไม่เครื่อง Android นะคะหรือถ้าผู้อ่านมีเครื่องจริงก็ใช้ได้เลย
2. Chrome browser install บน Laptop หรือ Macbook

มีวิธีการดังนี้:

1. ติดตั้ง 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

แสดงมือถือที่เชื่อมต่อกับ laptop จะแสดง device name

3. เปิด Chrome Inspect

เปิด Chrome browser และเข้าไป debug webview หรือ Mobile web ง่ายๆ โดย Enter URL ด้านล่างนี้

chrome://inspect/#devices

จะแสดง Device ที่เชื่อมต่ออยู่ #EMULATOR-5554

4. Start Debugging Webview บน Native app

เปิดใช้งาน application และไปยัง webview ที่ต้องการ debug จากหน้า เปิด Chrome > chrome://inspect/#devices อีกครังจะเห็น webview URL ที่ต้องการ Debug ให้กด Inspect link ก็จะแสดง DevTools pop-up ที่มีหน้าต่าง webview และ debugging area

**ตรงนี้สามารถ เปิด Google chrome ขึ้นมาแล้ว inspect Mobile web ได้เหมือนกัน

New pop-up windows สามารถ debugging webview โดยใช้ element หรือ network เพื่อดู response

สรุป: Chrome Inspect สามารถ Debug webview และ website ที่เปิดบน Mobile browser ได้เหมือนกัน แต่ต้องเปิด Mobile Browser ขึ้นมาก่อนเพื่อ ให้ Chrome inspect detect เจอว่าเราใช้งาน Mobile website URL ไหนอยู่ วิธีการก็เหมือนกับ Webview inspect เลย

หวังว่าบทความนี้จะเป็นประโยชน์ไม่มากก็น้อยต่อผู้อ่านนะคะ

ถ้าชอบฝากกดปรบมือเยอะๆ เป็นกำลังใจให้ด้วย ขอบคุณมากค่ะ

Reference: Chrome DevTools