Debug your MDK app with Visual Studio Code & Android Studio.

Debugging code is one of the most useful tools in the developer’s belt. If you are just getting into Mobile Development Kit (MDK) you might notice that there’s not much coding at first and you just find yourself focusing into the business logic part of your project. But once you get into more complex scenarios, you’ll most definitely need to write your own JavaScript rules. MDK’s extension for Visual Studio Code allows us to set breakpoints in our code and debug it during runtime, as well as make us of a variety of very useful console log features. In this guide, I will show you how to achieve this.

Prerequisites

• Have an MDK app ready to be deployed and debugged. If you still don’t know how to do this, let me point you in direction of this great tutorial: Get Started with the Mobile Development Kit.

• Have Visual Studio Code installed and Visual Studio Code’s MDK extension as well (you can easily find it by searching for it in VSC’s extension marketplace).

• Export your app’s project from your IDE and then import it into a Visual Studio Code workplace. The recommended way to do this is by using a GitHub repository. If you don’t know how to do this with the Business Application Studio IDE, this guide might come in handy: How to setup GIT in SAP Business Application Studio

• Have Android Studio installed (If you followed the tutorial from the previous step you should already have it)

1) Build your own MDK client using MDK SDK.

Have the latest version of Mobile Development Kit SDK installed and build your app’s client with it. This topic is already explained in this tutorial: Build Your Mobile Development Kit Using MDK SDK. The author of the tutorial did a great job explaining how to do that so, to avoid redundancy, I won’t get into much details about it.

2) Configure your Visual Studio Code workplace and MDK extension.

Now in Visual Studio Code we have a few configuration steps left before we are able to start running and debugging our app.

First click on VSC’s ‘Extensions’ tab, look for the Mobile Development Kit extension and click on its gear icon, then select the ‘Extension Settings’ option:

In the extension settings you need to populate the ‘Mdk: Debug App Root’ field with the folder path that contains your app’s client:

And then the ‘Mdk: Mobileservice’ field with the following key-value items:

You can find the value for your adminAPI by logging into your Mobile Services cockpit, clicking on ‘Important Links’ in the bottom left of your welcome screen, and then clicking on ‘Copy Admin API’:

Now go to your Visual Studio Code workspace and bundle your app by clicking on ‘Terminal’ -> ‘Run Build Task’ -> ‘MDK: bundle build’.

For our next step go into VSC’s ‘Debug’ tab, click on the gear icon and choose ‘MDK Debug Configuration’:

This will generate a brand new ‘launch.json‘ file where you’ll once again populate the ‘appRoot’ property with the folder path to your app’s client build:

Now perform a fresh deploy from Visual Studio Code to update your project’s source map, you can achieve this by right-clicking your Application.app file and selecting ‘MDK: Deploy’:

3) Import your project into Android Studio and get your emulator running.

First of all, you need to import your app’s project into the Android Studio workplace. To do that you need to click on the ‘File’ menu -> ‘New” -> ‘Import Project…’.

Then you look for the folder where you created your app’s client earlier, you select ‘Create project form existing sources’, and you click on ‘Next’.

You chose a name for your project, in my case I left it by default, and you click ‘Next’ once more:

Android Studio will now begin to generate the index files for your project, wait a few seconds until it’s done and then get your emulator running, to do that you need to open Android Studio’s Virtual Device Manager from the top right corner of the screen, and then hit the ‘Launch this AVD in the emulator‘ button.

(If this is your first time using Android Studio you might need to quickly create a new virtual device first).

4) Install your app in your Android emulator, run it, and start debugging!

For our final step we need to install your app’s build into your Android emulator. To do this first make sure your Android Studio emulator is still running, then open a terminal in Visual Studio Code and navigate to your project’s folder using the ‘cd <folder path>’ command:

You will now install your app into your virtual device using the ‘tns run android –device <Device ID>’ command:

(You can find your emulator’s device ID by using the ‘tns device’ command)

Your terminal will now start installing your app into your virtual device, once it’s done you’ll be able to run it and start debugging your code.

While you wait, go ahead and set your first breakpoint in one of your rules:

Look for your freshly installed app’s icon in your virtual device’s menu and once it’s up and running select the ‘MDK: Attach on Android’ option in VSC’s debugger tab, and click on ‘Start Debugging’:

If attached successfully, your status bar should turn orange while you are still in a debugging session:

From your running app, trigger the event that’s assigned to the rule where you set your breakpoint earlier and start debugging your code:

Additional debugging features you can make use of:

Before creating your app’s client using MDK SDK, you edited your ‘BrandedSettings.json’ file according to your needs. This configuration file contains a ‘DebugSettings’ property that you can further customize:

For more information about what these settings do and how you can get the best out of them you can check it’s documentation.