Debug on Android Device

Filter by IDE
Select the Progress AppBuilder client you are currently using for development.

IDE

Debugging on device is an experimental feature. You can debug on device from the classic Windows desktop client, the extension for Visual Studio or the command-line interface.

In the Microsoft Visual Studio 2013 and later, you can debug on device using the AppBuilder debug tools or the built-in Microsoft Visual Studio debugger. For earlier versions of Microsoft Visual Studio, you can debug on device only using the AppBuilder debug tools.

You can debug your app while running it on physical device, connected via USB cable or virtual device managed by the native Android emulator. When debugging on device, you can debug only the current web view of the hybrid mobile app.

Prerequisites

  • Verify that your preferred AppBuilder client is running and you are logged in.
  • Verify that your device and application meet the requirements for debugging on device.
    For more information about the prerequisites for debugging on device, see Requirements for Debugging on Device.
  • When debugging with jsHybugger, verify that you have uninstalled any other applications using jsHybugger from the device.

Procedure

In-Browser

Debugging on connected device is an experimental feature and is not applicable to the in-browser client. To debug your applications on a connected device, run the classic Windows desktop client, the extension for Visual Studio or the command-line interface.

Alternatively, you can debug your apps remotely. For more information about remote debugging, see Remote Debugging Chrome on Android.

Windows

For apps developed with TypeScript, you cannot debug the TypeScript source files. You need to debug the transpiled JavaScript files.

On devices running Android 4.4 or later, you can debug applications using the built-in Web Inspector. Debugging sessions are unlimited.

On devices, running Android 4.3 or earlier, you need to add the jsHybugger custom plugin. Without a license, jsHybugger limits your debugging sessions to two minutes. With a license, jsHybugger does not limit your debugging sessions.

IMPORTANT: On Android 5.x and 6.x devices, the AppBuilder debug tools launch with enabled screencast. This might impact the performance of your app and might cause connectivity issues. Consider disabling screencast from the respective toggle in the top bar of the debug tools.

  • To debug on devices running Android 4.4 or later, follow these steps.
    1. Verify that you have connected your physical or virtual device and the extension for Visual Studio recognizes it.
      For more information, see Connect Android Device.
    2. Verify that you have applied the Debug build configuration.
    3. In the main menu bar in the classic Windows desktop client, select RunBuild and deploy and wait for AppBuilder to install the application on your device.
    4. On your device, run the application.
    5. In the classic Windows desktop client, in the status bar, click Show Mobile Devices.
    6. Select your device and click Debug.
    7. Select your app from the list of debuggable apps found on the device.
      AppBuilder lists all apps that are enabled for debugging and are currently running in the foreground or suspended in the background.
    8. Click Attach to attach the debug tools to the device.
  • To debug on devices running Android 4.3 or earlier, follow these steps.
    1. Verify that you have added the jsHybugger custom plugin to your app.
      1. In your browser, navigate to the Download section of the jsHybugger web site.
      2. Download the plugin as a ZIP archive.
      3. Open your app in the classic Windows desktop client or the extension for Visual Studio.
      4. In the Project Navigator, double-click Properties.
      5. In the Plugins tab, navigate to the Custom Plugins section and expand it, if needed.
      6. Click Import and confirm the operation.
      7. Browse and locate the archive that you want to import in AppBuilder, select it and click Open.
      8. Confirm the operation.
        You do not need to reference or call the plugin in your code.
    2. Verify that you have connected your physical or virtual device and the extension for Visual Studio recognizes it.
      For more information, see Connect Android Device.
    3. Verify that you have applied the Debug build configuration.
    4. In the main menu bar in the classic Windows desktop client, select RunBuild and deploy and wait for AppBuilder to install the application on your device.
    5. On your device, run the application.
    6. In the classic Windows desktop client, in the status bar, click Show Mobile Devices.
    7. Select your device and click Debug.
    8. Select your app from the list of debuggable apps found on the device.
      AppBuilder lists all apps that are enabled for debugging and are currently running in the foreground or suspended in the background.
    9. Click Attach to attach the debug tools to the device.

Visual Studio

On devices running Android 4.4 or later, you can debug applications using the built-in Web Inspector. Debugging sessions are unlimited.

On devices running Android 4.4 or later, you can debug applications using the Microsoft Visual Studio built-in debugger in Microsoft Visual Studio 2013 or later.

On devices, running Android 4.3 or earlier, you need to add the jsHybugger custom plugin. Without a license, jsHybugger limits your debugging sessions to two minutes. With a license, jsHybugger does not limit your debugging sessions.

IMPORTANT: On Android 5.x and 6.x devices, the AppBuilder debug tools launch with enabled screencast. This might impact the performance of your app and might cause connectivity issues. Consider disabling screencast from the respective toggle in the top bar of the debug tools.

To debug on Android devices with the AppBuilder debug tools, perform the following steps.

For apps developed with TypeScript, you cannot debug the TypeScript source files. You need to debug the transpiled JavaScript files.

  • To debug on devices running Android 4.4 or later, follow these steps.
    1. Verify that you have connected your physical or virtual device and the extension for Visual Studio recognizes it.
      For more information, see Connect Android Device.
    2. Verify that you have applied the Debug build configuration.
    3. In the main menu bar in Microsoft Visual Studio, select AppBuilderBuild <app_name> and Deploy and wait for AppBuilder to install the application on your device.
    4. On your device, run the application.
    5. In the main menu bar in Microsoft Visual Studio, select AppBuilderDevices List.
    6. Select your device and click Debug.
    7. Select your app from the list of debuggable apps found on the device.
      AppBuilder lists all apps that are enabled for debugging and are currently running in the foreground or suspended in the background.
    8. Click Attach to attach the debug tools to the device.
  • To debug on devices running Android 4.3 or earlier, follow these steps.

    1. Verify that you have added the jsHybugger custom plugin to your app.

      1. In your browser, navigate to the Download section of the jsHybugger web site.
      2. Download the plugin as a ZIP archive.
      3. In the Solution Explorer, right-click Plugins.
      4. Select Import Plugin.
      5. Browse and locate the archive that you want to import in AppBuilder, select it and click Open.

      You do not need to reference or call the plugin in your code.

    2. Verify that you have connected your physical or virtual device and the extension for Visual Studio recognizes it.
      For more information, see Connect Android Device.
    3. Verify that you have applied the Debug build configuration.
    4. In the main menu bar in Microsoft Visual Studio, select AppBuilderBuild <app_name> and Deploy and wait for AppBuilder to install the application on your device.
    5. On your device, run the application.
    6. In the main menu bar in Microsoft Visual Studio, select AppBuilderDevices List.
    7. Select your device and click Debug.
    8. Select your app from the list of debuggable apps found on the device.
      AppBuilder lists all apps that are enabled for debugging and are currently running in the foreground or suspended in the background.
    9. Click Attach to attach the debug tools to the device.

To debug on Android devices with the Microsoft Visual Studio debug tools, perform the following steps.

  1. Verify that you have connected your physical or virtual device and the extension for Visual Studio recognizes it.
    For more information, see Connect Android Device.
  2. Verify that you have applied the Debug build configuration.
  3. In the main menu bar in Microsoft Visual Studio, select AppBuilderBuild <app_name> and Deploy and wait for AppBuilder to install the application on your device.
  4. On your device, run the application.
  5. In the code editor, open the file that you want to debug.
    • If you are using JavaScript to develop your app, open the JS file that you want to debug.
    • If you are using TypeScript to develop your app, open the TS file that you want to debug.
      If you do not have the "sourceMap": true or the "inlineSourceMap": true compiler option in your tsconfig.json file, you will not be able to debug your TypeScript sources using the Microsoft Visual Studio built-in debug tools.
  6. In the leftmost margin of the code editor, click next to a line number to set a breakpoint.
    You can set breakpoints this way at any point of the debugging process.
  7. In the Standard toolbar, from the Start Debugging drop-down menu, select your device.
  8. Click Start Debugging.
  9. Debug your app with the built-in debugger.
    For more information, see How Do I... Topics: Debugger.

CLI

For apps developed with TypeScript, you cannot debug the TypeScript source files. You need to debug the transpiled JavaScript files.

On devices running Android 4.4 or later, you can debug applications using the built-in Web Inspector on Windows systems or Google Chrome on macOS systems. Debugging sessions are unlimited.

On devices, running Android 4.3 or earlier, you need to add the jsHybugger custom plugin. Without a license, jsHybugger limits your debugging sessions to two minutes. With a license, jsHybugger does not limit your debugging sessions.

IMPORTANT: On Android 5.x and 6.x devices, the AppBuilder debug tools launch with enabled screencast. This might impact the performance of your app and might cause connectivity issues. Consider disabling screencast from the respective toggle in the top bar of the debug tools.

  • To debug on devices running Android 4.4 or later, follow these steps.

    1. Verify that you have connected your device.
    2. Run the following command to verify that AppBuilder recognizes your connected device.

      appbuilder device
      
    3. Run the following command to deploy your app on the connected device.

      appbuilder deploy android
      
    4. Wait for the build and deployment process to complete.
    5. On your device, run the application.
    6. Run the following command to launch the debug tools.

      appbuilder debug android
      
    7. On Windows systems, complete the following steps:

      1. If prompted, unlock your device and confirm that you trust the computer and click OK in AppBuilder.
      2. Select your device.
      3. Select your app from the list of debuggable apps found on the device.
        AppBuilder lists all apps that are enabled for debugging and are currently running in the foreground or suspended in the background.
      4. Start debugging your app.
    8. On macOS systems, complete the following steps:
      1. Open Google Chrome and paste the address provided by the command-line interface. For example: chrome://inspect:50272
      2. Locate the device on which you want to debug in the Devices tab.
      3. From the available web views, locate the one for your app and click Inspect.
      4. Start debugging your app.
  • To debug on devices running Android 4.3 or earlier, follow these steps.

    1. Verify that you have added the jsHybugger custom plugin to your app.
      1. In your browser, navigate to the Download section of the jsHybugger web site.
      2. Download the plugin as a ZIP archive and extract it.
      3. Place the extracted plugin in the Plugins folder in your app.
        You do not need to reference or call the plugin in your code.
    2. Verify that you have connected your device.
    3. Run the following command to verify that AppBuilder recognizes your connected device.

      appbuilder device
      
    4. Run the following command to deploy your app on the connected device.

      appbuilder deploy android 
      
    5. Wait for the build and deployment process to complete.
    6. On your device, run the application.
    7. Run the following command to launch the debug tools.

      appbuilder debug android
      
    8. On Windows systems, complete the following steps:

      1. If prompted, unlock your device and confirm that you trust the computer and click OK in AppBuilder.
      2. Select your device.
      3. Select your app from the list of debuggable apps found on the device.
        AppBuilder lists all apps that are enabled for debugging and are currently running in the foreground or suspended in the background.
      4. Start debugging your app.
    9. On macOS systems, complete the following steps:
      1. Open Google Chrome and paste the address provided by the command-line interface. For example: chrome://inspect:50272
      2. Locate the device on which you want to debug in the Devices tab.
      3. From the available web views, locate the one for your app and click Inspect.
      4. Start debugging your app.

Next Steps

Continue writing your code.

See Also

Start a free trial Request a demo
Contact us: +1-888-365-2779
sales@telerik.com
Copyright © 2016-2017, Progress Software Corporation and/or its subsidiaries or affiliates. All rights reserved.