Debugging the Android native browser
A couple of months ago, I created a small but handy Android app that enables developers to run their web apps inside the Android stock browser while allowing them to debug and inspect it with the Chrome Developer Tools.
So what is it?
Just a debug-enabled WebView (learn more), allowing you to use Chrome Developer Tools to inspect and debug your web app while its running on your device (Android 4.4 or higher).
What's the use of it?
When I'm developing a mobile web app, I frequently encounter bugs that only occur on real devices. Therefore, it's hard to reproduce and debug such defects within a desktop browser.
So if you ever opened your web site in the Android stock browser and encountered one of the following issues, this app might prove useful to you:
- The layout or styling of your web site appears broken when viewed in the Android stock browser
- Your JavaScript code didn't produce the expected result or the computation must have suddenly stopped during execution (maybe an exception was thrown?)
- Animations are laggy, or just don't animate as expected
While the Google Chrome for Android app already offers the possibility of remote debugging, the native Android browser does not. This is unfortunate, since most of Android specific bugs I encounter happen to appear only on the stock browser and not on Google Chrome anyway.
How to use it?
-
Download the Debuggable Browser App
If you're already on your Android device, tap here to open the product page in the Google Play Store.
-
Start remote debugging on your android device
1. Enable Developer Mode on your device and connect it to your PC/Mac. Learn more about it here.
2. Open the app and navigate to your web site by entering its URL
3. On your PC/Mac, open Chrome and type "chrome://inspect" into the address bar
4. In Chrome, check "Discover USB Devices" and it will list the web page you've opened on your device
5. Hit inspect and enjoy remote debugging the app with the Chrome Developer Tools