INSPECTING MOBILE APPLICATIONS — RIGHT WAY

HOW TO GUIDE

Inspect and debug mobile application

You have a native or hybrid mobile application, and you are interested in inspecting your mobile application on real devices or simulators, for the purpose of tracking Network responses, Console, Resources, Network Connectivity and so on.

You have particular interest in finding out how to do so? In this post you will learn how to set up your device for inspecting, on your computer’s browser, step by step.

Some of the reasons why would you want to inspect mobile application:

— See errors and warnings

— Track performance while doing various interactions

— Track service responses

— Manipulate with Network connection

— Locate certain element in HTML

— Change geo-location (fake-google-maps-location-from-the-browser)


When testing native application or hybrid mobile application it is important to have the right insight of iOS and Android version.

iOS application can be inspected on real iOS device (iPhone or iPad) and on simulator, with help of Safari browser on Macbook.


iOS

STEPS FOR REAL iOS DEVICE:

STEP 1: Install the app on your iOS device

STEP 2: On iOS device, enable Web Inspector

Settings -> Safari -> Advanced -> Web Inspector

STEP 3: Open up the app you want to inspect

STEP 4: Connect the iOS device and your computer with Lightning Cable

STEP 5: On your Macbook, Open Safari browser

  • Click Develop
  • Click YOUR_PHONE -> index.html
  • You may choose between various choices, e.g. Console, Network to watch out for possible errors during apps user interaction, or to check responses, or other.
  • Console example:
STEPS FOR iOS SIMULATOR DEVICE:

STEP 1: Pull the latest code on desired branch and open up the Xcode

STEP 2: Choose desired iOS simulator and click on PLAY button to create a new build

STEP 3: On your Macbook, Open Safari browser

  • Click Develop
  • Click Simulator -> YOUR_PROJECT

ANDROID

Android app can be inspected on Android device and Chrome browser on your Computer.

Steps for that are :

STEP 1: Install application to your Android device. You usually have release and debug versions. Make sure it is debug version.

Note: If you install release version you will not be able to inspect the app

STEP 2: On Android device, enable Developer options

Settings -> About phone -> Tap multiple times on Build number -> Tap back -> Tap Developer options -> EnableAndroid debugging

STEP 3: Open up the app you want to inspect

STEP 4: Connect the Android device and your computer with cable

STEP 5: On your computer, Open Chrome browser

Right click -> Inspect -> Dev tools-> More Tools -> Inspect devices -> Click on Connected device -> Click Inspect

You can also find complete guide on github:

https://github.com/StipeKolovrat/InspectMobileAppsViaBrowser.

Sharing is caring! Please hit that ❤ and share this article with anyone who might benefit from it.

If you wanna learn more about mobile app testing, I do recommend: Hands-On Mobile App Testing book