Debugging webview via Native Android Application by Chrome inspect

Debug webview without Source code via Native Android App for QA , Tester who would like to see webview response so let check it out #myfirstmedium

My First Medium, Today I would like to recommend Chorme inspect for debugging webview via Application so why should we do for?

“Debuging webview via Android app for checking the flow is correctly or not for following the product requirement of PO. As I know sometime Developer code the same thing but effect different things that why we should have this article to see what is happend with webview response”

“How we can debug webview via Navtive android app?”

Everyone can follow my instructions below. I guarantee it will work for you ^^

Preparation:

1. Emulator Build from Android Studio incase you don’t have real Android devices so If you have real devices you can use it.
2. Chrome browser install via Laptop or Macbook

Instructions

1. Install APK package to Emulator or Real Devices

Please install APK file via Emulator so the APK should have webview on it if you have a Real device so please install any application via Play Store or install APK file.

2. Connecting Emulator or Real Devices with your Laptop

Incase Emulator please run “adb devices” via terminal/command prompt for checking the devices is connected to the laptop?

Incase use Real devices, please connect USB from devices to the laptop then going to open “USB Debugging” via devices.

Settings > Developer options > turn on USB Debugging

Then please run the command as below.

adb devices

After running the command will show the device name

3. Open Chrome Inspect

Open Chrome browser and Easy visit debug webview or debug Mobile web by entering URL as below.

chrome://inspect/#devices

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

4. Start Debugging Webview via Native app

Launch application and going to webview that you would like to debug so you will see Webview row via Chrome browser as URL: chrome://inspect/#devices

Please clicking on Inspect then the system will open DevTools pop-up. You can check the response and any error from the element and network tab as debugging area.

**This chrome inspect can inspect from Mobile web just open a mobile browser first then you will see the webview for mobile browser.

Dev-Tools pop-up

Conclusion: Chrome Inspect can Debug webview and website via Mobile browser but you have to open Mobile Browser and enter URL of the website and then Chrome inspect will detect the Mobile website URL so you can use like webview inspection.

I hope this article will help you to debug easier and enjoy this article.

If you like this article please clapped for me

Reference: Chrome DevTools

Thai Version: Visit Here