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

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

Integrated GPS cameras...

          GeoSpatial Experts has introduced three new GPS Camera bundles designed specifically for geotagging and mapping digital photographs. The firm now offers its popular GPS-Photo Link 5.0 photo-mapping software with the new Ricoh G700SE, Sony A55, and Casio EX-H20G GPS cameras.           All of the GPS cameras below will provide you with geotagged photos, additionally, some can also offer the ability to capture the direction the photo was taken with a built-in compass, or the ability to collect attribute data in the field. WiFi and Bluetooth will allow you to communicate with laser range finder equipment to measure exact distance from the photographer to the item being photographed. Some GPS cameras provide a ruggedized camera to withstand harsh conditions.            In 2007, Ricoh introduced its 500SE model as the first GPS-eq...
2 comments
Read more

Fusion Table - Heat Map Layer

    In continuation with the previous example on Fusion Table, we will have a look at another Fusion Table layer example. Today's point of discussion is heat map! What is a heat map? A heat map is geographical representation of data where the values taken by a variable in two-dimensional map are represented as colors. Higher the value of the variable, that place on the map would be represented with a deeper color.     This example is very much similar to the previous one, just for one minor change! Let us have a look at the code.     I have just used a readily available Google Fusion Table for this example. Any anomalies in the data is not my responsibility! Copy the above code in an html file and open it in your browser! You will see the fusion table heat map layer in action! The only change in this code from the previous one is that, the heatmap property of the fusion table layer is made true! The output of the above code looks as s...
Post a Comment
Read more

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

Google Street View Image API

    Street View is one of most used feature of the Google Maps and why not? You can actually see any part of the world as if you are visiting the place at that very moment. And now with the Google Street View Image API, you don't even need to carry a camera with you to the places you visit. You can take-in all the scenic beauty without even bothering about clicking a single picture. You can come back from your vacation and get a few images using the Google Street View Image API and show those images to your friends and relatives. Create an album of high definition images and go ahead and share it on Facebook for your friends to have a look.     Using the Google Street View Image API is very simple and anybody can make use of it without any programming knowledge required. I will walk you through the entire process of effectively using the Google Street View Image API. So if you are set, let's go on an amazing ride across the globe with the Google Street Views. ...
1 comment
Read more