--- parser: v2 auto_validation: true primary_tag: software-product>mobile-development-kit-client tags: [ tutorial>intermediate, operating-system>ios, operating-system>android, topic>mobile, software-product>sap-business-technology-platform, software-product>sap-mobile-services, software-product>mobile-development-kit-client, software-product>sap-mobile-services, software-product>sap-build-code, software-product>sap-build, software-product>sap-business-application-studio] time: 30 author_name: Jitendra Kansal author_profile: https://github.com/jitendrakansal slug: cp-mobile-dev-kit-debugging canonical_url: https://developers.sap.com/tutorials/cp-mobile-dev-kit-debugging --- # Debug Your Mobile Development Kit Application Learn how to effectively troubleshoot and resolve issues in your mobile development kit (MDK) application through comprehensive debugging techniques. ## Prerequisites - **Tutorial**: [Set Up Initial Configuration for an MDK App](https://developers.sap.com/tutorials/cp-mobile-dev-kit-ms-setup.html) - **Download and Install Visual Studio Code** from [here](https://code.visualstudio.com/download) - **Download the latest version of mobile development kit SDK** either from the SAP community [trial download](https://developers.sap.com/trials-downloads.html?search=Mobile+Development+Kit) or [SAP Software Center](https://me.sap.com/softwarecenter) if you are a SAP Mobile Services customer ## You will learn - How to install MDK Extension in Visual Studio Code - How to generate a debug configuration file - How to set breakpoints in a rule - How to use the debug console ## Intro Use the debugging feature provided by the mobile development kit extension for Visual Studio Code to debug your MDK app after bundling it. You can set breakpoints, inspect scope variables, watch expressions, or execute JavaScript code in the rule files. --- ### Create a New Project Using SAP Build and Configure it using Storyboard 1. This step includes creating the mobile development kit project in the editor. Follow steps 1 and 2 from this [tutorial](https://developers.sap.com/tutorials/cp-mobile-dev-kit-quick-start.html) to create your MDK project and deploy to mobile services. 2. Close the onboarding QR code window, as it is not needed for this tutorial. ### Download your MDK metadata project from SAP Business Application Studio You will download your MDK project to your local machine. This will be necessary for setting a breakpoint in a rule file in step 9. An alternative option is to use a GitHub repository. See [Git Source Control guide](https://help.sap.com/docs/bas/sap-business-application-studio/git-source-control) for more details. 1. In SAP Business Application Studio, make sure not to select any file or folder under **Explorer**, right-click on the blank area and select **Download**. ![BAS Explorer Right-Click Download Option](https://raw.githubusercontent.com/sap-tutorials/sap-mobile-development-kit/main/tutorials/cp-mobile-dev-kit-debugging/img-3.1.png) 2. A file named `MDKApp.tar` will be downloaded to your machine. Extract the metadata files from the downloaded archive. ### Create and run MDK client 1. Follow the [Build Your Mobile Development Kit Client Using MDK SDK](https://developers.sap.com/tutorials/cp-mobile-dev-kit-build-client.html) tutorial to create your branded MDK client and run it on a simulator or a device. 2. After successfully onboarding your mobile client, click **Now** to accept the app update. 3. Leave the client running. You will connect the debugger to this client in step 9. ### Install MDK Extension in Visual Studio Code In the Visual Studio Code, click the **Extensions** pane and install the **Mobile Development Kit Editor** extension. Alternatively, you can download and install the MDK extension for VS Code from the [SAP Software Center](https://me.sap.com/softwarecenter/template/products/%20_APP=00200682500000001943&_EVENT=DISPHIER&HEADER=Y&FUNCTIONBAR=N&EVENT=TREE&NE=NAVIGATE&ENR=73554900100900003111&V=MAINT&TA=ACTUAL&PAGE=SEARCH/MDK%20VSCODE%20EXTENSION%201.0) (applicable to SAP Mobile Services customer). ![VS Code Extensions Pane MDK Editor Install](https://raw.githubusercontent.com/sap-tutorials/sap-mobile-development-kit/main/tutorials/cp-mobile-dev-kit-debugging/img-5.1.png) ### Open the MDK metadata project in VS Code Open the extracted `mdkapp` folder in the VS Code. ![MDK App Folder Opened In VS Code](https://raw.githubusercontent.com/sap-tutorials/sap-mobile-development-kit/main/tutorials/cp-mobile-dev-kit-debugging/img-6.1.png) ### Create and Configure your launch.json You will add your debug configurations in `launch.json` file. 1. To generate the default launch configuration file, select **Run and Debug** in the icon panel. ![VS Code Run And Debug Panel Selected](https://raw.githubusercontent.com/sap-tutorials/sap-mobile-development-kit/main/tutorials/cp-mobile-dev-kit-debugging/img-7.1.png) 2. Click `create a launch.json file` option. ![Create Launch JSON File Option](https://raw.githubusercontent.com/sap-tutorials/sap-mobile-development-kit/main/tutorials/cp-mobile-dev-kit-debugging/img-7.2.png) 3. Select `MDK` as the debugger type from the list. ![MDK Debugger Type Selection](https://raw.githubusercontent.com/sap-tutorials/sap-mobile-development-kit/main/tutorials/cp-mobile-dev-kit-debugging/img-7.3.png) 4. A `launch.json` file will be generated. ![Generated Launch JSON File](https://raw.githubusercontent.com/sap-tutorials/sap-mobile-development-kit/main/tutorials/cp-mobile-dev-kit-debugging/img-7.4.png) 5. 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 output. If you have launched your MDK branded client from terminal or command line via `ns run ios` or `ns run android` command, you do not need to set the `appRoot` attribute for MDK **Launch** configurations. You can only set the `appRoot` attribute for MDK **Attach** configurations. Put a comma after `watch` attribute and add `appRoot` attribute. Provide the path to your MDK client project folder. ![Launch JSON AppRoot Attribute Configuration](https://raw.githubusercontent.com/sap-tutorials/sap-mobile-development-kit/main/tutorials/cp-mobile-dev-kit-debugging/img-7.5.png) ### Attach the debugger to your MDK Client >Make sure you are choosing the right device platform tab above. >You can debug Android clients from either Window or Mac. iOS clients can only be debugged using a Mac. [OPTION BEGIN [Android]] 1. Select the **MDK Attach on Android** configuration from the drop-down, and click the *green play icon* or select **Run** Menu > **Start Debugging**. ![MDK Attach Android Configuration Selected](https://raw.githubusercontent.com/sap-tutorials/sap-mobile-development-kit/main/tutorials/cp-mobile-dev-kit-debugging/img-8.1.png) >In this tutorial, MDK client was launched via terminal or command line window back in step 4. So, the **MDK Attach** configuration option is selected in the dropdown. 2. Once the debugger is attached to your MDK client, you will see an orange bar appearing in the VS Code. ![Debugger Attached Orange Bar VS Code Android](https://raw.githubusercontent.com/sap-tutorials/sap-mobile-development-kit/main/tutorials/cp-mobile-dev-kit-debugging/img-8.2.png) [OPTION END] [OPTION BEGIN [iOS]] 1. Select the **MDK Attach on iOS** configuration from the drop-down, and click the *green play icon* or select **Run** Menu > **Start Debugging**. ![MDK Attach iOS Configuration Selected](https://raw.githubusercontent.com/sap-tutorials/sap-mobile-development-kit/main/tutorials/cp-mobile-dev-kit-debugging/img-8.3.png) >In this tutorial, MDK client was launched via terminal window back in step 4. So, the **MDK Attach** configuration option is selected in the dropdown. 2. click allow accepting incoming network connections. ![Allow Incoming Network Connections Dialog](https://raw.githubusercontent.com/sap-tutorials/sap-mobile-development-kit/main/tutorials/cp-mobile-dev-kit-debugging/img-8.4.png) 3. Once the debugger is attached to your MDK client, you will see an orange bar appearing in the VS Code. ![Debugger Attached Orange Bar VS Code iOS](https://raw.githubusercontent.com/sap-tutorials/sap-mobile-development-kit/main/tutorials/cp-mobile-dev-kit-debugging/img-8.5.png) [OPTION END] ### Set Breakpoints in a rule As the debugger is attached, you can now set breakpoints, inspect scope variables, watch expressions, or execute JavaScript code in the rule files. >Make sure you are choosing the right device platform tab above. [OPTION BEGIN [Android]] 1. Switch to the **Explorer** view to access MDK project. ![Explorer View MDK Project Access](https://raw.githubusercontent.com/sap-tutorials/sap-mobile-development-kit/main/tutorials/cp-mobile-dev-kit-debugging/img-9.1.png) 2. To set a breakpoint, navigate to `Rules` | `com_sap_edm_sampleservice_v4` | `Customers` | `Customers_DeleteConfirmation.js` and click on line 8 where you want to set your breakpoint. Click the margin that you can find on the left of the line number. Alternatively, you can toggle the breakpoint from **Run** menu > **Toggle Breakpoint**. ![Setting Breakpoint In Rule File Android](https://raw.githubusercontent.com/sap-tutorials/sap-mobile-development-kit/main/tutorials/cp-mobile-dev-kit-debugging/img-9.2.gif) 3. In your MDK client, navigate to **Customers** | click on any customer record | **More** | **Delete** to trigger the rule. ![MDK Client Customer Delete Action Android](https://raw.githubusercontent.com/sap-tutorials/sap-mobile-development-kit/main/tutorials/cp-mobile-dev-kit-debugging/img-9.3.png) 4. Click **OK** to confirm. ![Delete Confirmation OK Dialog Android](https://raw.githubusercontent.com/sap-tutorials/sap-mobile-development-kit/main/tutorials/cp-mobile-dev-kit-debugging/img-9.4.png) 5. Execution stops at the breakpoint. ![Execution Stopped At Breakpoint Android](https://raw.githubusercontent.com/sap-tutorials/sap-mobile-development-kit/main/tutorials/cp-mobile-dev-kit-debugging/img-9.5.png) 5. Use debugging capabilities in VS code to step over or into code, inspect variables, set watch points, and more. See the Visual Studio Code documentation on [Debug actions](https://code.visualstudio.com/Docs/editor/debugging#_debug-actions), [breakpoints](https://code.visualstudio.com/Docs/editor/debugging#_breakpoints), [Data inspection](https://code.visualstudio.com/Docs/editor/debugging#_data-inspection) and [Advanced breakpoint topics](https://code.visualstudio.com/Docs/editor/debugging#_advanced-breakpoint-topics). [OPTION END] [OPTION BEGIN [iOS]] 1. Switch to the **Explorer** view to access MDK project. ![Explorer View MDK Project Access iOS](https://raw.githubusercontent.com/sap-tutorials/sap-mobile-development-kit/main/tutorials/cp-mobile-dev-kit-debugging/img-9.1.png) 2. To set a breakpoint, navigate to `Rules` | `com_sap_edm_sampleservice_v4` | `Customers` | `Customers_DeleteConfirmation.js` and click on line 8 where you want to set your breakpoint. Click the margin that you can find on the left of the line number. Alternatively, you can toggle the breakpoint from **Run** menu > **Toggle Breakpoint**. ![Setting Breakpoint In Rule File iOS](https://raw.githubusercontent.com/sap-tutorials/sap-mobile-development-kit/main/tutorials/cp-mobile-dev-kit-debugging/img-9.6.gif) 3. In your MDK client, navigate to **Customers** | click on any customer record | **More** | **Delete** to trigger the rule. ![MDK Client Customer Delete Action iOS](https://raw.githubusercontent.com/sap-tutorials/sap-mobile-development-kit/main/tutorials/cp-mobile-dev-kit-debugging/img-9.7.png) 4. Click **OK** to confirm. ![Delete Confirmation OK Dialog iOS](https://raw.githubusercontent.com/sap-tutorials/sap-mobile-development-kit/main/tutorials/cp-mobile-dev-kit-debugging/img-9.8.png) 5. Execution stops at the breakpoint. ![Execution Stopped At Breakpoint iOS](https://raw.githubusercontent.com/sap-tutorials/sap-mobile-development-kit/main/tutorials/cp-mobile-dev-kit-debugging/img-9.9.png) 6. Use debugging capabilities in VS code to step over or into code, inspect variables, set watch points, and more. See the Visual Studio Code documentation on [Debug actions](https://code.visualstudio.com/Docs/editor/debugging#_debug-actions), [breakpoints](https://code.visualstudio.com/Docs/editor/debugging#_breakpoints), [Data inspection](https://code.visualstudio.com/Docs/editor/debugging#_data-inspection) and [Advanced breakpoint topics](https://code.visualstudio.com/Docs/editor/debugging#_advanced-breakpoint-topics). [OPTION END] ### Use Debug Console 1. Let's check if there is already `result.data` available. Switch to the **DEBUG CONSOLE** tab, enter `result.data` and press enter. ![Debug Console Result Data Query](https://raw.githubusercontent.com/sap-tutorials/sap-mobile-development-kit/main/tutorials/cp-mobile-dev-kit-debugging/img-10.1.gif) 2. As `result.data` is true, the `Customers_DeleteEntity.action` will be executed when pressing the play icon on the **Debug Toolbar**. ![Debug Toolbar Play Icon Delete Action](https://raw.githubusercontent.com/sap-tutorials/sap-mobile-development-kit/main/tutorials/cp-mobile-dev-kit-debugging/img-10.2.png) 3. To disconnect your debugger, click the red stop icon in the floating bar. Alternatively, you can do it via **Run** menu> **Stop Debugging**. You have learned how to debug an mobile development kit client application. Find more information about debugging in MDK in [help documentation](https://help.sap.com/doc/f53c64b93e5140918d676b927a3cd65b/Cloud/en-US/docs-en/guides/getting-started/mdk/vscode/debugging-mdk-app-with-vscode-debugger.html). ---