Emulate Tab Tutorial


This 10- to 15-minute tutorial helps you get started with the Intel® XDK Device Emulator by walking you through a typical end-to-end workflow you can ultimately apply to your own app development process. After you complete this tutorial, you will learn how to test and debug your app using the Device Emulator.

To get started:

  • Start here for a quick introduction to the Device Emulator, the EMULATE tab.
  • Start here to learn how the Device Emulator fits within the Intel XDK environment, and the steps needed to use it.
  • Start here for the first of the step-by-step instructions.

For an overview of the various Intel XDK test and debug capabilities, see the Test and Debug Overview.

The Device Emulator GUI

NOTE: Apps may run correctly in the emulator but encounter problems when run on an actual device. The processor on your host system is likely faster than the processor on an actual device, so performance-related problems are typically not seen in the emulator. Also, the up-to-date web run-time used by the device emulator may implement features of HTML5 more correctly than the web run-time on the actual device, especially if that device has an old OS version. Think of the devices inside the device emulator as a collection of "ideal" devices with nearly unlimited memory, processor, and HTML5 rendering features. Use the device emulator to quickly identify and fix many defects before you test your app on an actual mobile device. See Why Running in the Device Emulator Differs from Running on Actual Device(s).

After you choose your project in the Intel XDK PROJECTS tab, click the EMULATE tab to display the Device Emulator.

A visual representation of the selected virtual device appears in the center of the EMULATE tab. To the right and left of the device being tested are two columns of palettes. Use the palettes to configure your test environment by choosing a device, settings, and so on (your screen may differ):


Emulate tab in the Intel XDK (docked)

To select a different tab, click its button. For example, after debugging issues, click the DEVELOP tab EDIT view to edit your source code.
The EMULATE tab toolbar appears on the top row. It provides easy access to frequently used buttons and controls, which are described below.
The palettes appear in two accordion-style columns, to the left and right of the virtual device. Use the palettes to choose the Device, Settings, and other features. As explained in Configure Emulator Environment, you can: open (expand) and close each palette by clicking its name, move palettes between columns by dragging a palette, or show and hide an entire palette column by clicking the or button.
The virtual device under test appears in the center, based on the selected Device and its characteristics. You can use the slider in the toolbar to adjust the size of the virtual device.

You can undock the EMULATE tab and move its undocked window to view it and the DEVELOP tab side-by-side. To undock this tab, click button near EMULATE and drag the undocked EMULATE window (as shown below). To return (dock) the floating window to the EMULATE tab, click the button or close the floating window.

Emulate tab, undocked floating window

The EMULATE Toolbar

The EMULATE tab toolbar appears on the top row:

Click This To Do This
Reload and restart app
Reload the app for the device under test in the EMULATE tab. This action reload your app's source files and restarts the app.
  • If you use a code editor external to the Intel XDK, click this button after editing your project files to reload and restart your app.
  • If you use the built-in code editor in the DEVELOP tab, you can use the (settings) button below to choose whether files are automatically reloaded (which restarts your app).
Start debugger
Launches the built-in debugger in a floating window (described in Debug and Edit).
Display settings for this tab:
Use the When files change section to choose what the emulator should do after you modify your sources using the built-in editor and click the EMULATE tab. Choose one of the following:
  • Automatically reload files without a warning message - select Always reload. If you do not select Always reload, you must manually click the Reload app's files button to reload and restart the app using its updated sources.
  • Display a warning if files have changed - select Warn me.
  • Do not display a warning or do not automatic reload if files have changed - select Do nothing.

Use Set background color to select a background color beneath the palettes and virtual device.

Use the Clear JavaScript console on load checkbox to choose whether JavaScript* console messages in the debugger should be cleared each time the emulator loads/reloads your app. The emulator reloads/restarts your app when: you select a different project, change the selected device, click Reload app's files, or modify source code when Always reload is selected. Uncheck Clear JavaScript console on reload to see stale console messages written by your app on previous runs.
Click again to close.
Stop the emulator executing the app Stop executing the app in the emulator. You might stop the app for various reasons, such as if an unimportant GUI event keeps occurring or excessive CPU time is used. To restart the app, you need to reload it, such as by clicking the Reload app's files button or save changes to your project files when the When files change setting allows reloading (see above).
Change zoom percentage of virtual device Change (slide) the zoom percentage of the virtual device, and thus its size. Click the button to automatically zoom the virtual device to the maximum size that will fully fit in the window (its color turns blue if clicked); click it again to unselect the automatic zoom.
Update Intel XDK When present, indicates that an update package for the Intel XDK is available. Click to start the download process. When download completes, click to start the installation.
Help button Provide links to display the: Help Page, Intel XDK Quick Tour, user forums, various documents, and Intel XDK About page (applies to all tabs).
Account Log in or view your Intel XDK account name (applies to all tabs). For example, the TEST and BUILD tabs use your account. Once logged in, click once to display your account name and the buttons below. Click again to hide this information:
To log out, click .
To view/modify your account settings, click .

How the Device Emulator Fits into the Intel XDK

The Device Emulator Workflow

The recommended series of steps (workflow) to use the device emulator follows:

  • Choose Project: Define the app to be tested in the Device Emulator by using the PROJECTS tab.
  • Configure Emulator Environment: Choose a device and settings in the EMULATE tab.
  • Test in Emulator: Test on-device sensors, fire events, and test push messages using the EMULATE tab.
  • Debug and Edit: Debug within the EMULATE tab and fix any problems found during testing by using the DEVELOP tab. You should retest fixes in the Device Emulator (EMULATE tab).
  • Next Step: Test on Actual Devices: When you are satisfied with testing within the EMULATE tab, test mobile device(s) by using live development features in the DEVELOP tab or the TEST tab. You must first download and install the Intel App Preview tool on your mobile device.
The general workflow is shown below, where the main device emulator steps appear in the orange box:
Device Emulator Workflow in the Intel XDK

The Device Emulator runs your application (app) in a simulated environment that implements the Apache Cordova* core APIs and/or the Intel XDK APIs. You quickly see how your app looks and behaves on a variety of devices without having to acquire many test devices. For example, you can:
  • Select a popular mobile device to determine the appearance of both the screen size and the resolution.
  • See how well your app's responsive design can accommodate devices of different display sizes.
  • Fire system events and control system parameters such as your location and test on-board devices.

You can debug your app using the Device Emulator's built-in debugger.

How the Device Emulator Fits into the Intel XDK

The top of the Intel XDK provides a row of tabs that describe the major steps of its workflow. To move to a new tab, simply click the tab's name (your screen may differ slightly):

Intel XDK tab buttons

For example, before you use the EMULATE tab with a new app, use the:

  • PROJECTS tab to select the project and the file that starts your app (usually index.html). When creating a new project, specify an empty directory to contain project files and its project name.
  • DEVELOP tab to modify your app's GUI design and edit its source code.

After you test your app using the EMULATE tab, use the DEVELOP tab again to fix source code issues found during testing. Return to the EMULATE tab to retest the fixed issues.

After you are satisfied with your app's behavior within the Device Emulator using a virtual device, use the DEVELOP tab live development features or the TEST tab to test the app and remotely debug it on real physical device(s). For example, you can enable live preview of your device (DEVELOP tab), use a USB cable to connect your device to your development system to enable remote debugging (Android* and Apple iOS* devices) or profiling (Android devices), test your app using a local device(s) either connected to your development computer by using to the same WiFi network or with a USB cable. Also, you can use your mobile device and Intel App Preview to test apps you have previously pushed to the Intel XDK servers from anywhere your device has an internet connection.

For more information about the various Intel XDK tabs, see the Intel XDK Overview or click the Help button button on the toolbar and choose View Online Documentation.

Choose Project

Before you test an app using the EMULATE tab, you need to choose an existing project or create a new project.

Use the PROJECTS tab to select the active project to be used by other tabs. Selecting the project will also select the index.html file within the chosen project for the Device Emulator. This tab also lets you remove the selected project from the project list.

In this tutorial, we will show how to create a project for the Basic Hybrid App sample included with the Intel XDK and use it in the EMULATE tab.

View Available Samples in the PROJECTS Tab, Create and Open a New Project

  1. Open the Intel XDK.
  2. Click the down arrow to the right of the PROJECTS tab.
  3. Click the New Project button.
  4. Click the plus sign next to Samples and Demos. Several available demos are displayed in the General category.
  5. To view the brief summary of any demo app, click its title. To view demo apps in a specific category, click the drop-down list to the right of Filter by keyword.
  6. Click the icon for Basic Hybrid App.
  7. A default Project Directory appears. To change it, click the button and select a directory where you will create a new directory. The directory name will be based on the Project name you type.
  8. Type a name for your project, such as: BasicHybrid_demo.
  9. Click the Create button. The DEVELOP tab appears.
  10. The App Designer GUI interface appears, Click the CODE button in the upper-left to display the code view.
  11. In the left palette, view the source directories and files for this app:
    Develop tab
  12. If needed, click the file index.html to display its code.
  13. Please notice that www is a directory. Click the triangle button to show or hide this directory's source and directory files:
    Editor view showing the www directory

Configure Emulator Environment

As shown in The Device Emulator GUI, the Device Emulator provides a series of palettes, each of which controls some aspect of the virtual environment. The palettes are divided into two accordion-style columns, one on the left and one on the right of the virtual device.

Before you test your app in the EMULATE tab, set up each configuration that will be used to test your app. To test your app using multiple configurations, set up each configuration, test and debug it, edit your app, and repeat. Also, make sure the appropriate <script ... lines are present.

Customizing the Device Emulator Appearance

  • To undock the Emulator window, either click the button next to EMULATE, or in the DEVELOP tab, click Run My App > Run in Emulator. To return (dock) the floating window to the EMULATE tab, click the button or close the floating window.
  • To open (expand) or close a palette, click its name. Expand a palette to view and modify its options.
  • To hide or show a palette column, click the or button. For example, you might hide one column of palettes to increase the width available to display the virtual device under test.
  • In the toolbar, use the slider or the button to make the virtual device larger or smaller.
  • You can move palettes by dragging them to a different location.

For this Tutorial: Choose Device, Connection Type, and Other Characteristics

Use This Palette To Do This
Devices Select a device (device under test), such as Apple iPhone 5* or whatever you prefer. The virtual device chosen appears in the middle of the EMULATE tab, so you can view how your app fits on the device's screen and resolution.

You can choose the orientation as portrait or landscape using the buttons.

To simulate the user clicking the Back button on the chosen virtual device, click the button.

To maximize the width available to view the virtual device, use the Zooming percentage or hide palettes as described below in Configure Emulator Environment.

To test your app using multiple devices, select each device, test and debug it, and repeat.
Information A summary of the currently selected settings appears, such as the selected Device, screen size and density, and other device details.
Choose Project Start File or URL Allows you to specify an html page to help you test multi-page apps. The default start html page is index.html in the project source files.

To display an external web page in the emulator's virtual device, enter an absolute URL (with an http:// or equivalent prefix). This is useful for testing web applications that rely on server-side support but want to be mobile-friendly. The UserAgent string used is determined by the chosen virtual device. So if you are currently emulating an iPhone 5, the external server can deliver content appropriate for that device.

If you enter a relative URL (without the http:// or equivalent prefix), then the emulator will choose a file in the current project.
Accelerometer Open this palette and get familiar with its content.

Click the button to shake the image. In this tutorial, this feature is used by the commented out shake.js script. On certain platforms, the shake may mean something different.

Use this palette to simulate device rotation by dragging the small device using the mouse pointer. As you drag it, the accelerometer values change.
AppMobi Live Update Service Emulate updating your app's version. See the topic Test in Emulator.
Device & Network Settings Open this palette and view the settings for the virtual device. Locate the Connection Type drop-down. Specify the type of network connection you will use on your target mobile system in the TEST tab. For example, if both your development system and the target device are on the same local wireless network, choose WIFI.
Use this palette to choose:
  • Whether the Status Bar and a simulated Splash Screen should appear on the virtual device.
  • The Connection Type (see above) and whether a network lag should be simulated.
  • Some Globalization conventions for this app's appearance, such as the language used to show the locale time name, whether Day Light Savings time should be used, and the first day of the week.

Geo Location

Open this palette and get familiar with its content.

Use this palette to zoom the displayed map, simulate changes in the physical geographic location of the device by dragging the map or entering coordinates, choose a compass heading and type a speed, specify Global Positioning Satellite (GPS) delay time, simulate a GPS timeout, and use a recorded GPX file to simulate route movement.

In the demo app used in this tutorial, this feature is also provided by the commented out location.js script.
Events Open this palette and get familiar with its content. Use this palette to simulate to fire system-level events:
  1. Select an event, such as deviceready or backbutton.
  2. Click the Fire Event button.
AppMobi PushMobi Service Emulate sending push messages. See the topic Test in Emulator.

In addition to the palettes, check the EMULATE tab settings by clicking the button in the toolbar.

Cross-platform Screen Resolution

Selecting a device in the Device Emulator determines the pixel dimensions of the frame where the app under test is rendered. You can view display details in the Information palette.

In addition to the screen size of the target device, consider the resolution or pixel density of the target device. Pixel density can be measured using pixels per inch (PPI).

Test in Emulator

After you have configured the Device Emulator environment, you can test the various features provided by your app's APIs, including on-board device sensors, push messages, app update, and firing events.

Please note that the Device Emulator provides its own implementation of the system code to simulate features of a real device. The Device Emulator is not an instruction-level emulator; it does not emulate an actual device or its processor, memory, operating system, and HTML5 rendering capabilities. For details, see: Why Running in the Device Emulator Differs from Running on Actual Device(s).

The Device Emulator supports the use of Apache Cordova* 3.x plug-in APIs. Use the Intel XDK Projects tab to specify which Cordova core plug-ins and custom third-party plug-ins your app will use. For a list of limitations and support for Cordova plug-ins within the Device Emulator and Intel XDK, see Adding Plugins to Your Intel XDK Cordova App.

NOTE: The Device Emulator assumes the entry point for the current project is index.html in the top-most project root directory. The Device Emulator does not support use of mp3 audio files.

If you recently modified your sources using the DEVELOP tab, click the button to update the virtual device shown in the EMULATE tab. The first time you do this, consider choosing the option to have the app's modified files automatically reload when you click EMULATE. At any time, you can view or change the auto- or manual-load settings by clicking the button on the left side of the toolbar.

If your app uses the Apache Cordova APIs, the config.xml or intelxdk.config.xml file provides a helpful list of the on-board sensors your app uses; this list may be helpful during testing.

For this Tutorial: Do the Following to Test the Device

  1. Click the Devices palette to expand it. Choose a virtual Device to be tested. For example, choose a type of smart phone:
    Virtual device under test in Device Emulator
  2. If needed, use scrollbars within the virtual device to view the Intel logo and buttons on the virtual device.
  3. Click the Beep button and listen for an audio beep.
  4. Click the Vibrate button and watch the virtual device vibrate.
  5. Click the Play Sound button and listen for a few musical notes from a flute.
  6. Click the Play Dead button and see that the screen has gone dark. Click the virtual device's screen to display the app's output again. This app uses the App Framework.

  7. After you modify index.html to remove comments from lines 32-34, skip to step 11 to retest only the new features.
  8. In the Devices palette, choose a different Orientation. Retest starting at step 2 above.
  9. In the Devices palette, choose a larger Device, such as a tablet. Retest starting at step 2 above.
  10. In the next topic, you will uncomment lines 32-34 in index.html to reveal new features that should be re-tested later. If you have not yet uncommented these lines, skip the following steps for now.
  11. After you modify index.html to remove comments from lines 32-34, retest these new features:
    • Open the Accelerometer palette. Click the (Shake) button. Listen for audio beeps while the virtual device shakes.
    • Optionally using the DESIGN view, you can add a Take Picture button by locating the GO button under Controls > Forms and drag it below other buttons on the device. Rename its Label from Button to Take Picture. To simulate the camera taking a picture, switch to the CODE view in index.html file's line 117 to add the ontouchstart attribute to use a function in camera.js). To close the picture, click the Cancel button above the picture.
    • Use the Devices palette to select a larger Device or a different Orientation. Consider retesting some items.

You have tested the primary features of this demo app. In this case, we uncommented some code instead of modifying the app's code as a result of testing.

Scrolling in the Device Emulator

If you open enough palettes (or choose a large enough device in the Device palette) the Device Emulator UI may become larger than your Intel XDK window. In that case the entire Device Emulator window becomes scrollable. You can scroll using the mouse wheel or the arrow keys. There is also a vertical scrollbar on the right side.

If the app emulated by the virtual device displays a UI that is larger than the Intel XDK window, then the window in the virtual device also becomes scrollable. To scroll within the device window:

  • Click the device window to give it focus.
  • To scroll vertically, either use the mouse wheel or the up arrow or down arrow keys.
  • To scroll horizontally, use the left arrow or right arrow keys.

If your host computer has a touch screen, you can also use touch-based scrolling, both for the device window and the entire Device Emulator UI.

Accelerometer

Use this palette to simulate device rotation and gyroscopic movement by dragging the small device using the mouse pointer. As you drag it, the displayed accelerometer values change:

  • Rotation on the x-, y-, and z-axis.
  • Gyroscopic values alpha, beta, and gamma.

Apps that use accelerometer APIs can show the changes to the accelerometer values visually, such as the RollingCan demo (Projects tab > Start a New Project > Work with a demo > RollingCan).

Geolocation

Use this palette to simulate your app's geographical location capabilities. This palette provides a geo location map, a slider to zoom in or out, and other capabilities.

Test Push Messages

You can test push messages within the Device Emulator. This action does not push messages to actual users. To do this:
  1. Open the AppMobi PushMobi Service palette.
  2. After referencing the intelxdk.js library, the app needs do one of the following:
    1. For a new user, call the PushMobi server using the appMobi.notification.addPushUser service to log in.
    2. For an existing user, call the PushMobi server using the appMobi.notification.checkPushUser to log in.
  3. Once the login is complete, this PushMobi Service palette lets you enter the message to test-push to the user. This login indicates to the PushMobi server that this app is running under emulation.
  4. Type the message to be displayed.
  5. Click Send.
  6. To receive messages, your application must check for available messages using the appropriate service. For example, the appMobi.notification.getNotificationList and appMobi.notification.getNotificationData services. For more information, see the documentation for PushMobi web services, such as http://docs.appmobi.com/index.php/push-messages.

Test Live Update

You can test you app's ability to send an Update notification to users that a new version of your app is available. You can choose to emulate the Live Update now, after a reboot occurs, or to notify the user or app. To do this:

  1. Open the AppMobi Live Update Service palette.
  2. Select how the test message will be delivered. Messages can be delivered automatically or by notifying the user of the app that a message needs to be viewed (see the appMobi service documentation).
  3. Type a message to be entered into a change log.
  4. Click Send.

Debug and Edit

To modify your source code at any time, click the DEVELOP tab and click the file name in the sidebar to select the file to be edited, such as index.html.

Debugging Inside the Device Emulator

The device emulator - like the rest of the Intel XDK - is an HTML5 application that runs inside node-WebKit. Node-WebKit uses a web runtime (WebKit) based on the web runtime used in the standard Chrome browser. Your app runs within an inner HTML frame whose size depends on the currently selected device.

Node WebKit provides a built-in debugger, which is based on and resembles the standard Chrome Developer Tools (CDT) debugger. You can use the built-in debugger to debug your application. The EMULATE tab simulates device viewport sizes, touch events, user agent strings, and various device APIs (other than unimplemented APIs listed below) for a convenient debugging experience using standard Chrome Dev Tools. (Actually you are debugging the entire Intel XDK, but the built-in debugger hides the parts outside of the inner frame containing your app.)

To start the debugger, click the button in the toolbar. The debugger appears in a floating window, as shown in the lower part of the screen below (your screen may differ):

To close the debugger, click the red x in the upper-right corner.

This debugger lets you view elements and resources, type commands into a console, and perform other functions. For example, display Elements and right click to select options for that source line from a context menu (as shown). For information about this debugger, see http://developers.google.com/chrome-developer-tools.

Use the debugger to focus on the emulated app's elements and sources. If you see Console messages from files that are not part of your app's sources, these messages may be from the Intel XDK and can be ignored.

The debugger lets you view your source code. If you modify the source code in the debugger, this will impact the future behavior of the EMULATE tab as you continue testing your app. However, modifying sources in the debugger does not modify your actual source code in the DEVELOP tab.

Unimplemented APIs

The EMULATE tab simulates a subset of the device APIs that are available to your application. The only way to debug these non-simulated APIs is by using on-device debugging with App Preview or a built application.

For a list of unimplemented APIs in the Device Emulator (and other limitations), see this page: Why Running in the Device Emulator Differs from Running on Actual Device(s).

Editing Your Source Files

The debugger lets you view and modify the source code in the debugger, but changes you make in the debugger will not modify your actual source code. Either use your favorite external editor or the code editor built into the DEVELOP tab to modify your sources:

  • After you open or create a project, click the DEVELOP tab. If needed, click the CODE button to display the code editor view.
  • In the left sidebar under the project name is a list of source files (file tree). Click the source file to be modified. The selected file appears.
  • In the left sidebar, after you modify a file, a Working Files section appears above the project name. To add a file immediately to the Working Files section, double-click its name.
  • Modify the file(s) as needed. To save your changes for this file, either click the File > Save menu item or press Ctrl+S or Cmd+S.
  • For more information about the built-in editor, see the Using the Editor in the Intel® XDK Develop Tab guide.

To return to the EMULATE tab, click EMULATE. To restart your app so its appearance and behavior in the EMULATE tab is consistent with your saved sources, click the button. If you use an external editor, remember to click the button after you save the file.

The DEVELOP tab also has an APP DESIGNER view for the App Designer component. Click the DESIGN button to use this GUI view.

For more information about the various Intel XDK tabs, see the Intel XDK Overview topic or click the Help button button on the toolbar.

Retest Your App

After you have fixed any issues using the DEVELOP tab, retest the modified parts of your app using the applicable devices and settings in the EMULATE tab. In this tutorial, return briefly to the topic Test in Emulator.

For this Tutorial: Uncomment Several Script Lines in index.html

The HelloWorld_BasicHybrid app's index.html file has several commented out <script ...> lines. As part of this tutorial, we will uncomment these lines. With your own app, you may instead need to debug problems found during testing, locally modify the files in the debugger environment, retest, and then edit your sources.

To open index.html for editing, modify it, and reload the app in the EMULATE tab:
  1. Click the DEVELOP tab. When you open the html file, the screen initially displays the App Designer GUI (the DESIGN button has a blue background).
  2. Click the CODE button to select the code editor view. (Later, if you want to use the App Designer, click the DESIGN tab.)
  3. In the left margin, click file index.htm file to open it in the editor.
  4. After line 32, locate the following lines:
            <!-- 
            <script type="text/javascript" charset="utf-8" src="camera.js"></script> 
    	<script type="text/javascript" charset="utf-8" src="shake.js"></script> 
    	<script type="text/javascript" charset="utf-8" src="location.js"></script> 
            -->
  5. Remove the comment characters so the previously uncommented lines are active:
    Develop tab after uncommenting lines 34-38
  6. Save the edits to this index.html file (click the File > Save menu item or press Ctrl+S or Cmd+S).
  7. Click the EMULATE tab.
  8. If you are using an editor external to the Intel XDK or if you use the built-in code editor in the DEVELOP tab but have not set the auto load setting, after you modify your project files, click the button to reload your app's source files (which restarts the app).
  9. In the Devices palette, change the Orientation to Landscape. If needed, use the scroll bars on the virtual device so you can see the buttons.
  10. Notice that a new Take Picture button appears, as well as some new text (Shake the device ...), and a geo location map (your screen may differ):
    Device after uncommenting code and choosing landscape orientation

Next Step: Test on Actual Device(s)

After you complete testing using the device emulator and are satisfied with your app's quality, the next step is to test the app using the actual device(s) it will support. Before you push your app to the server, log into your Intel XDK account.

For each mobile device:
  • Download the Intel App Preview app from the appropriate app store(s) and install it on your device.
  • To preview your running app during development, in the DEVELOP tab Code view, use the Live Development Tasks. This lets you run and view your app on a device connected to your development computer using WiFi or USB cable, or preview the app in a browser window. Alternatively, you can use the TEST tab after you sync your app with the testing server.
  • To access your app built previously, launch the Intel App Preview app and log into your Intel XDK account.

In the DEVELOP or TEST tab, you can learn more by clicking the Help button button in upper-right corner. For a video about using the TEST tab, view this video:

Additional ways of testing include:

  • On Android and iOS devices, use the DEBUG tab to access the app running remotely on the target device connected with a USB cable. See the instructions on that tab.
  • Use a remote debugger (such as weinre) that accesses the app running on the target device. See the instructions on the TEST tab.
  • Use the simulator or emulator provided with each respective SDK. You use the SDK simulator or emulator on your development system, without access to a real device.

Tutorial Summary and Resources

Summary

This tutorial demonstrated how to use the Device Emulator, part of the Intel XDK, to test and debug an app.

Step Tutorial Recap
Choose Project You created a project using a demo app in the PROJECTS tab.
Configure Emulator Environment The Devices palette lets you choose the virtual device to be viewed. You need to check the Network & Device Settings before you use the Device Emulator.
Test in Emulator You tested the app's APIs by clicking its buttons and the app's display characteristics in the EMULATE tab. You also learned about using the built-in debugger.
Debug and Edit You modified the source code and saved the file in the DEVELOP tab, code editor view. You then retested the changes in the EMULATE tab.
Next Step: Test on Actual Device(s) You learned that the next steps are to test the app on real physical devices using the TEST tab.

Next step: Apply this knowledge to use the Device Emulator to test your own apps.

Key Terms

The following terms are used throughout this tutorial:

  • mobile app: An app that executes on a target device. It interacts with the user and on-board device sensors.
  • on-board sensor: Built-in sensors available on the real device, such as its accelerometer, geo location, and similar features.
  • real device: Actual physical hardware, such as a smart phone, tablet, or other mobile device.
  • virtual device: Software environment that simulates a real device. It is convenient for testing how an app will look and function on actual, physical hardware.
  • web app: An app that executes on a web server. To use this type of app, a mobile device uses a web browser and internet access.

Resources


Para obtener más información sobre las optimizaciones del compilador, consulte el aviso sobre la optimización.