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

The Bicycling Layer...

    Recreational cyclists and bike commuters alike can plot cycle-friendly routes, find trails, and avoid snarling traffic with Google Map's Bicycle layer. Map's bike-friendly, green-toned map layer is very eye-pleasing. The Google Maps API allows you to add bicycle information to your maps using the BicyclingLayer object.     The BicyclingLayer renders a layer of bike paths, suggested bike routes and other overlays specific to bicycling usage on top of the given map. Additionally, the layer alters the style of the base map itself to emphasize streets supporting bicycle routes and de-emphasize streets inappropriate for bicycles.     Let us have a look at the following example. The code has a map which is centered at Pune, India. There are very few cycle tracks in Pune and so you will see just a few dark green lines on the map. But if you would change the latitude-longitude values in the code and center the map at USA, then you will see a...
Post a Comment
Read more

On-click polyline

    Following up on the last example where we saw how to add a hard-coded polyline to our map, today we will see a more user interactive polyline example. In this example we will discuss on-click polyline! What you need to do is, copy the following code into a txt file and save it with dot html (.html) extension and then view it in your browser. So here goes the code!     The output of the above code will be a map centred at Mysore. Click on the map for the first time and a marker will appear there. On the next click, another marker will appear with a polyline between the 2 markers. This will continue for all further clicks and here you have your "On-click polyline" running! The map looks something like seen in the image below!     The next step to this code will be creating a polygon. We will see examples to create polygons on the map at a later stage! If you have any queries or suggestion, please drop a comment here or feel free to ...
1 comment
Read more

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 areas. They als...
17 comments
Read more

Material UI, Google Polymer & Web Components

    Google introduced Material UI during the Google I/O a few days back. Since then the web is all abuzz with articles about material UI and what Polymer is and how these 2 fit together. In this article today, I will try and helps us all to get a better understanding of these new concepts.     So, let's start with Material UI first. Google has for long been trying to bridge the gap between the Web and the Android worlds with a unified user interface and Google's Material UI is a big step towards this. The new design philosophy is about dynamically adjusting the elements according to screen size, add more white space between elements, provide a lot of user feedback using animations, make use of bold UI colors and be flat and 3D about the design at the same time. Now that sounds really cool, isn't it? Well, actually it is and you will actually appreciate and enjoy it all the more when you watch the following video from this year's Google I/O.   ...
Post a Comment
Read more

Google Map's Real-Time Traffic Layer...

    You can now check the traffic condition on the road before you leave for work, or a party or to your friend's place. Google's Traffic layer shows the traffic conditions in your area - LIVE!!! Live traffic data is available in major cities in the United States, France, Britain, Canada and Australia, with new cities and countries frequently added. The Google Maps API allows you to add real-time traffic information (where supported) to your maps using the TrafficLayer object. Traffic information is provided for the time at which the request is made. Consult this spreadsheet to determine traffic coverage support.     Let us now have a look at the Google Maps API - Trafiic Layer example. Copy the following code in a simple text file and save it as html. Click on this html file and it will open in your default browser. You will then see the traffic conditions in your area - LIVE...     The output of the above code looks as seen in the r...
4 comments
Read more