Using the Debug (Preview) Tab

The Debug tab provides remote on-device debugging of HTML5 code without requiring a build and install step. Remote debugging is provided by the Google Chrome* Developer Tools (CDT), which includes full JavaScript* debugging with breakpoints and profiling; features that are not possible when using the weinre* debug tools.

NOTE: This tab functions only after you connect an Android* 4.x device to your development system with a USB cable. That device must be configured for USB debugging. You do not have to "root" your device to use this feature. See the Test tab function for a more limited remote debug feature that works with Android 2.3+, Apple iOS* and Microsoft Windows* 8 devices.

With this feature you can develop HTML5 code in the Intel XDK and immediately test and debug your application remotely from within the Intel XDK while it runs on a USB-connected Android device.

An Intel XDK component called App Preview Crosswalk is automatically downloaded and installed over the USB connection onto your Android device the first time you use this feature. App Preview Crosswalk enables remote debugging (via CDT) and JavaScript profiling. Using CDT remotely, you can set breakpoints in the code running on your Android device, inspect variables, single step through you code, monitor DOM events, modify CSS and use the standard CDT profiling tools.

Remote debugging via App Preview Crosswalk is enabled by the Crosswalk* portable application runtime. App Preview Crosswalk is an Apache Cordova* container based on the Crosswalk Project.

Debug Tab Requirements

When you debug your application with this feature the Intel XDK pushes your application to the App Preview Crosswalk portable runtime (aka webview or container) on your attached Android device. The Crosswalk portable runtime is built on top of the Chromium* content module and Blink* rendering and layout engine. This means that it shares many of the features found in the Google Chrome* browser on your desktop. In addition to the standard Crosswalk APIs the runtime also includes an implementation of the Apache Cordova device API and a subset of the Intel XDK APIs.

Your development environment and project must meet the following requirements in order to use this debug feature:

  • Your Android device must be running version 4.0 or higher of the Android OS and USB debugging must be enabled (described below).

  • Debugging with a Windows development system requires that you obtain and install the OEM USB driver specific to your Android device onto your Windows development system.

  • You do not need to install the Android SDK; all components needed to communicate with your Android device (other than the necessary USB drivers mentioned above) are provided automatically by the Intel XDK.

  • It is not necessary to “root” your device in order to use this feature.

  • Close any Chrome windows that are using the Chrome remote inspection and debug feature ("chrome://inspect") when you are using the Debug tab. The Debug tab uses adb to communicate with the Android 4.x device attached to your USB port and some versions of "chrome://inspect" will cause interference with adb.

  • Instructions to Setup a Debug Session

    Once you have verified that your project meets the above requirements, these instructions will help you setup and start a debug session.

    1. Enable USB debugging on the Android device.

    Verify that USB debugging is enabled on your Android device. Refer to the section titled "Setting up your device" on the Remote Debugging Chrome on Android page for detailed instructions on how to enable USB debugging for your Android. In short:

    • Find the Settings > Developer options configuration screen on your Android device.

    • If Developer options is not visible, select Settings > About device and tap the Build number item seven times. Return to the previous screen and Developer options should now be visible.

    • Enable the USB Debugging option. This launches remote debug mode when a USB connection occurs.

    • If your development system is running Linux* or OS X* you already have the necessary USB drivers installed to communicate with your Android device for debug and you can proceed to step 2 below.

    • If you are using a Windows development system, you may need to install some Windows USB drivers for your device. Details are available on the OEM USB Drivers page of the Android Developers site.

    Connect your Android device to your development system with a USB cable. When connecting your device to your development machine you may see an alert on the device requesting permission to allow USB debugging from this computer. Click Ok to grant the permissions required to debug your Android device with this computer.

    2. Verify that your device is seen by the Intel XDK.

    When a debug connection is successfully established your device will appear in the top-left corner of the Debug tab. If you have multiple devices connected, they will appear in a drop down list, where you can select the device you will use for debugging.

    Note: If the Intel XDK does not recognize your Android device over the USB, try changing the USB mode of your device from a Media Device (MTP) to a Camera Device (PTP).

    3. Start a debugging session.

    The icons in the toolbar (above) are referred to as: the Launch, Debug and Stop buttons, respectively.

    • Select the device to use for debugging from the drop down list of devices.

    • Make sure the selected Android device is on, not in sleep mode and unlocked (i.e., your home screen is visible).

    • Click the Launch button to preview your app running on the device.

    • You can click Debug at any time after the app has launched to start debugging with CDT.

    • Alternatively, you can skip the Launch step and click the Debug button to launch your app and start a debug session directly.

    • Click the Stop button to unload your application and stop the App Analyzer application.

    NOTE: JavaScript debugging and breakpoints will only work AFTER the Device Ready event has been issued to your application. It is not possible to debug any code that executes BEFORE the Device Ready event has been issued.

    Clicking either Launch or Debug automatically installs (if required) and launches the App Preview Crosswalk container app on your debug device. App Preview Crosswalk is an Android application that is distributed with the Intel XDK. You can think of App Preview Crosswalk as an embedded browser for running your HTML5 application on your Android device. App Preview Crosswalk is a required component, it facilitates remote debugging and profiling of your application on your Android device.

    If this is your first time using the debug feature with a specific device you will see a prompt requesting permission to install App Preview Crosswalk on your device. Click on "Install it now" to have the Intel XDK install App Preview Crosswalk on your device.

    When you install a new version of the Intel XDK on your development system and it includes a newer version of the App Preview Crosswalk application, the old App Preview Crosswalk will automatically be uninstalled from your Android device and the new App Preview Crosswalk will be installed in its place. At that time you may be asked again for permission to install App Preview Crosswalk onto your Android device.

    All of the above happens over the USB debug connection to your Android device, it is not necessary to download and install the App Preview Crosswalk application from an app store.

    Once App Preview Crosswalk is installed, your app will be launched on the device, and a remote session of the Chrome Developer Tools will begin in the Debug tab.

    To end the debug session click the Stop button.

    Legal Information

    Per informazioni complete sulle ottimizzazioni del compilatore, consultare l'Avviso sull'ottimizzazione