iOS Build & Debugging with the Visual Studio Tools for Apache Cordova

The Visual Studio Tools for Apache Cordova enables developers to easily build a mobile app that targets iOS, Android, and Windows with web standards technologies. At the Connect() event in mid-November, we added iOS debugging to the existing support for Windows and Android (for both Visual Studio 2013 Update 4 and Visual Studio 2015 Preview). With the addition of iOS debugging support, the tools for Cordova enable you to stay in Visual Studio for the majority of your development experience.

The Visual Studio Tools for Apache Cordova uses a remote agent running on OSX to build, simulate, run, and debug an iOS version of your app right from Visual Studio. After installing and configuring the remote agent on your OSX machine, select either the “Remote Device” or “Simulator -*” debug targets in Visual Studio to automatically build, deploy, launch, and attach the JavaScript Debugger, DOM Explorer, and JavaScript Console to your running app. You can then inspect and edit the live DOM, diagnose layout, trace the matching CSS rules for each element, set breakpoints in code, evaluate JavaScript expressions, and view console.* messages, to name a few.

DOM highlighting in iOS Simulator when using the Visual Studio DOM Explorer

DOM highlighting visible in the iOS Simulator when using the Visual Studio DOM Explorer

Secure Remote Connection = Remote Agent Anywhere

You’ll notice that when you set up the remote agent you are now asked to enter a PIN into Visual Studio in addition to a host and port. Starting with Tools for Apache Cordova CTP3 and the Visual Studio 2015 Preview, VS transmits build payloads securely by default and entering the temporary PIN causes Visual Studio and the agent to exchange certificates for securing a connection. The agent connection is locked down using SSL certificates tied to the machine host name and any IPs that were associated with it when the agent started first started up.

Securing the remote connection with a PIN helps enable you to keep your personal agent running on a remote Mac anywhere you see fit (even a cloud hosted datacenter) while helping to ensure that only you have access to build payloads, the iOS Simulator, and the new debugging tools.

We recently published a tutorial to help you get the agent up and running in a cloud hosted datacenter such as MacInCloud, MacStadium, or others that provide low cost pay-as-you-go options where you can go beyond just cloud build and use the full extent of our remote agent’s capabilities.

See our documentation or this video walkthrough for details more information on setup, generating a new PIN, or turning off secure mode.

Security Pin setting on Remote Agent Configuration options page

Tightening your iterative debugging loop with incremental build support

When updating our remote build agent to support debugging, we realized that debugging for performance can be difficult when remotely building projects. This can become particularly frustrating when you are trying to debug an issue that forces you to rebuild your app repeatedly.

To address these issues, the Visual Studio remote build agent now has incremental build support. The agent retains the last several builds and if Visual Studio detects that a previous build is still present, reuses the existing native build artifacts, and only transmits deltas to the remote build agent on OSX. The result is that a project with a large number of Cordova plugins installed that took 54 seconds to build initally can take a little as 7-12 seconds to build a second time. The improvements are even more significant if you are connecting to an OSX box on a slow or busy network.

Undoubtedly there will be situations where you may still want to do a full rebuild. We’ve got you covered there too as doing a clean or a full rebuild from Visual Studio will result in a fresh build on your remote Mac as well.

If you’ve already installed the tools and are actively using it, thank you! If not, install the Visual Studio 2015 Preview and check the optional “Tools for Apache Cordova” option or install Visual Studio 2013 Update 4 and Visual Studio Tools for Apache Cordova CTP 3. The improvements we prioritize are based largely on your feedback, so please don’t feel shy in contacting us via UserVoice, Twitter, StackOverflow, and email.

image Chuck Lantz, Program Manager, Visual Studio Client Tools Team

Twitter: @chuxel

Chuck spent over 15 years as developer, advocate, and architect in a variety of mid and large scale enterprise IT shops. He brought his passion for web based app development to Microsoft in 2012 and is currently focused on mobile app development and Apache Cordova.