How to debug an Android WebRatio app

by Ombretta Malinverno
1,470 views Published on Apr 23, 2018
Applies to: 8.0 or higher
Table of contents

Introduction

The WebRatio Mobile Platform lets you build Android and iOS apps that you can test on your mobile device or submit to the Google Play Store or Apple App Store. It is also possible to debug the mobile application to find and solve any issues that may arise during development.

This article guides you step by step in the app debug process, showing how use the Google Chrome browser to test a mobile application for an Android device generated by WebRatio Mobile Platform.

Prerequisites

  • A device with Android 4.4 or higher.
  • The mobile application package installed on your device. You can learn how to build your Mobile Project and get the mobile application package by reading the "How to Build and Test Android Application" article.
  • A USB cable to connect the device to the computer.

Configure Your Workstation

You must configure your workstation, installing the Google Chrome browser. The debug requires the Google Chrome browser to host its debugger user interface. Download the Chrome installer from Google.

Configure Your Android Device

Your Android device must have the USB debugging setting enabled.

  1. Open Settings > Developer Options. If Developer Options is not listed, open About details, tap the Build Number field 7 times, and then select Back to view Developer Options.
  2. Enable the USB Debugging option.

Debug an App on Your Device Using Google Chrome browser

Let’s use the Warehouse Manager app available on the WebRatio Add-Ons as a case study for the mobile application debug. You need to download and create a debug build of the project for your device and install the mobile application.

  1. Connect the device through the USB cable to the computer.
  2. Open the Google Chrome browser and go to the chrome://inspect page. Then enable the "Discover USB devices" option if it is not already enabled.
  3. When the device is detected, authorize the debug from the device.

  1. If the device is plugged-in correctly, you can see the device in the list of connected devices on the page.

  1. Open the Chrome browser to any website (e.g., www.google.com) on a device to test the configuration. The visited page should appear on the list.

  1. Click on the inspect link, and the inspection console will open. If the debug works properly, you should see and be able to inspect the page in the opened console.

  1. Now you can open the app that you want to debug. When it is detected, click on the inspect link and start to debug the app.

Now you can see the same screen of the mobile application visible on the device, and you can use the same debugging tools that are used for debugging with the emulator:

  • Elements
  • Console
  • Sources
  • Network
  • Application