Debugging a Web App on Android

Learn how to debug your web app on any Android device with the help of these tools and techniques. Here I list the common problems and free tools to use in your day-to-day mobile web work.

The problem

Android is a wonderful platform for developers. It offers almost limitless flexibility and given enough time, a skilled developer can create or enhance smartphone experiences like never before. That being said, it had a rough start and web developers still struggle with those early mistakes. There are two things that affect web developers directly: First there are many manufacturers and this leads to multiple versions of the OS and browsers being spread out accross millions of devices. Second, the built-in tools available to web developers are sub par and provide a very limited set of information when trying to solve a problem.

Tools available

These days, web developers don't have to worry about supporting what is considered ancient devices running older versions of Android, so some things have definitely gotten better. The tools available to most mobile web developers are plentiful and most Android phones these days ship with Chrome by default, which offers remote debugging (see below) that is easy to set up.

Below I will list the most common FREE tools used by web developers for fixing android browser problems.

1. Chrome Developer Tools and Chrome for Android

Let's get this one out of the way. If you are having problems with Chrome or just don't care about the stock Android browser, you're in luck. Chrome has arguably the best tools in the industry for working with browsers. You can use these tools to debug an Android device running chrome and connected with USB cable.

Chrome in action

The Chrome team has been improving this over the years and there are some fantastic features like screen casting, debugging webviews, and port forwarding. Needless to say, it's a joy to work with!

2. URL bar tricks

From the best-in-class tool we move on to low-tech and frustrating ones that were the norm just a few years ago.

In the stock Android browser (i.e. not chrome), there is a way to invoke the javascript console. It's very rudimentary and has limited uses, but in a pinch, it can be useful. To do it, simply type about:debug as a URL and then tap javascript console at the top.

Touchwiz Browser Console

Other things you can do with the URL bar are execute arbitrary javascript like this:

javascript:console.log(navigator.platform)

Frankly, these tools are crap. Calling them "tools" is actually a lie, because they are pretty useless... imagine if this was the only option? *shudder*

3. jsconsole.com

This is an amazing tool that allows you to attach a JavaScript console to any webpage that you control. This is many times better than the about:debug trick. You will have a lot more room to work with and the benefit of having your keyboard as an input device. This will allow you to modify the DOM and issue javascript commands with ease to ANY device.

Follow these instructions to get it set up.

The tool is completely open source and was built by the creator of jsbin.com, Remy Sharp (@rem).

The downsides of this tool are that it's only a javascript console (no DOM inspector) and it potentially won't work with a site that you have in a QA environment that is not accessible outside your local network.

4. Web Inspector Remote: weinre

weinre is a tool maintained by Apache that has no equal. It's better than anything else out there for its incredible compatibility across any device and it's free! It's not as full featured as Chrome's offerings, but it does a lot of what you'll need.

Setting it up takes some know-how, but once you do it, it'll be at your disposal by simply dropping a <script> tag in your code and starting up weinre.

To install it, you will need Node.js. Once that is installed, you can install weinre by running npm install -g weinre.

To start weinre, you can use weinre --boundHost -all- This will start a server that will listen on any host pointing to your machine (i.e. 127.0.0.1, localhost, your IP, etc) on port 8080 by default. You can change the port it listens on by using the --httpPort argument. A list of options can be found in the project's documentation.

Now drop this tag in the page you're trying to debug

<script src="http://your-machines-address-here:8080/target/target-script-min.js#anonymous"></script>  

Then load up the page in question on any device and direct your development machine to this URL in your browser: http://localhost:8080/client/#anonymous

Select a target and use the top menu bar to switch between the DOM inspector and Console. In the DOM inspector you can highlight HTML nodes and see them highlighted on your device. You can also change CSS rules, see computed CSS, and even check event listeners attached to a specific node.

Final thoughts

As you can see, the options available for you to debug web pages in Android's stock browser are not superb. With the exception of weinre, the options don't offer even a fraction of what Chrome for Android and Safari for iOS offer; however, with some persistence and determination, you can create mobile web-apps that function properly and look great on any android device.

I recommend taking the time to install Node.js and weinre, because it's great and can come in handy with any device, not just Android ones.