Mobile web application - Remote debugging

    How many times have you come across issues on your web project which are specific to your Android devices, some particular version of it and on the Android stock browser or the installed webkit browser or the Chrome browser. Most of you must have been in this situation - "Things are working fine everywhere except on some Android version" - how many times do you see such issues/bugs raised by the QA team and you feel, if only I could debug on the mobile browser just like we do on the desktop browser using our developer tools.

    You can now heave a sigh of relief, you can now debug your mobile web application for any mobile specific issues if you have the issue on the Android Chrome browser. The chrome developer tools now allow the user to remotely debug a web application on Android devices. The experience of web content on mobile operates very differently than what users experience on the desktop. The Chrome DevTools allow you to inspect, debug and analyze the on-device experience with the full suite of tools you're used to, meaning you can use the tools in your desktop Chrome to debug a page on mobile Chrome.

    Debugging occurs over USB and as long as your mobile device is connected to your development machine, you can view and change HTML, scripts and styles until you get a bug-free page that behaves perfectly on all devices.


    To start debugging, you need to have:
  • An Android phone or tablet with Google Chrome for Android 32 or later installed from Google Play.
  • A USB cable to plug in your device. (Windows users will also need to install an appropriate USB device driver.)
  • Google Chrome 32 or later installed on the system you wish to use as your debugging host.

Step #1: Setting up your device

    In order to debug over USB, you need to setup your Android device for development.
    To enable USB debugging:
  • On Android 4.2 and newer, Developer options is hidden by default. To make it available, go to Settings > About phone and tap Build number seven times. Yup, just tap it 7 times, even if it seems crazy. Then, return to the previous screen to find Developer options.
  • On Android 4.0 and 4.1, it's in Settings > Developer options.
  • On most devices running Android 3.2 or older, you can find the option under Settings > Applications > Development


Step #2: Connecting directly over USB

    DevTools now supports native USB debugging of connected devices. You no longer need to configure ADB or the ADB plugin to see all instances of Chrome and the Chrome-powered WebView. on devices connected to your system. This functionality works on all OS's: Windows, Mac, Linux and Chrome OS. Just visit "about:inspect" and verify Discover USB Devices is checked. This direct USB connection between Chrome and the device may interrupt an `adb` connection that you may be trying to establish. If you need to use the `adb` binary for other reasons, uncheck the "Discover USB Devices" checkbox, unplug the device, and plug it back in, before establishing your connection via `adb devices`.


    If you encounter problems with the above technique, or are using an older version of Chrome, you can try the legacy workflow for connectivity which uses the adb binary from the Android SDK.
  • Connect your mobile device to the host using a USB cable.
  • Ensure your device is listed as available, by issuing the adb devices command. If not, please check that you have USB debugging enabled on your device.
  • On the mobile device, launch Chrome. Open Settings > Advanced > DevTools and check the Enable USB Web debugging option.
  • Issue the following command in the terminal or console on your host machine to enable port forwarding:
adb forward tcp:9222 localabstract:chrome_devtools_remote
  • If you get a "device not found" error, run the adb kill-server command to resolve.
  • Now open desktop Chrome and navigate to localhost:9222.
  • You will be presented with the set of thumbnails for pages currently open in tabs on your mobile Chrome. Choose the page you would like to debug.


Step #3: Connect your device
  • Connect your mobile device to the development machine using a USB cable.
  • When connecting your device to your development machine, you may see an alert on the device requesting permission for USB debugging from this computer. To avoid seeing this alert each time you debug, check Always allow from this computer and click OK.


    Now, to see all connected devices, go to the Chrome menu > Tools > Inspect Devices:
  • You can have multiple devices simultaneously connected as well as multiple versions of Chrome open on each device.
  • You will be presented with the set of thumbnails for pages currently open in tabs on your mobile Chrome. Choose the page you would like to debug. Find the tab you're interested in and click the inspect link to open DevTools on it. You may also reload the page, bring it to the front, or close it. Lastly, you can open new links on the device through a text input field.
Step #4: Debug your Application
    You can now start debugging and profiling mobile content in the DevTools on your desktop.



    For example, inspect an element in the page you have selected and you will notice the element highlight in Chrome mobile on your device in real time.


    Similarly, editing scripts or executing commands from the Dev Tools console will also apply to the page being inspected on your device, as seen below.


    Hope this article helps you resolve the device specific issues better and hope this has saved you some time and loads of frustration. Till next time, keep reading, keep developing, keep deploying! =)

Popular posts from this blog

Where does Google get it's live traffic data from?

Referring to a post that I wrote earlier, Google's - Live traffic Layer, ever wondered how Google collected this data? I was wondering the other day, how Google received live data to display it on their maps as a layer! I looked up the web and found something very interesting and am sharing the same with you all.

    As we all know, the traffic layer is available most accurately in several states in USA. Most major metro areas in the US have sensors embedded in their highways. These sensors track real time traffic data. Easy to miss at high speeds (hopefully anyway, traffic permitting), more commonly noticed may be the similar sensors that often exist at many busy intersections that help the traffic lights most efficiently let the most amount of people through. The information from these tracking sensors is reported back to the Department of Transportation (DOT). The DOT uses this data to update some of the digital signs that report traffic conditions in many metro are…
Keep reading

jQuery Mobile's Next Big Step

Image
A huge shout out to the jQuery Mobile team for releasing jQuery Mobile 1.5.0-alpha.1. This has been long overdue. This release is huge - Tons of issues fixed, integration with jQueryUI and a bunch of new and re-written widgets. In their own words - "We have closed and fixed hundreds of bugs getting to our lowest bug count since the initial release of jQuery Mobile!" That's how big the release is! Take a look at the Dev Demos they have hosted!
    The new and improved jQuery Mobile looks so much more better than it's predecessors. Give it a try and look around. It's time to upgrade soon. Some of the major changes that have happened are listed below.
Modularized code     Entire code is now modularized so that you can now include only the code that you need in your jQuery Mobile application. This should make your application lighter.
NPM Support     NPM support is finally here. The jQuery Mobile npm-package is now completely owned and maintained by the jQuery Mob…
Keep reading

Geodesic Polyline

Image
Today we will have a look at a very interesting polyline example - "The geodesic polyline". Now the first question that will pop is "What is geodesic?". Mathematically, geodesic means the shortest line between two points on a mathematically defined surface, as a straight line on a plain or an arc of a great circle or sphere.

    The next question after reading the above definition is clearly, "Why do we need geodesic polylines?" and that would be followed up with "What is this Great Circle?". We will discuss this first, before we move on to the actual example today. The example is very very similar to the normal polyline example, with just a small change.

    Having said so, I will now try to explain why we need a geodesic polyline? The shortest distance between two locations on the earth is rarely a straight line as the earth is roughly spherical in nature. So any two points on the earth, even if they are very close lie on a curve and not …
Keep reading