Apache Cordova applications leverage HTML, CSS and JavaScript to create mobile applications that run across multiple device platforms including Android, iOS, and Windows. Today, the Visual Studio Tools for Apache Cordova (TACO) support in Visual Studio helps you get up and running quickly using Cordova. Cordova developers are web developers, and so a lot of Cordova developers start off with using the browser as a way to quickly preview and tweak their applications. In this post, we’re announcing a new browser-based simulator for Cordova developers, which we’re introducing first in Visual Studio Code.

Ionic serve is one popular option used by many developers. Combined with its –lab option, the browser displays preview for Android, iOS, and Windows devices. However, developers still have to comment out their plugin specific code as they start adding device capabilities.

Ripple is another alternative that supports plugin simulation. Unfortunately, Apache Ripple has been retired as an Apache project. Our team has forked Ripple and continues to fix bugs in the project to ensure that developers already using Ripple do not experience disruptions.

As we continue to invest in a browser based workflow, we noticed opportunities to make it better. We wanted to combine the best of Ionic Serve and Ripple, and we are pleased to announce an open source project in collaboration with Intel. This project is now integrated into the latest release of Visual Studio Code and we are working on adding it to Visual Studio.

Like Ripple, it supports simulation of common plugins in addition to live-reload and changing the screen size to test responsive design. It also has the following additions:

• When using an unknown plugin with Ripple, a dialog called “I Haz Cheezburger” is displayed where the developer manually enters the value that the plugin should return. This happens for every call in an unknown plugin. We now have a “persist” option that lets you enter this just once, and this value is reused.
• Plugin simulation is now extensible; a plugin author or the IDE using the project can define the user interface panel that is displayed to enable a developer to change the result from the plugin.
• Unlike Ripple, the application is not displayed in an iFrame. The application is in its own browser window, making debugging easier and removing any side effects that an iFrame may have.

You can start using it now! Install Visual Studio Code if you haven’t already, and then install the Cordova Tools extension. If you do already have the Cordova Tools extension, simply update the extension and this feature should show up in the debug options. If you already have an existing project, you may need to delete the launch.json file, and generate it again.

The team is working on adding support for even more plugins and if you believe that there is a common plugin that should show up in the panels, please find us on twitter. Our team is also working on porting this experience over to Visual Studio and is conducting user studies to determine the best user interface that we can present. If you have opinions on how this should look in Visual Studio, we would love to talk to you. Please send me an email at panarasi [at] microsoft [.] com.

Thank you, Parashuram N, Visual Studio