Skip to content

Debugging Apps

Use the debugging feature provided with the Mobile Development Kit extension for Visual Studio Code to debug a modified 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 configuration or alter the existing one by modifying the launch.json file. To generate the default launch configuration file (launch.json), click the gear icon in the Debug view, and choose the MDK debug configuration.
  • In the user setting file, set the appRoot attribute. Setting this attribute sets the default appRoot for all Mobile Development Kit launch configurations. To override the default user setting value for any debug launch configuration, specify the appRoot in the launch configuration.

Procedure

  1. Select Debug > Start Debugging.

    If no Mobile Development Kit launch configuration is available yet, choose MDK.

    Two 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.

    You can run your program without debugging it by selecting Start Without Debugging.

    Only base applications are listed in the debugger. If only a single base application is present, and has been successfully bundled, the debugger triggers a NativeScript command (tns), which builds, deploys, and runs your app in an iOS or Android simulator and attaches the Visual Studio Code debugger to it.

    If multiple base apps are present, the debugger displays a list of all the bundled apps. Choose the one you want to run or debug.

    The commands that set the default simulator for the debugger are MDK: Set Default iOS Simulator and MDK: Set Default Android Simulator. 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. In watch mode, the client app that's being debugged is relaunched automatically once the bundling is completed.

    You can turn this behavior off by selecting Code > Preferences > Settings and marking "mdk.bundleToAppRoot": false in the User Settings window.

  3. To set a breakpoint, click in the left margin of the editor.

    You can enable, disable, or reapply a breakpoint using the BREAKPOINTS section of the DEBUG view.

  4. To stop the debugger execution, click Disconnect or Stop in the floating bar.

Debugging on the Device

The Mobile Development Kit client can be built for an individual target, on either a device or a simulator on any given platform (Android or iOS). Once you have successfully built the client for either of those targets, it won't run on another. The Mobile Development Kit Visual Studio Code extension can automatically detect a Mobile Development Kit client that is specified in the appRoot in launch.json or mdk.debugAppRoot in user settings.json is for device or simulator.

However, 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.

Provisioning profiles include certificates, app IDs, device IDs, and entitlements. The provisioning profiles define the rules for running an app inside a device. A provisioning profile confirms the following things about an app:

  • It has an app ID.
  • It can run only on the devices specified in the provisioning profile. Development provisioning profiles include a list of devices; distribution provisioning profiles do not.
  • The app only has the entitlements that are defined in the provisioning profile.
  • The app can run only on the trustcertificate embedded in the provisioning profile.

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.debugAppRoot 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.

An Mobile Development Kit client for iOS should already be built for device or simulator exclusively. 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.

Live Mode Debugging

You can use the Mobile Development Kit Visual Studio Code extension for live-mode debugging in Visual Studio Code. The live mode debugging means to debug a Mobile Development Kit application deployed by the SAP Cloud Platform Mobile Services.

Follow these steps to enable live-mode debugging:

Note

We recommend that you use a git repository to keep the source code synchronized between SAP Web IDE Full-Stack and Visual Studio Code more efficiently. Otherwise, developers must manually export the Mobile Development Kit application from SAP Web IDE Full-Stack, 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 live-mode debugging without deploying a source map file via SAP Web IDE Full-Stack.

In some cases, especially in a production environment, once the Mobile Development Kit metadata application is deployed to SAP Cloud Platform 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 downloads from the SAP Web IDE Full-Stack editor deploy process. 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.

Bundling Mobile Development Kit App with Visual Studio Code Build Task

Component Application Development

Restrictions and Troubleshooting


Last update: August 12, 2020