Troubleshooting Mobile Versions of Android Websites on Mac or Windows

Debugging is like oxygen for web developers, right? It is difficult to develop the perfect code and related functionality without being able to debug your programs.

You may be using several developer tools for debugging a web page or some web app in a desktop browser, but it is challenging when you need to debug an Android device (for some apps) on your Windows or Mac platform. For such a scenario, you need to debug remotely by using the same tools from your desktop on the Android mobile devices.

In this article, we learn about the different ways to remotely debug live content on your Android device from your Windows or Mac computer. The objective is to understand:

  • The minimum requirements for remote debugging;
  • Setting up Android devices for remote debugging;
  • Discovering Android devices; and
  • Debugging Android device content from your development machine.

Minimum Requirements for Remote Debugging

Before you start practicing remote debugging, you first need to ensure that the following things are in place:

  • You need a USB cable to connect your development machine with the Android device.
  • The OS on the Android device should be Android 4.0 or later.
  • Install USB drivers for your Windows development machine (desktop or laptop).
  • Install Chrome 32 or a later version on your development computer (for Windows or Mac).
  • Install Chrome for Android (Version 32 or later) on your Android device.

Setting up and Discovering Android Devices

Below are the steps for setting up your Android devices for debugging:

  • Open up Settings on your Android device and navigate to Developer Options > Enable USB Debugging. For Android 4.2 or later, the “Developer Options” screen is hidden and you can make it visible by navigating to Settings > About phone, followed by a tap on “Build number” for seven times. Once you repeat this tap seven times and return to the previous screen, you will find the “Developer Options” at the bottom.
  • Open Chrome on your development machine and ensure that you are signed in with any of your preferred Google accounts. Avoid opening Chrome in incognito or guest mode because remote debugging does not work in those modes.
  • Open Chrome DevTools by navigating through to More Tools > Developer Tools.troubleshooting-mobile-versions-1troubleshooting-mobile-versions-2
  • From the Main Menu of the “Developer Tools” section, go to More tools > Remote devices and ensure that the “Discover USB devices” option is enabled.troubleshooting-mobile-versions-3
  • Use a USB cable to connect your Android device with your development machine. For the first-time connection, your device will be visible under “Unknown” with a “pending authorization.”
  • Ensure you accept the “Allow USB debugging” prompt on your Android device and you will be able to view the Android device model name instead of “Unknown” on the development machine.
  • You will then be ready to start remote debugging of your Android device from your Windows or Mac computer.

Debug and Inspect the Content on the Android Device

Make sure Chrome is open on your Android device and start exploring the DevTools section on your computer by clicking on the tab that shows your Android device’s model name. In that tab, the Chrome version running on your Android device will be displayed.

Every Chrome tab that is open on your Android device will get its own section here. Just below the Chrome version details, you will observe a field called “New tab” that asks you to enter a URL. The page link you enter here will open on a new tab on your Android device.

Additional Functionalities

Once the URL opens, you can click on “Inspect” and a new DevTools instance will open on your development computer. The version of DevTools depends on the version of Chrome running on your Android device. Apart from “Inspect’, you can also “Reload”, “Focus” or “Close” the tab.

You can highlight specific elements in the viewport of your Android device by hovering over the corresponding element in the Elements panel of your DevTools instance. It is possible for you to tap an element on your Android device to select it in the Elements panel.

You can view your Android’s content on your development machine onto a DevTools instance by using the screencast option in the form of the “Toggle Screencast” option. You can easily interact with the screencast in different ways, such as:

  • Holding “Shift”, while dragging to simulate a pinch gesture; or
  • Clicking results into taps, triggering appropriate touch events on the device.

You can use debugging tools, such as js Hybugger which is compatible with Android 2.3.3 or later, to debug Android web apps, mobile web pages (or web views) as well as apps built with PhoneGap, Cordova, Sencha Touch, Ionic or Telerik AppBuilder.

The remote debugging functionality gives you the ability to inspect and view plenty of elements or features of your Android device from the machine that you used for the development of different apps. The best part is that you can use the desktop tools of which you are already aware for debugging the Android device.

Online Mobile Testing with Actual Devices

It helps to test your website using the real mobile devices so that you can get an idea about the real stuff going on with your site. This enables you to spot any potential bugs in the device software that may have resulted in certain unsuitable outcomes.

The actual devices enable you to try out local caching in an appropriate manner and avoid situations where your device’s small cache space gets filled up quickly. Ideally, the best method is to test the website on every major mobile device on which it is likely to be viewed.

The different options for online mobile testing with real devices are as listed under:

Keynote Mobile Testing (DeviceAnywhere)

This service offers testing access to a wide variety of mobile devices, by making use of remote connections to real devices. It can test mobile sites, HTML hybrid as well as native applications on platforms like Linux, Windows and Mac OS X. Keynote provides advanced features to automate the testing process and is pretty simple to handle - simply sign up for an account and install the software.

AppThwack

It can test your site with 333 actual devices (non-rooted phones and tablets) in the cloud. AppThwack is fully automated and possesses real hardware as well as software, along with 24/7 availability.

Accessing Mobile Websites and Consoles in Desktop Browser

You can easily access mobile websites in the browser of your desktop PC / laptop by simply changing the browser’s user agent. You can change the browser’s user agent by installing a browser extension. For example, the extensions below can serve the top internet browsers:

User-Agent Switcher for Chrome

User Agent Switcher for Firefox

You can either work with the browser’s built-in user agent switcher or change it using the extension. You can change the user agent switcher by selecting the corresponding extension from the toolbar and opting for a mobile user agent from the list. Once this setting is done and you manage to refresh the browser, you will witness the mobile version of websites.

You shall continue viewing such mobile versions of different sites till you have selected a mobile user agent. Once you are done with this activity, you need to change the selection to the default user agent option. These steps work as well for opening the console of your mobile site in the desktop browser.

We hope that the information shared about setting up the connection between your Android device and the development computer for remote debugging/troubleshooting proves useful to you. Feel free to share your queries and valuable feedback in the comments section below.

If you like my articles,