{"id":1900,"date":"2017-03-04T13:05:21","date_gmt":"2017-03-04T13:05:21","guid":{"rendered":"http:\/\/salientsoft.co.uk\/?p=1900"},"modified":"2018-10-10T17:15:57","modified_gmt":"2018-10-10T17:15:57","slug":"configuring-ionic-2-with-webstorm-for-developmentdebugging","status":"publish","type":"post","link":"https:\/\/salientsoft.co.uk\/?p=1900","title":{"rendered":"Configuring Ionic 2 with Webstorm for development\/debugging"},"content":{"rendered":"<p>Having already configured Angular 2 with Webstorm\u00a0 <a href=\"http:\/\/salientsoft.co.uk\/?p=1880\">here<\/a>, this post details the steps to get Ionic working in similar fashion, to be able to run and debug an ionic application running in a browser. The use of an android emulator\/ a real android (and then IOS) will be dealt with later.<\/p>\n<ol>\n<li>First install Ionic 2 as detailed similarly either <a href=\"https:\/\/ionicframework.com\/getting-started\/\">here<\/a> or <a href=\"https:\/\/ionicframework.com\/docs\/v2\/intro\/installation\/\">here<\/a>.<\/li>\n<li>Next, configure Webstorm as detailed in <a href=\"https:\/\/blog.thecodecampus.de\/setup-ionic-2-typescript-debugging-intellijwebstormjetbrains-ide\/\">this post here<\/a>. Note that the first step adds a phonegap\/cordova plugin which allows <em>Ionic serve<\/em> to be started within Webstorm, without using a separate command window. This trick is similar to <a href=\"http:\/\/salientsoft.co.uk\/?p=1880\">step 10 in this post<\/a> which does the same thing for angular 2\/<em>npm start.<\/em> Note that I had to dig around for the phonegap\/cordova executable \u2013 in my case it was a command\/batch file located at <em>C:\/Users\/SteveW\/AppData\/Roaming\/npm\/ionic.cmd<\/em> , and note that Webstorm did require the .cmd extension explicitly to work. Per the instructions, ensure you select <em>serve<\/em> as the command and at this stage <em>browser<\/em> for the platform.<\/li>\n<li>The second step in the post configures a Javascript Debug configuration. Enter the name and the target URL. Note that in order to get breakpoints to be obeyed, I had to add an entry in the <em>Remote URLs of local files<\/em> section. In my case I just added the same url as at the top, against the top level project folder which was already shown. Prior to this, I could set a breakpoint successfully (meaning I did not have any sourcemap issues like the ones I hit with vs code <a href=\"http:\/\/salientsoft.co.uk\/?p=1872\">here<\/a>), but the breakpoint was not obeyed. Once I added the remote URL everything worked.<\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"<p>Having already configured Angular 2 with Webstorm\u00a0 here, this post details the steps to get Ionic working in similar fashion, to be able to run and debug an ionic application running in a browser. The use of an android emulator\/ a real android (and then IOS) will be dealt with later. First install Ionic 2 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[200],"tags":[199,201],"_links":{"self":[{"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=\/wp\/v2\/posts\/1900"}],"collection":[{"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1900"}],"version-history":[{"count":4,"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=\/wp\/v2\/posts\/1900\/revisions"}],"predecessor-version":[{"id":1905,"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=\/wp\/v2\/posts\/1900\/revisions\/1905"}],"wp:attachment":[{"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1900"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1900"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1900"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}