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.
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.
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.
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.
about:debug as a URL and then tap
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*
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).
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
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.
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.