Simulate Tab

This page describes setting up and using Simulate tab for app debug. For an overview of the various Intel XDK test and debug capabilities, see the Test and Debug Overview.

The Simulate tab runs your application (app) in an embedded Chromium browser on your development system. You can quickly see how your app looks and behaves in a variety of form-factors. For example, you can:

  • Execute the core Cordova* plugins you selected for this app in the PROJECTS tab.
  • Select a mobile device to determine the appearance of your app in a specific form-factor.
  • See how well your app's responsive design can accommodate different display sizes.
  • Fire system events and control system parameters such as your location.

You can also debug your app's generic HTML5 logic and core Cordova plugin APIs using the Simulate tab's built-in debugger, which is based on the standard Chrome Developer Tools (CDT) debugger.

NOTE: Apps may run correctly in the Simulate tab but encounter problems when run on an actual device. For example, you may not see performance-related problems in the Simulate tab, because the processor on your host system is likely faster than the processor on an actual mobile device. Also, the up-to-date web runtime used by the embedded Chromium browser that powers the Simulate tab may implement features of HTML5 more correctly than the web runtime present on an actual device, especially if that device has an older OS version. Think of the virtual devices inside the Simulate tab as a collection of "ideal" devices with nearly unlimited memory, processor and HTML5 rendering features. Use the Simulate tab to quickly identify and fix core logic defects before you test your app on an actual mobile device. See Device Simulator Limitations.

Before You Start the Simulator

After you choose your active project in the Intel XDK PROJECTS tab, click the SIMULATE tab.

Choose a platform and device:

SIMULATE tab in the Intel XDK, initial view)

In the upper-left, use the two drop-down menus and the Start Simulator button to start the device simulator:


Select the platform as shown above - choose Android*, Apple iOS* or Microsoft Windows*.


Select a device associated with that platform.


Click the button to start the device simulator.

After You Start Running Your App

Be patient while the Apache Cordova* plugins are prepared. This is necessary to enable support of the Cordova plugins you previously selected in the PROJECTS tab for both testing and debugging (only the core Cordova plugins are supported, third-party plugins are not supported).

When the plugins preparation completes:

  • A visual representation of the selected virtual device appears in a floating device window.
  • The SIMULATE tab now contains multiple palettes as well as its toolbar.

The Floating Device Window

After you start running your app , the virtual device window pops up in a separate window. You interact with this window as your app runs. Its appearance will change as your application executes code and any core Cordova plugins you have included in your project. Your running app appears in a viewport that is representative of the selected device. A skin resembling that device appears around the viewport. The following screen shows the Hello Cordova sample.

Simulated virtual device window in the Intel XDK


Toolbar buttons let you control the zoom size of the displayed device, switch the orientation between portrait and landscape, and change the background color.


On your development system, test the your app by clicking on your app's buttons or controls to simulate a user touching your app on a real device.

The floating device window toolbar appears on the top row:

Click This To Do This
Change zoom percentage of virtual device Change (slide) the zoom percentage of the virtual device, and thus its size. Click the Zoom to fit device 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.
Change orientation Switch the orientation between portrait and landscape.
Change background color Change the background color for the device window. In the selection dialog: click Other to display the color chooser dialog. Click the desired color, click Add to Custom Colors , and click OK .

Cross-platform Screen Resolution

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

After You Start the Simulator

After you start your app running , the SIMULATE tab's control window will display multiple "control" and information palettes (just below the toolbar). Palettes appear based on which core Cordova plugins have been added to your project (e.g., which plugins you added using the PROJECTS tab):

SIMULATE Tab Control/Debugger Window in the Intel XDK

You use these "palettes" to manipulate the sensors associated with the included core Cordova plugins. Most third-party plugins do not include a Simulate tab extension, so you will normally not see any palettes that correspond to your third-party plugins.


The toolbar appears on the top row to the right of the platform and device drop-down. These buttons let you start or stop your app and start the debug window (Chrome DevTools). Also, there is a control that manages whether your app will restart automatically when a project file gets updated (using either the DEVELOP tab code editor or an external editor).


The control and info palettes appear below the toolbar. Which palettes appear depends on which core Cordova plugins you have added using the PROJECTS tab. When you start the debugger, a Chrome DevTools debug window will also appear.

SIMULATE Tab Toolbar

As with other Intel XDK toolbars, hover over a button to see its tool tip.

Use the Clear JavaScript console on load checkbox to choose whether JavaScript* console messages in the debugger should be cleared each time the simulator loads/reloads your app. The simulator 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 This To Do This
Start the simulator executing the app Start running your app in the simulator. The SIMULATE tab displays the palettes and the virtual device window appears.
Stop the simulator executing the app Stop executing your app and the simulator.
Reload and restart app Restart your app. This action reloads your app's source files and restarts it.
  • If you use a code editor external to the Intel XDK, you may need to use this button after saving changes to your project files if the automatic reload does not detect the changes to your app source files.
  • Use the Restart on save button (below) to control whether files are automatically reloaded when source files are changed (which restarts your app).
Start debugger Start the Chrome DevTools debugger.
Stop debugger Stop the Chrome DevTools debugger.
Restart on save button This slider control determines whether the simulator should automatically reload files and restart your app on changes to your source files.
  • If you choose YES, your app files are automatically reloaded, and your app is restarted.
  • If you select NO, you must manually click the refresh Reload app's files button to reload and restart your app using its updated sources.

Undocking and Redocking the SIMULATE Tab

You can undock the SIMULATE tab, so you can move its palette and toolbar window to the side and also open the DEVELOP tab. Click the  button to undock the SIMULATE tab and drag the undocked window (as shown below). To return (dock) the floating SIMULATE tab, click the button or close the window.

SIMULATE tab, undocked floating window

Handling Unknown (Third-Party) Plugin APIs

Use the PERSISTED EXEC CALLS to view the plugin rules you set for this Intel XDK session. These rules are recorded as the simulator runs your app. When it encounters plugin calls for which it has no simulated routine, it requests your decision on how it should respond to each unknown plugin, such as use the Fail callback, Success callback, or do not invoke either callback. For details about how the simulator handles unknown plugins, see Device Simulator Limitations.

Where the Simulate Tab Fits into the Development Cycle

Use the Simulate tab to test generic app logic (standard HTML5 APIs) and most core Cordova APIs (those provided by the core Cordova plugins). You may have to use "try/catch" structures to allow code to continue around third-party APIs (those associated with third-party plugins), since most third-party plugins do not include the necessary simulation code to work within the Simulate tab. The Simulate tab is also useful for quickly checking how your UI layout will appear in a variety of form-factors. 

Keep in mind that choosing a specific device platform (Android, iOS or Windows) does not modify the underlying API behavior of your HTML5 APIs or the core Cordova APIs, nor does it impact the layout of your HTML and CSS code. Regardless of the platform and device you choose, your code always runs in a Chromium browser that is embedded in the Intel XDK when you run it in the Simulate tab.

After you are satisfied with debugging in the SIMULATE tab, you must test you app on actual mobile devices. You can quickly download and install your app in Intel App Preview (using the Test tab) and you can build your app and then install and run for a true representation of how it will behave.

After you are satisfied with your app's behavior within the device simulator using a virtual device, use the TEST tab to quickly test your app on real physical devices. You can also build your app and debug it on-device using a USB cable to connect your device to your development system (Android* and Apple iOS* devices only). See the Debug and Test Overview for an overview of your available debug options.

Chrome DevTools

The Simulate tab debugger is standard Chrome DevTools (CDT). The SIMULATE tab simulates device viewport sizes, touch events, user agent strings and the core Cordova plug-in APIs (other than unimplemented APIs listed below) for a convenient debugging experience.

To start the debugger after you start the simulator, click the Start debugger button in the toolbar. The CDT debugger is shown in the right part of the SIMULATE tab below:

CDT debugger in Intel XDK SIMULATE tab

CDT lets you view elements and resources, type commands into a JavaScript console, and perform other functions. For example, choose Elements and right click to select options for that source line from a context menu (as shown). For information about this debugger, see

Use the debugger to focus on the simulated 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 and edit source code directly within the CDT window. Modifying the source code in CDT will impact the future behavior of your app; however, modifying sources in CDT does not result in modification of your actual source code in the DEVELOP tab.

To stop the debugger, click Stop debugger in the toolbar.

Unimplemented APIs

The SIMULATE tab supports a subset of the large number of Cordova plug-in APIs that are available to your application from the PROJECTS tab. To learn how running your app within the simulator differs from running your app on a real device see Device Simulator Limitations.

Adding or Modifying Selected Plugins and Restarting the Simulator

After you use the SIMULATE tab to initially test your app, you may need to change plugins settings. To do this, visit the PROJECTS tab, Plugin Management section.

  1. To change the selected plugins, their versions or variables or view plugin documentation, click the PROJECTS tab and see Adding and Managing Plugins if you are not familiar with the Plugin Management section.
  2. After you make changes in the Plugin Management section, click the SIMULATE tab and start the SIMULATOR again.

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.

If you modify your code using an editor you will need to restart your app to test those changes in the SIMULATE tab. Use the refresh  button to force the Simulate tab to reload and restart your app after making source code changes.


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