Debugging a Cordova Project Using Visual Studio Code

Perform the following steps to set up the Debug environment for Cordova debugging:

  1. Click on the Debug icon in Visual Studio Code and then select the Configure gear icon in the toolbar.

  2. Select the Cordova environment from the list.

The launch.json file for Visual Studio Code is set up for use with the available debug environment configurations. This file defines the debug configurations that are available to launch from Visual Studio Code. You can modify the default configurations or add new ones to the list, if required. For more information on available configuration options, visit

https://docs.microsoft.com/en-us/visualstudio/cross-platform/tools-for-cordova/?view=toolsforcordova-2017

Perform the following steps to test your application using the supported simulators, emulators, and devices:

  1. Select the configuration for debugging from the list available next to the Debug Start button.

  2. Click on the Debug Start button to launch the debug session.

  3. Simulating the app on a browser launches Chrome browser which displays your app. At the same time, the cordova-simulate window appears inside Visual Studio Code displaying the device specific attributes that can be modified to simulate a device.

    Note: Debugging with the Chrome Simulator for iOS as well as Android can be performed on both Windows and Mac machines.

Perform the following steps to debug using an emulator:

For iOS

  1. Ensure you are on a Mac machine.

  2. Choose the Run iOS on Simulator debug option in Visual Studio Code.

  3. Start debugging.

  4. The iOS Simulator starts running and loads the hybrid App.

Note: To debug iOS hybrid apps on an emulator or device, you need a Mac OS X environment. To build the iOS app package that can be installed on an iOS emulator or device, you need the XCode Development environment running on a Mac.

For Android

  1. Ensure you are on either a Mac or Windows machine.

  2. Start the desired emulator from the Android Device Manager.

  3. Choose Run Android on Emulator.

  4. Start debugging.

    The application loads in the running emulator.

Perform the following steps to debug on a device:

For iOS

  1. Ensure you are on a Mac machine.

  2. Connect your iOS device to the Mac using a USB cable.

  3. Open the project in XCode.

  4. In the navigation panel, click on the top-level folder for your project.

    A series of tabs appear in the main panel.

  5. Under General tab, for Signing section, provide values for Team Name, Provisioning Profile, and Signing Certificate options.

  6. Under Build Settings tab, for Build Active Architecture Only, ensure that the Debug configuration is selected.

  7. Open the project in Visual Studio Code.

  8. Choose the Run iOS on Device debug option in Visual Studio Code.

  9. Start debugging.

    The hybrid app is built and deployed to the connected device. The app then starts on your device.

Notes:

  • Perform steps 3 to 6 only the first time you debug the application on a device. Subsequent times, you can make the code changes in Visual Studio Code and debug the project from Visual Studio Code itself.

  • To debug iOS hybrid apps on an emulator or device, you need a Mac OS X environment. To build the iOS app package that can be installed on an iOS emulator or device, you need the XCode Development environment running on a Mac.

For Android

  1. Ensure you are on either a Mac or Windows machine.

  2. Connect your device to the Mac or Windows using a USB cable.

  3. Choose Run Android on Device.

  4. Start debugging.

    The hybrid app is built and deployed to the connected device. The app then starts running on your device.