The Develop tab of Intel® XDK lets you view your app running on local mobile devices, in the device emulator, or in a Google Chrome* or Mozilla Firefox* browser window.
The Live Development Tasks pane, on the right side of the Develop tab's Code view, makes the process of previewing your project's code in a browser or on a mobile device quick and efficient. The following Live Development Tasks pane shows expanded Run My App, Live Layout Editing, and Connected Device features.
 |
|
When using Run My App features, changes appear after you save project files and reload/restart your app. In contrast, when using Live Layout Editing features, changes appear either after you save project files using an external editor, or immediately after you make edits using the built-in code editor (based on Brackets*).
To help you choose which live development features to use based on available devices, networks, and app development phase, view the table below.| Type of Devices and Use | Type of Connection or Display | To launch, click  after: |
|---|---|---|
| Actual local Google Android* devices. Push project files to device, run, stop, and reload/restart your app. View, test, and remotely debug your app on actual device(s). | USB cable connects device(s) with Intel App Preview installed and your development system running the Intel XDK. | Run My App > Run On Connected USB Devices |
| Multiple virtual devices. Debug and test your app using different devices and simulated sensors and events. | Device emulator (undocked Emulate tab window) | Run My App > Run In Emulator |
| Actual local Google Android* or Apple iOS devices. Enables live editing with live preview on your device. Test static CSS and HTML layout code. | WiFi (same subnet) connects device(s) running Intel App Preview and your development system running the Intel XDK | Live Layout Editing > View in Device Over WiFi |
| Virtual device. Live preview in Google Chrome* browser window to test static CSS and HTML layout code. | Browser window | Live Layout Editing > View in Chrome window |
| Virtual device. Live preview in Mozilla Firefox* browser window to test static CSS and HTML layout code. | Browser window | Live Layout Editing > View in Firefox window |
When editing an .html file created previously using App Designer of App Starter, click CODE button to display the Live Development Tasks pane in the Code view.
Run My App > Run On Connected USB Devices
Run My App > Run On Connected USB Devices lets you quickly modify your project and test your app on real devices, with all file types. You can quickly review changes in your layout code on a connected Android 4.x device that is running Intel App Preview. As you make changes to the files in your project your changed files are automatically pushed to your device so you can see how your app runs on a real device. At this time, this feature only works with Android* devices connected to your development system with a USB cable.
Settings on your Android device must have Developer Options and USB debugging enabled. You may need to install drivers for the mobile device(s) on your development system. For configuration requirements for connecting with a USB cable, see the Debug Tab Overview.
Both Intel App Preview and a special Crosswalk App Preview must be installed on your device. The Intel XDK will install these apps after you accept the installation request. When you first connect a device using a USB cable, you will be prompted to install Crosswalk App Preview on your device (tap Next, Next, and Install). Intel App Preview is available from the respective app stores (Google Play* store, Apple App Store*, and Windows* stores).
Run On Connected USB Devices limitations include:
- Changed project files are only pushed to the preview device when they are saved. The Develop tab lets you reload your app, stop it, and control settings for pushing changed files to the device.
- This feature currently requires an Android 4.x device connected using a USB cable.
- The device Settings must allow Developer options and USB debugging and Intel App Preview and App Preview Crosswalk apps must be installed on your Android 4.x device.
- Your code runs within the Crosswalk for Android container, not the standard Intel XDK container, so the behavior and appearance may be different when compared to running your application within Intel App Preview using the Intel XDK Test tab.
Run My App > Run in Emulator
Run My App > Run in Emulator runs your app in the Intel XDK device emulator. Changed project files are only pushed to the preview device when they are saved. Toolbar buttons let you reload your app, launch the debugger, view settings, stop the app, and control zoom. Use the Devices palette to choose a different virtual device under test, adjust its orientation, and simulate use of the Back action. Use Emulator Settings to control whether you reload your app automatically when project files change. Use other Settings and palettes to configure test options, simulate use of accelerometer and other sensors, test multi-page apps, fire events, and so on.
For information about configuring your test environment and using the device emulator, see the Device Emulator Tutorial.
Live Layout Editing > View on Device Over WiFi
Before you use Live Layout Editing >View on Device Over WiFi, install and run the Intel® App Preview app on each device. Intel App Preview is available from the respective app stores (Google Play* store, Apple App Store*, and Windows stores). You can connect multiple Android 4.x and Apple iOS* mobile devices running Intel App Preview to your development system.
The general requirements include:
- Your development system must be running the Intel XDK and be logged in to your Intel XDK account.
- One or more Android 4.x or Apple iOS* mobile devices must be running Intel App Preview.
- The mobile device and your development system must be on the same WiFi subnet. If you development system has both a wired and WiFi, you may need to temporarily disable the wired (LAN) wire or its network device.
The specific steps to connect follow:
- Verify that your development system and mobile device are on the same WiFi network and subnet.
- Run the Intel XDK on your development system:
- Use the Projects tab to open the project.
- Click the Develop tab.
- If needed, display the Code view by clicking the CODE button.
- Click (expand) Live Layout Editing.
- Click the arrow to the right of View on Device Over WiFi. You may need to repeat this step
- On your mobile device:
- Launch the Intel App Preview app.
- Log in to your Intel XDK account.
- In Intel App Preview, either tap Live Layout in the bottom toolbar, or scan the barcode that is displayed in the Intel XDK by tapping the camera button in the upper-right corner.
On your development system, your device should now appear in the bottom of the Live Development Tasks pane under Connected Devices. You should be able to make changes to your project on your development system and see them on your mobile device. When using the built-in editor, they changes appear immediately. When using an external editor, you need to save the project file(s).
If a timeout occurs after you click the arrow to the right of View on Device Over WiFi in the Develop tab and before you tap Live Layout in the bottom toolbar of Intel App Preview, repeat these two steps.
If you cannot easily connect:
- On your development system:
- Click the Test tab
- Click WiFi in the upper-left corner of the toolbar
- Make sure the checkbox next to Run Intel XDK local server to enable test over WiFi is checked
- Click Update Server
- On your mobile device running Intel App Preview, click Live Layout on the bottom toolbar
Live Layout Editing > View in Chrome or Firefox Browser Windows
Live Layout Editing > View in Chrome or Firefox browser window is based directly on the Brackets Live Preview feature. It works best as a means to test static HTML and CSS pages (CSS and HTML layout code). It does not work well with JavaScript* libraries or frameworks that actively modify the DOM (see this Brackets blog for a quick intro). Thus, it has not been enabled for use with the Intel XDK UI design tools (App Designer and App Starter). This feature requires the Chrome (not Chromium) or Firefox browser be installed on your development system. When activated, it will automatically start a browser instance for immediate preview of your application.Some limitations include:
- The Chrome and Firefox browser do not support device APIs (such as Apache Cordova* and Intel XDK).
- Only HTML and CSS that affect layout and appearance should be tested, JavaScript that modifies the DOM will not work well.
- Device scaling and layout (such as portrait and landscape) are not directly supported (you can use the Chrome "Emulation" tab in the "Console Drawer" to affect preview layout and the size of the viewport, if desired).
Resources
- Introduction to the Intel XDK.
- Develop Tab Overview.
- An Introduction to Intel App Preview Mobile App.
- Using the Code Editor in the Develop Tab.
- For a short tutorial for new users about using the Intel XDK development environment, see the Tutorial: Get Started with the Intel XDK
Legal Information *Other names and brands may be claimed as the property of others.
Visit Support Forums - Submit feedback on this page