DevExtreme Vue - Simulation Tools

When developing mobile applications, you have to run them on different devices to see how they look, feel and function. The DevExtreme applications (those that are built using DevExtreme project templates ) can be viewed on any device using the DevExtreme device-simulating tools.

Watch Video

Use Simulator

Press F5 to run a DevExtreme application being implemented in Visual Studio. The simulator will run. It will show the application in different devices.

Application in Simulator

Use the following capabilities of the simulator to test your application.

  • Choose a device

  • Choose between the Portrait or Landscape orientation

  • Choose between the full or half sized device

  • Scan the QRCode to run the application on a real device (read below).

NOTE
Some behavior of widgets in the simulator may differ from the one on a real device. This is because the simulator just emulates a device, but a desktop browser actually runs the application. So some device-specific behavior is not accessible in the simulator. For instance, if native scrolling is set, a simulated scrolling is applied in the simulator. To test such device-specific features, run your application on a device.

The simulator runs to show your application because the DevExtreme project has the Run in simulator property set to true by default. Right-click the project with your application and switch to the Debug tab in the invoked pane. Here you can see the Simulator section and the Run in simulator property in it. If you uncheck this property, the application will run in the browser as a web application. This mode is useful to test the URIs that are generated when navigating between views.

Application in Simulator

As you can see, you can set the default device and orientation for the simulator using project properties.

Run in Device Browser

Run the application in the simulator as described above. The simulator provides a QR Code. Scan it by the device on which you are going to test the application. The QR Code represents a link to your application provided by the dxproxy service. This link is valid only while the Visual Studio debugger is running. As a result, you can load the application in the device's browser.

NOTE
Clear the Automatically upload PhoneGap plugins option in the Debug properties page, since this option is not required when running in a browser.

Run on Device

The Courier application hosts your DevExtreme web app and allows you to experience how your mobile app will behave on a mobile device once it is deployed. The following list explains how to use the DevExtreme Courier.

  • Download the Courier application from Google play, iTunes or Windows Store on your device.

  • Run your application in a Visual Studio debugger and locate the QR code in the simulator.

  • From the Courier application, scan the QR Code using the Scan button. The QR code represents a link to your application. This link is valid only while the Visual Studio debugger is running.

    Application in Simulator

    This will load your application on your device. Test the application. Take a note of the Courier menu that is available while testing an application.

    Application in Simulator

To close the application executed in the Courier, perform a triple click somewhere in a view.

The great thing about using this approach is that you don't have to build native packages every time you test your application on a device.

Use Hardware Functions

Since the application's native packages are prepared using the PhoneGap Build, you can utilize the PhoneGap API to access the device's hardware features within the application. Check out the PhoneGap API Reference to see which device capabilities you can leverage. The Courier application allows you to test these functions without building a native package.

NOTE
The following applications can be tested using the Courier application.

Check out the DevExtreme device access examples article to see sample DevExtreme applications that utilize the PhoneGap API.