Skip to main content

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! =)

Labels:

Comments

Post a Comment

Please leave your comments here...

Recommended for You

Playing with the markers and info window bubbles...

    In the last few posts, we have seen some marker examples and some information window examples. Now, lets do something interesting combining these two things. Just writing that "This is an info window" in the information bubble is not very interesting! And I know this...Have gone through the same phase!     So, today we will do something interesting! We will display the latitude- longitude co-ordinates of the point that the user clicks on the map! Doing this is not at all complex! Copy paste the following code and you will see for yourself a map coming to life!     The output of the above code looks as seen in the result section above! If you have any queries regarding the above code please comment on the blog post or feel free to contact me at my mail ID .
3 comments
Read more

Bihar dials mobile tech to track road-building

         Upwardly mobile Bihar is now set to become the first state in India to use the latest cell phones for centralised monitoring of road construction. In an earlier post we saw how the Bihar police were using the GIS technology to track down the criminals.          Bihar State Road Development Corporation (BSRDC), under the Road Construction Department (RCD), will deploy Android phones to help executive engineers keep an eye on road construction from district headquarters, while the RCD Secretary will do so from the Patna office.          Earlier, Bihar State Bridge Construction Corporation had successfully used GPS-enabled phones to help mobile inspectors track engineers on duty. The latest mobile operation system supports all Google applications in 3G mobile phones.          Using the latest Android technology, ...
Post a Comment
Read more

GIS India News Titbits

         Treading on the foot steps of Gujarat for improvement in governance, the Himachal Pradesh government on Wednesday, 10th November 2010, announced to set up geo-informatics centre for planning with help of the latest digital techniques under supervision of department of science, technology and environment.          Chief Minister Prem Kumar Dhumal said the centre would be set up on the lines of Bhaskaracharya Institute of Space Applications and Geo-Informatics (BIGSAC), Gandhinagar, Gujarat, and would be named as Aryabhatta Geo-Informatics and Space Applications Centre (AGiSAC).          Departments that are directly linked with common man including Revenue, Forest, Education, Health, Agriculture, Horticulture, Panchayati Raj and Rural Development would be the first ones to be taken up for planning under the project by digitisation of their record. ...
2 comments
Read more

Four maps on the same page - Playing with events

    In today's example we will see how to add 4 maps on the same web page and then play a bit around with some events in Google Maps API. Lets have a look at the code. All that you have to do to get the code working is copy the code in a text file and save it with .html extension. Open this html file in your browser and you will see the four maps in action!     Adding the four maps on a webpage should not be a challenge anymore, and all the more after the example Two Google Maps - Side by side that I shared a few weeks back! All you need to pay attention is to the events. There are two events "drag" and "zoom_changed". As the event names suggest, when you will drag or zoom the first map (upper left map), the remaining three maps will also zoom and pan accordingly! Try it out and leave a comment of what you think of it! You can also drop your queries or doubts about the same here!     The output of the above code appears as seen in th...
4 comments
Read more

Form info window

         Today we will look at a Google Maps API v3 example to add a form in the information bubble! This is usually required when we wish to accept some data/information from the user! This data can be saved to a server in the form of an XML file or a database! The information can then be retrieved back at a later stage, when necessary!          In this example we will only look at form in the information bubble! The connectivity part with the server will be discussed in another post! So, today's code snippet is as seen below! <html> <head> <title> Google Maps API v3 - Adding marker and info window on Click and creating a form in the infowindow with the lat-lng information in it. </title> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <script type="text/javascript"> var map;    //When using ev...
5 comments
Read more