Debugging Local Mobile Pages on Android Phone Using Chrome Developer Tools

Image for post
Image for post

While developing a mobile web application, device or browser issue are very common. Mobile emulator plugins or built in emulators in browsers can be used to deal with them, but often bugs are faced by developers that occur in actual devices, not in emulators. The best way to deal with them is to debug the application directly in the device. Remote debugging is a feature that allows you to debug the application in your mobile the same way as done in desktop. Let’s take a deep dive towards how to execute the process.

What Will You Need

  • Chrome version 32 or above installed and properly working.
  • If you are using Windows, USB drivers are required.
  • A USB cable to connect your Android device with the desktop or laptop.

For the Android device, the following things are required.

  • Latest version of Google Chrome.
  • Android version 4 or above.
  • USB debugging enabled in the developer options for Android.

The last requirement is a bit tricky. We will cover it in the following section.

How to Enable USB Debugging in Android

  • Go to Settings
  • Navigate to Developer Options and enable it
  • Once Developer Option is enabled, you will be able to see the USB Debugging checkbox.
  • Scroll to the checkbox and check it
  • A pop-up notification will appear informing that you are now a developer.

The process is a bit complicated in Kitkat or other higher versions.

  • Navigate to settings and go to About Phone option
  • A new window will open. Scroll to the bottom and you will be able to see the Build Number.
  • Tap it 7 times. In the lower section of the page you will get a pop-up that you are now a developer.
  • After going back, you will be able to access the Developer Options menu.
  • The rest is same, check USB debugging, and you are done.

Setup Localhost on your Desktop

If you are developing a normal website without any advanced JS framework, you will need to create a proxy server on your workstation. This can be done by using WAMPServer, which comes with the latest versions of PHP, Apache and MySQL. Once installed, WampServer will create a directory under which, project folders can be created. The sites can be directly previewed at localhost once development is completed.

Image for post
Image for post

Connect Both Devices

Find Your Workstation Details

  • Go to the control panel
  • Search for “adapter” and click on it
  • Go to “view network connections”
  • Select Active Network and navigate to “view status”
  • Click on “details” and you will be able to view the IP Address next to IPv4 address.

There is also an easier alternative

  • Click the “Start” button and go to run
  • Type “cmd” and press enter
  • The command prompt screen will appear. Type ipconfig and press enter
  • You will get your IP address prompted on the black screen along with default gateway and subnet mask.

There is however, one drawback of using IP address. Every time you change the network, it gets changed and you have to search for it again. A better alternative is to use the Hostname. It can be found easily by

  • Clicking on “Start“ button
  • Right click on “My Computer” and go to properties
  • In the Computer Name tab, you will find the Hostname for your workstation.
Image for post
Image for post

Viewing Locally Hosted Websites in Android

Testing Locally Hosted Pages on LambdaTest

LambdaTest is free to signup and use. So do tryout LambdaTest first before you try above method :P.

Viewing a locally hosted website in Android device is very beneficial in the current age of digital transformation. People are using mobile devices for browsing and surfing webpages. Often developers and testers test mobile view of their webpages using browser emulators. The results of which are often inaccurate. Real time issues on Android devices are not observed often on emulators. For perfect User Experience testing, it is always helpful to test your application on an Android device before it is deployed into production.

Wish to add something to the discussion? Comment in the section below!

Originally published at lambdatest.com

Originally written by Arnab Roy Chowdhury

Image for post
Image for post

Further Reading…

If you like the post, please clap👏 and help others find it too.

Written by

Product Growth at @lambdatesting (www.lambdatest.com)

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store