Webstorm 2017.x Debugging Setup for Ionic/Angular

During the process of developing a full featured app with Ionic 3, Angular 4, Webpack, RxJS, Firebase 3 I finally had my fill of debugging via Chrome. My IDE of choice at the moment is Webstorm 2017.x coupled with Chrome Canary dev tools. Ive been increasingly frustrated with the environment, as Ive been running sans debugger with the exception of devtools breakpoints within Canary.

Introduction

 This has some issues with Webpack, as the Canary debugger  is based on the packed build files. This limits some of the method/property ID”s to the packed names (for example, if I”m trying to debug a local var named ”user”, that var is named something unintelligible like ”U” in the packed files). The app I”m using as a test case uses a lot of async calls to data API”s that seem to choke Canary with a lot of failed http calls. Great for fixing all my error handling, but that”s not really the point, is it ? At any rate, I decided to use something that was problematic in the Canary debugger as a viable use case.

Considerations

Webstorm 2017.1 solves a lot of the headaches here. Most issues seem to revolve around setting Source Maps properly, which 2017.1 seems to handle quite nicely without editing the ts configuration file. The issue with Webpack isn”t entirely solved here, but I don”t really care because I”m setting breakpoints in MY source code, and have access to the local scoped vars with their original context within the Webstorm environment. Globals are another issue- they generally tend to get obfuscated by Webpack. In case you are tempted (or smarter than me), Canary DevTools & Webstorm do not play nicely together. 

Ok, now that we”ve gotten past the usual disclaimers and caveats, lets get on with some action !

I’m not going to build an app here, for that I suggest you use the ionic-cli tool, npm install, ……..https://ionicframework.com/docs/cli/ as a starter, or pull in a repo that you’re happy to start with (that works !)

My assumption is that you have a working app, and we are just going to do the configuration bits to add debugging features to Webstorm.

Setting up the environment

You”ll need the latest version of Webstorm for all this to work properly. Anything newer than 2017.1 should work fine. Load your project into Webstorm & run npm install to resolve dependencies and scripts. You should be able to run ”ionic serve” from within Webstorm or from the terminal. Make sure everything works before we start.

Installing the JetBrains Chrome extension

The JetBrains Chrome extension is mainly responsible for debugging JavaScript in Chrome. During a debugging session, the extension also supports Live Editing of HTML, CSS, and JavaScript, and shows the DOM tree and the source code of the actual page. When the extension is installed, the chrome extension icon is displayed next to the Chrome address bar. You can install the extension during the first debugging session with Chrome or Dartium or at any time directly from the Chrome Web Store.

1. 1. Open the JetBrains IDE Support page by doing one of the following:
      • • Visit the Chrome Web Store at any time.
      • • Start a JavaScript debugging session: create a JavaScript run configuration with Chrome as the debugging browser, and click the Debug button  on the toolbar. For details, see Debugging JavaScript in Chrome.
      • • Webstorm informs you that it is waiting for connection with the JetBrains IDE Support extension and shows the following message in the Debug tool window:
          

          

          Click the JetBrains IDE Support extension link which brings you to the Chrome Web Store.

      In either case the JetBrains IDE Support page opens.

1. 1. Click the Add to Chrome button 
   2. In the Confirm New Extension dialog box that opens, click Add. The Add to Chrome button changes to Added to Chrome.        .

When the extension is installed, the  icon is displayed next to the Chrome address bar.

Working with JetBrains Chrome extension

Control over the JetBrains Chrome extension is provided through the chrome://extensions/ page:

• • To open the chrome://extensions/ page, click the Customize and control Chrome button  next to the address bar, then choose Tools | Extensions on the context menu.

• • To deactivate the extension, clear the Enabled check box. The check box name changes to Enable.

• • To activate the extension, select the Enable check box.

• • To uninstall the extension, click the Remove from Chrome button .

Overriding the default CORS settings

Suppose the page you are debugging requests a resource which is protected against access for security reasons through CORS settings, see https://developer.mozilla.org/en-US/docs/HTTP/Access_control_CORS. You can enable access to the resources protected by default by changing the Chrome extension options. To override the default CORS settings:

1. Right-click  and choose Options on the context menu. A web page with Chrome extension options opens showing the parameters to connect to Webstorm.
2. In the Force CORS text box, type the pattern that defines the URL addresses you want to make accessible, for example: http://youtrack.jetbrains.com/rest/*.

Changing Debug Port

During a debugging session, the Chrome extension listens to the port of the JetBrains IDE from which the extension was invoked. Each IDE including Webstorm has its own default port on which it starts by default. The default port is 63342 .

If for some reason the default Webstorm port is already busy, Webstorm finds the closest available port and starts on it. This results in a conflict: Webstorm is running on a “new” port while the Chrome extension still listens to the port of a previously started product and fails to establish connection with Webstorm. The conflict reveals when you initiate a debugging session from Webstorm: the extension fails to connect through the default port, Webstorm waits for connection from the extension and displays the following message with the port number where it is actually running:

To fix the problem, specify the actual Webstorm port in the Chrome extension options:

1. Right-click  and choose Options on the context menu. A web page with the Chrome extension options opens showing the parameters to connect to Webstorm.
2. In the IDE Connection area, specify the actual Webstorm port in the Port spin box.

Setting up Webstorm

Open Webstorm and do your thing with loading your project, npm install, etc and test with ”ionic-serve” in the IDE terminal. As long as your app is running, we can proceed with setting up Webstorm.

Run Configuration

We are going to set up a run and debug configuration. The run configuration will simply invoke the ”ionic serve” command. You”ll need to specify your package.json file which is typically located in the project root. You will also need to specify the location of your node binary. Node should be a release > 6.10 The following shows the typical run configuration for executing the ”ionic serve” command. Note that the run configuration should be created under the ”Phonegap/Cordova” template. After completing, hit the [OK] button.

Debug Configuration

For the debug configuration, we open the Run/Debug configuration window. Add a new configuration by selecting the ”+” button at the upper left. This will open a default selector, select the Javascript Debug template option.This will take you to a configuration screen. On the configuration screen, we”ll need a debug configuration name [Ionic Debug]. We will also need the debug URL, which in our case is http://localhost:8100 Select your browser (must be chrome or chrome Canary). One issue is that Webstorm doesn’t behave well when both Chrome & Canary are installed on the development platform. In my case, I just use Canary. I believe there is an open issue on this, but unsure. I have not tested this on plain-jane chrome, but it should work just fine either way. Canary will show up as a Chrome icon for some reason, in my case I made Canary the default shown below.Hit [OK], and our configuration is complete.

Running & Debugging

Using the run command, start the app by running the run Ionic configuration. You”ll see the Webstorm console invoke the compiler & build process starting the app. Once the view successfully renders in the browser, we can initiate the debugger. Start the debugger by running the ionic debug configuration. If all is configured properly, you should see a yellow Jetbrains notification bar in the Canary browser indicating the debugger has connected Webstorm & the Canary browser. Once all this is complete, the view will render in the browser along with the debugger notification:Now going back to the Webstorm interface, we can set breakpoints, inspect variables, set watches, etc..In this screen shot we”ve set a breakpoint which triggers when the user logs out of our app:Thats about it ! Ill leave a more in-depth use case for the debugger as a follow-on post. Hope this helps, feel free to comment any suggestions, improvements, issues, or constructive feedback.