{"id":93,"date":"2014-12-04T09:00:00","date_gmt":"2014-12-04T09:00:00","guid":{"rendered":"https:\/\/blogs.msdn.microsoft.com\/visualstudio\/2014\/12\/04\/ios-build-debugging-with-the-visual-studio-tools-for-apache-cordova\/"},"modified":"2021-07-26T05:35:37","modified_gmt":"2021-07-26T12:35:37","slug":"ios-build-debugging-with-the-visual-studio-tools-for-apache-cordova","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/visualstudio\/ios-build-debugging-with-the-visual-studio-tools-for-apache-cordova\/","title":{"rendered":"iOS Build &amp; Debugging with the Visual Studio Tools for Apache Cordova"},"content":{"rendered":"<p>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 <a href=\"http:\/\/go.microsoft.com\/fwlink\/?linkid=390465\">Visual Studio 2013 Update 4<\/a> and <a href=\"http:\/\/go.microsoft.com\/fwlink\/?linkid=517106\">Visual Studio 2015 Preview<\/a>). 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.<\/p>\n<p>The Visual Studio Tools for Apache Cordova uses a <a href=\"http:\/\/go.microsoft.com\/fwlink\/?LinkID=511904\">remote agent<\/a> running on OSX to build, simulate, run, and debug an iOS version of your app right from Visual Studio. After <a href=\"http:\/\/go.microsoft.com\/fwlink\/?LinkID=511904\">installing and configuring<\/a> the remote agent on your OSX machine, select either the \u201cRemote Device\u201d or \u201cSimulator -*\u201d 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, <a href=\"http:\/\/msdn.microsoft.com\/en-us\/library\/windows\/apps\/hh696638.aspx\">diagnose layout<\/a>, <a href=\"http:\/\/msdn.microsoft.com\/en-us\/library\/windows\/apps\/hh696638.aspx\">trace the matching CSS rules for each element<\/a>, <a href=\"http:\/\/msdn.microsoft.com\/en-us\/library\/windows\/apps\/hh924759.aspx\">set breakpoints in code<\/a>, <a href=\"http:\/\/msdn.microsoft.com\/en-us\/library\/windows\/apps\/dn688631.aspx\">evaluate JavaScript expressions<\/a>, and <a href=\"http:\/\/msdn.microsoft.com\/en-us\/library\/windows\/apps\/hh696634.aspx\">view console.* messages<\/a>, to name a few.<\/p>\n<p><a href=\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2014\/12\/1731.DOMhighlightinginiOSSimulatorwhenusingtheVisualStudioDOMExplorer_308EE08A.png\"><img decoding=\"async\" style=\"float: none; margin-left: auto; margin-right: auto; border: 0px;\" title=\"DOM highlighting in iOS Simulator when using the Visual Studio DOM Explorer\" src=\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2014\/12\/1731.DOMhighlightinginiOSSimulatorwhenusingtheVisualStudioDOMExplorer_308EE08A.png\" alt=\"DOM highlighting in iOS Simulator when using the Visual Studio DOM Explorer\" width=\"640\" height=\"474\" border=\"0\" \/><\/a><\/p>\n<p align=\"center\"><em>DOM highlighting visible in the iOS Simulator when using the Visual Studio DOM Explorer <\/em><\/p>\n<h2>Secure Remote Connection = Remote Agent Anywhere<\/h2>\n<p>You\u2019ll 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.<\/p>\n<p>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.<\/p>\n<p>We <a href=\"http:\/\/go.microsoft.com\/fwlink\/?LinkID=521519\">recently published a tutorial<\/a> to help you get the agent up and running in a cloud hosted datacenter such as <a href=\"http:\/\/www.macincloud.com\/\">MacInCloud<\/a>, <a href=\"http:\/\/www.macstadium.com\/\">MacStadium<\/a>, 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\u2019s capabilities.<\/p>\n<p><a href=\"http:\/\/go.microsoft.com\/fwlink\/?LinkID=511904\">See our documentation<\/a> or <a href=\"https:\/\/channel9.msdn.com\/Series\/Visual-Studio-Tools-for-Apache-Cordova\/Debugging-your-Apache-Cordova-App-on-iOS\">this video walkthrough<\/a> for details more information on setup, generating a new PIN, or turning off secure mode.<\/p>\n<p><a href=\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2014\/12\/0753.SecurityPinsettingonRemoteAgentConfigurationoptionspage_7058C70F.png\"><img decoding=\"async\" style=\"float: none; margin-left: auto; margin-right: auto; border: 0px;\" title=\"Security Pin setting on Remote Agent Configuration options page\" src=\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2014\/12\/0753.SecurityPinsettingonRemoteAgentConfigurationoptionspage_7058C70F.png\" alt=\"Security Pin setting on Remote Agent Configuration options page\" width=\"640\" height=\"414\" border=\"0\" \/><\/a><\/p>\n<h2>Tightening your iterative debugging loop with incremental build support<\/h2>\n<p>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.<\/p>\n<p>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.<\/p>\n<p>Undoubtedly there will be situations where you may still want to do a full rebuild. We\u2019ve 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.<\/p>\n<p>If you\u2019ve already installed the tools and are actively using it, thank you! If not, install <a href=\"http:\/\/go.microsoft.com\/fwlink\/?linkid=517106\">the Visual Studio 2015 Preview<\/a> and check the optional \u201cTools for Apache Cordova\u201d option or install <a href=\"http:\/\/go.microsoft.com\/fwlink\/?linkid=390465\">Visual Studio 2013 Update 4<\/a> and <a href=\"http:\/\/go.microsoft.com\/fwlink\/?LinkId=397606\">Visual Studio Tools for Apache Cordova CTP 3<\/a>. The improvements we prioritize are based largely on your feedback, so please don\u2019t feel shy in contacting us via <a href=\"http:\/\/visualstudio.uservoice.com\/forums\/121579-visual-studio\/category\/82642-multi-device-hybrid-apps\">UserVoice<\/a>, <a href=\"https:\/\/twitter.com\/VSCordovaTools\">Twitter<\/a>, <a href=\"http:\/\/stackoverflow.com\/questions\/tagged\/visual-studio-cordova\">StackOverflow<\/a>, and <a href=\"mailto:vscordovatools@micrososft.com\">email<\/a>.<\/p>\n<table style=\"width: 678px;\" border=\"0\" cellspacing=\"0\" cellpadding=\"2\">\n<tbody>\n<tr>\n<td valign=\"top\" width=\"133\"><a href=\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2014\/12\/0675.image_thumb_1726DD50.png\"><img decoding=\"async\" style=\"border: 0px;\" title=\"image\" src=\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2014\/12\/0675.image_thumb_1726DD50.png\" alt=\"image\" width=\"133\" height=\"134\" border=\"0\" \/><\/a><\/td>\n<td valign=\"top\" width=\"543\"><strong>Chuck Lantz<\/strong>, Program Manager, Visual Studio Client Tools Team<\/p>\n<p>Twitter: <a href=\"https:\/\/twitter.com\/chuxel\">@chuxel<\/a><\/p>\n<p>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.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n","protected":false},"excerpt":{"rendered":"<p>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). [&hellip;]<\/p>\n","protected":false},"author":13,"featured_media":255385,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1085,4980,1028,155],"tags":[136,9,292,376,124,126],"class_list":["post-93","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-cloud","category-java","category-mobile","category-visual-studio","tag-css","tag-debug","tag-ios","tag-java","tag-javascript","tag-visual-studio-2013"],"acf":[],"blog_post_summary":"<p>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). [&hellip;]<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/posts\/93","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/users\/13"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/comments?post=93"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/posts\/93\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/media\/255385"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/media?parent=93"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/categories?post=93"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/tags?post=93"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}