Articles

Debug mobile sites with Android and Google Chrome on Windows

debug-android
Nowadays a significant percentage of Internet users access to web sites using smartphones and tablets, users expect to reach a full experience like they are surfing on a desktop browser.

To provide it has become necessary to take care of the look and presentation of the mobile site version.

Debug mobile sites is not an easy task, most of the browsers are designed to be fast and fluid and to achieve this debug functions are usually not included. Besides performance is not practical debug and inspect a page on a small screen.

In this post you will learn how to properly inspect a mobile site using Android and Google Chrome.

First step is download the Android SDK to your computer, once finished extract all the files to C:/Android SKD (or other location that you want)

The SDK includes eclipse and an installer if you will just use it for debug purposes you can ignore them and focus just on the SDK folder.

Second step is configure your Android device and the mobile version of Chrome browser.

To enable debug options you need to setup your device for development, if you are using an Android version lower than 3.2 you can find the option under Settings > Applications > Development, on Android 4.0 and 4.1 you can find the option under Settings > Developer, on the 4.2 version and newer the developer options are hidden by default, to make them available go to Settings > About phone and tap build number seven times. Return to the previous screen to find developer options.

Launch Chrome browser and enable the USB debugging, you can find the option under Settings > Advanced > DevTools 

Connect your device to the computer using USB cable.
Open a terminal console, you can do this pressing Windows + R and writing cmd on the open text box.

In the console type the following commands, if you have chosen a different path to store the SDK you may have to adapt it.

cd C:\Android SDK\sdk\platform-tools
adb forward tcp:9222 localabstract:chrome_devtools_remote

If your connection is established with success you will get a message like the one bellow

If you get “device not found” type the command:

adb kill-server

Open Chrome browser on your computer and navigate to localhost:9222, the thumbnails represent the pages currently open on your mobile Chrome.

You can pick one site and start debugging, if you inspect an element in the page you will notice the element highlight in Chrome mobile in real time.

You will also have access to other debug options like the console and network.

5 Comments

  1. august August 11, 2013 at 11:20 pm

    Here is a website all of the details I had been searching for! Constantly believe exactly how helpful it had been when I seemed to be searching this amazing site! Specially this informative article! Thank you so much!

    Reply
  2. Android Guru August 19, 2013 at 3:58 pm

    Thankfulness to my father who informed me about this weblog, this weblog is actually awesome.

    Reply
  3. Samuel August 23, 2013 at 10:05 am

    This is gorgeous!

    Reply
  4. create an android app October 12, 2013 at 6:29 pm

    I am really enjoying the theme/design of your weblog.

    Do you ever run into any web browser compatibility problems?

    A number of my blog audience have complained about my blog not operating correctly in Explorer but looks great in
    Chrome. Do you have any recommendations to help fix this issue?

    Reply

Add a comment


9 + four =


Author: João Ferreira

Web developer focused on SharePoint branding, blogger, tech enthusiast. Traveling and sports are my addictions, knowledge and success are my daily motivations.

Search