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 you 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 that the appropriate <script ... lines are present.
Customizing the Device Emulator Appearance
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 ![]()
icon. 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.
or 
icon. For example, you might hide one column of palettes to increase the width available to display the virtual device under test.
slider or the button to make the virtual device larger or smaller.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 To simulate the user clicking the Back button on the chosen virtual device, click the To maximize the width available to view the virtual device, use the Zooming percentage or hide palettes as described below in Customizing Device Emulator Appearance. 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. |
Multi-page Testing | Allows you to specify an html page to help you test multi-page apps. The default start html page is To display an external web page in the emulator's virtual device, enter an absolute URL (with a 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 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:
|
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 |
Events | Open this palette and get familiar with its content. Use this palette to simulate to fire system-level events:
|
AppMobi PushMobi Service | Emulate sending push messages. See the topic Test in Emulator. |
buttons.
button.
button to shake the image. In this tutorial, this feature is used by the commented out In addition to the palettes, check the EMULATE tab settings by clicking the 
button in the toolbar.
Checking API <script ...> References
The Device Emulator supports both the Intel XDK APIs as well as Apache Cordova* core APIs. You must include these <script ...> tags to bring in the files to implement these APIs:
<script type="text/javascript" src="intelxdk.js"><script type="text/javascript" src="cordova.js">
This reference to intelxdk.js and cordova.js is needed to use the EMULATE, TEST, or BUILD tabs. The intelxdk.js and cordova.js files are not needed within the project, because the EMULATE, TEST, and BUILD tabs serve them automatically within the Intel XDK environment.
Note
Older versions of the Intel XDK or appMobi* reference appmobi.js in source files. Replace appmobi.js references to specify intelxdk.js as shown above.
When you build your app using the Adobe PhoneGap Build* utility, you similarly do not need to have a cordova.js file in your project, because the build utility will supply it for you. However, if you build your app with a platform-specific SDK, you must have the cordova.js file that matches that particular platform (as well as other native libraries).
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).