Debugging with the Mobile Browser Simulator

You can use the IBM Mobile Foundation Mobile Browser Simulator (MBS) to preview and debug MobileFirst applications.
To use the MBS, open a Command-line window and run the command:

mfpdev app preview

If your application consists of more than one platform - specify the platform to preview:

mfpdev app preview -p <platform>

Important: The preview feature has several known limitations. Your application may not behave as expected during preview. For example, it bypasses security features using a confidential client, so challenge handlers are not triggered.

Mobile Browser Simulator

Simple Preview

Debugging with Ripple

Apache Ripple™ is a web based mobile environment simulator for debugging mobile web applications.
It lets you run a Cordova application in your browser and fake various Cordova features. For example, it can fake the camera API by letting you select a picture locally from your computer.

Installing Ripple

Download and install the latest version of Node.js.
You can verify Node.js installation by typing npm -v in terminal.

Open terminal and type:

npm install -g ripple-emulator

Running application using Ripple

After Ripple is installed open terminal from your Cordova project location and type:

Debugging with Chrome Remote Web Inspector

Using Google Chrome it is possible to remotely inspect web applications on Android devices or the Android Emulator.
This action requires Android 4.4 or later, Chrome 32 or later. Additionally, in the AndroidManifest.xml file, targetSdkVersion = 19 or above is required. In the project.properties file, target = 19 or above is required.

Start the application in the Android Emulator or a connected device.

In Chrome, enter the following URL in the address bar: chrome://inspect.

Press Inspect for the relevant application.

Debugging with MobileFirst Logger

Mobile Foundation provides a WL.Logger object that can be used to print log messages.WL.Logger contains several levels of logging: WL.Logger.info, WL.Logger.debug, WL.Logger.error.

For more information, see the documentation for WL.Logger in the API reference part of the user documentation.

Inspecting the log:

Developer console when previewing a platform using a Simulator or Emulator.

LogCat when it is running on Android device

XCode Console when it is running on an iOS device

Visual Studio Output when it is running on a Windows devices.

Debugging with WireShark

Wireshark is a network protocol analyzer that can be used to see what happens in the network.
You can use filters to follow only what is required.