Skip to content

Debugging Apps

Use the debugging feature provided with the Mobile Development Kit extension for Visual Studio Code to debug a Mobile Development Kit app after you have bundled it. You can set breakpoints, inspect scope variables, watch expressions, or execute JavaScript code in the rule files.

Prerequisites

  • Bundle an app that was developed using either the Mobile Development Kit editor or the Mobile Development Kit extension for Visual Studio Code.
  • Add your own debug configurations or alter the existing one by modifying the launch.json file. To generate the default launch configuration file (launch.json), select Run and Debug in the icon panel and click create a launch.json file option. Select MDK as the debugger type from the list.
  • In the launch.json file, set the appRoot attribute for appropriate Mobile Development Kit launch configurations. This should be the path to your create-client command's output.

Note

This will override the client location specified in the Settings > MDK: Debug App Root.

Procedure

  1. Select the appropriate RUN AND DEBUG configuration from the drop-down, and click the green play icon next to the drop-down or select Run Menu > Start Debugging.

    Two view panels show the status of the debugging process. The DEBUG CONSOLE view shows device-related logs, while the OUTPUT view shows all other NativeScript related logs.

    !!! note "Note" You can run your Mobile Development Kit client without debugging it by selecting Run Without Debugging.

    If multiple Mobile Development Kit apps are present in your VS code workspace, the debugger displays a list of all the bundled apps. Choose the one you want to run or debug.

    To set a default simulator type for the debugger, use the MDK: Set Default iOS Simulator and MDK: Set Default Android Simulator commands. All the available simulators are listed after choosing any command, the selected default one is on the top of the list in the next time. Then in debug time, the debugger launches the default one based on the debug configuration platform, instead of the unexpected default one from NativeScript tns command line.

  2. The client app that's being debugged is relaunched automatically once the bundling is completed. When the client is relaunched, any attached debugger will be disconnected and you will have to relaunch or restart the debugger in the VS code.

    You can turn this behavior off by choosing Code > Preferences > Settings and deselecting MDK: Bundle To App Root in the User Settings window.

    Note

    If you had previously deployed your application to mobile services app update, you may have to use those definitions when the client starts. To debug the definitions from the VS code, do not accept the app update definitions. See App Update debugging for more information.

  3. To set a breakpoint, open a rule in the editor and click on a line where you want to set your breakpoint. From the menu, select Run > Toggle Breakpoint or click the margin that you can find on the left of the line number to toggle the breakpoint.

  4. In your application, navigate/trigger the rule. Execution should stop at your breakpoint. Use debugging capabilities in VS code to step over/into code, inspect variables, set watch points, and more.

    Note

    For more details on debugging within VS code, please refer the VS code documentation.

  5. To disconnect your debugger, select Run > Stop Debugging or click the red stop icon in the floating bar.

Debugging on the Device

Instead of debugging the client running in the simulator, you can run the client on an attached physical device.

In your launch.json file, add a new "tnsArgs" key under the required configurations.

For example: "tnsArgs": ["--device 1234"] Where 1234 is the device ID that can be obtained by running tns devices.

Please note that if your device is running on iOS, you have a few things to consider.

On an iOS device, you have the ability to sign your app to debug the Mobile Development Kit client. To deploy your app on a device, you must sign the app to ensure that you are from a known source. You can sign it using either a team ID or provisioning profiles.

The team ID is a unique identifier for each development team; you can find it in the Apple Developer portal, in the membership section.

One use case of debugging on a device if you are working with Push notification.

For debugging on a device running on iOS, you can use Launch on iOS or Attach on iOS.

The extension automatically starts the code signing process if you specify your appRoot or MDK: Bundle to App Root to an Mobile Development Kit client built for a device.

If you select Launch on iOS, the Mobile Development Kit extension for Visual Studio Code needs a team ID or a provisioning profile file to sign the Mobile Development Kit client before you can deploy the app on a device. The extension can gather all team IDs and provisioning profile files you've ever downloaded using Xcode along with your Apple ID. You can also use Import iOS provisioning profile to import a provisioning profile file from the Apple Developer portal. Import iOS provisioning profile copies a provisioning profile file to a specific location (in the same manner as Xcode), and also keeps its name in user settings. After importing, the provisioning profile name appears as the first line on the list of provisioning profile files.

The Mobile Development Kit extension for Visual Studio Code shows a list containing all team IDs and the provisioning profile names when you try to debug a Mobile Development Kit client on a connected device. After selecting a team ID or the provisioning profile profiling name, you can debug the Mobile Development Kit client on the device.

Note

Consider the following when deciding whether to use a team ID or a provisioning profile:

  • iOS team ID This option is straightforward and the Mobile Development Kit extension for Visual Studio Code can dynamically collect all existing team IDs based on the local environment. One limitation is that not every developer is on the same team as the application release team, so may not be an optimal scenario during iOS device debugging.
  • iOS provisioning profile Developers could use their own profiles to sign the app and do the debugging.

App Update Debugging

The app update debugging means to debug a Mobile Development Kit application using metadata definitions that are deployed in the SAP Mobile Services, App Update feature.

Mobile Development Kit client automatically checks and downloads new version of the deployed metadata definitions from App Update.

Developers can also add an action to their application to allow users to check for updates.

If you are using definitions from App Update and you want to create a new bundle, use the MDK: Deploy command instead of the Build task. App Update definitions take priority over the bundle.js branded into the client.

Follow these steps to enable app update debugging:

Note

We recommend that you use a git repository to keep the source code synchronized between SAP Business Application Studio and Visual Studio Code more efficiently. Otherwise, developers must manually export the Mobile Development Kit application from SAP Business Application Studio, unzip the exported file to a local folder, then open it in Visual Studio Code.

For iOS simulators, the Attach Source Map command lets you manually attach the source map to an Mobile Development Kit client app installed in the active iOS simulator. This is a workaround that lets you work with app update debugging without deploying a source map file via SAP Business Application Studio.

Note

The command Attach Source Map works only on iOS simulator.

In some cases, especially in a production environment, once the Mobile Development Kit metadata application is deployed to SAP Mobile Services without enabling the source map option, do not redeploy it with the source map option enabled.

Once the Attach Source Map command triggers, choose the source map file, which can be downloaded from the SAP Business Application Studio editor. The selected file is copied to the corresponding folder location in the active iOS or Android simulators with the Mobile Development Kit client app installed.

In order to download the source map file from the SAP Business Application Studio editor, please follow these steps:

  • Once the deployment is successful, you will find a new folder .build generated under your Mobile Development Kit project. Expand it and you will find the file bundle.js.map.
  • Download it to your machine by right-clicking on it.

Bundling Mobile Development Kit App with Visual Studio Code Build Task

Component Application Development


Last update: December 1, 2022