Test Tab and Weinre Debugger

The Test tab is a quick and convenient way to see your HTML5* Cordova* app running on a real device. It does this with the help of Intel® App Preview, an app that runs your code in a preconfigured Cordova container. The convenience is that you do not have to build and install an app on your test device in order to see how it looks. The drawback is that not all elements of your app can be tested or previewed using this technique.

The Test tab can also be used with weinre* for access to a simple, remote, JavaScript* console. Watch this ~30 minute video for a demonstration of how to use the Test tab and how to debug using the weinre remote JavaScript console.

The video shows how to preview your Cordova app on a mobile device running Intel App Preview. Learn how to use the weinre debugger with App Preview, or with a built app, as a debugging alternative. The video also explains how to get a weinre session started, how to configure your app for success with weinre, and what you can and cannot do with weinre and the Test tab.

Some helpful documentation associated with this webinar include:

Other parts of the Intel XDK provide preview and debugging features similar to the Test tab:

  • For USB-connected Android* and Apple iOS* devices, the Debug tab provides excellent remote debugging features for Android (based on the Crosswalk* runtime) and Apple iOS* devices.

  • The Develop tab provides Live Layout Editing features, including live preview on a device or in a browser window. To use these features on a mobile device you must install and start Intel App Preview.

  • The Emulate tab simulates the viewport of some typical mobile devices in a Chrome desktop environment and provides a debugger based on the standard Chrome Developer Tools* (DevTools) debugger.

IMPORTANT: review the Emulate tab limitations! Never rely on the Emulate tab to test the functionality of your app; you should always test your built app on real devices before publishing your app for use by others!!

For a description of when to use the various Intel XDK and related debug and test options, see Debug and Test Overview.

Install Intel App Preview App

To begin, download and install the Intel App Preview mobile app on your testing device(s). You can find the Intel App Preview mobile app in app stores such as the Apple App Store*, Google Play* Store, and both Microsoft Windows* stores. Search using the term "Intel App Preview".

To run App Preview, launch it like any other app.

Decide Whether to Test Using a Server or a WiFi Network Connection

You can test your app using a server or directly test your app running on a device. Locate the MOBILE and WIFI buttons in the upper left corner:

  • Use the MOBILE button to test using a test server in the cloud. Advantages: Requires minimal setup, avoids potential firewall and network topography issue, and you can pull your files down to your mobile device anytime from anywhere in the cloud.

  • Use the WIFI button to test using a local Wi-Fi network to which both your development machine and test mobile device are connected (same WiFi subnet). Advantages: Usually faster once set up, does not consume mobile data, and pulls files directly from your development computer.

In either case, follow the displayed instructions in the left part of the Test tab.

To run your app using WIFI, consider enabling the checkbox Run Intel XDK local server to enable test over WiFi. Be aware that checking this option may cause firewall issues in certain environments, so consider unchecking it unless you are actively using the Test tab.

If you are seeing "Unknown error starting your app..." or "Unable to retrieve app configuration from the cloud server" messages when using the Test tab and App Preview, it is likely due to a slow connection between the Amazon Web Service (AWS) servers, where the Test tab files are hosted, and your location. Unfortunately, there can be long network delays to Asia and other parts of the world, resulting in this problem.

The simplest way around this problem is to use the “WIFI” option on the Test tab, along with the “Local Apps” button at the bottom of the App Preview screen. In this mode of operation, Intel App Preview pulls your project files directly from your development system's disk, via the Intel XDK, which must be running on your development system. This process only works if your device and the Intel XDK are on the same subnet. Your network must be configured such that your development system and your test device co-exist on the same subnet of the same network.

If you have trouble making this WIFI option work in your office environment, try testing it at home, to confirm that you are able to make it work. And review the webinar video referenced at the top of this doc page for more help.

Push App to Test Server

Once you have App Preview installed, select your project in the Intel XDK and click the Intel XDK Test tab. A dialog appears to push (upload) a copy of your app's project files up to the test server.

You can check the date-time when your app's files were pushed to the test server. If you modified your source files after the displayed date-time, click the green button next to Push Files to update your app on the test server.

The App Preview app will look on the test server(s) for the most recent copy of your app to run on this device.

Launch your App on Test Device

  1. On your mobile device, launch the Intel App Preview app.
  2. Make sure you are logged into your Intel XDK account (same account you use on your development system).
  3. Locate the App Preview toolbar on the bottom and tap Server Apps.
  4. Locate and tap the camera button in the upper-right corner.
  5. Aim the camera view at the QR code in the Intel XDK Test tab to scan the QR code. After it recognizes the QR code, it will ask whether you want to launch App Preview to preview this app. If accepted, it will access the Internet, grab the latest copy of your app you uploaded to the test server, and run it in test mode on your mobile device.

You can follow the device testing guide on the left side of the Test tab to run your app from a list of your available apps on test servers.

If you don't see your app or it is out of date compared to viewing it with the emulator, make sure you have uploaded it to the test server using the Test tab.

Debug on Device

For the best debugging results, when possible use the Debug tab to remotely debug a USB-connected mobile Android device or iOS device (see Debug and Test Overview).

Debugging your app with the Test tab on your test device requires that you add a few lines of code to your app. This script tag will include a JavaScript library from the Internet that will transmit your JavaScript debug state to your desktop computer. Follow these steps to get on-device debugging to work:

  1. Add the script tag to the HTML files of your project.
  2. Push your app to the testing server to update it.
  3. Click Begin Debugging on Device to start the local debug window.
  4. Later, after you complete debugging, remove the script tag in your project's HTML files.

Be aware that Internet firewalls can limit the functionality of this tool.

Resources

For more complete information about compiler optimizations, see our Optimization Notice.