June 29, 2016

Setup Ionic 2 + TypeScript Debugging with IntelliJ/WebStorm/Jetbrains IDE

Setting up Ionic 2 debugging is pretty easy. Above all make sure to have the “Phonegap/Cordova” Plugin installed when you want to start Ionic from Run. To do so go to Settings -> Plugins -> Install JetBrains plugin and search for “cordova”.

Install Cordova Plugin IntelliJ

Next step is to enable Run Cordova, go to Run -> Edit Configuration and use the green plus icon on the top right corner of the window to add a new configuration. Scroll down and select “PhoneGap/Cordova”.

Add Cordova Config

For now we only want to add the ionic serve task to the run method. Later you can add run Android, Windows Phone and iOS by yourself. Now set name and command and platform as seen in the screenshot:

Cordova Run Config

We can run Ionic 2 serve now via our IDE. In order to add the TypeScript debugging click the green plus again and select “JavaScript Debugging”:

Add JavaScript Debugging

Name the newly created debugger and choose URL and browser – for me chrome and localhost:8100. Then add the folder mapping of the Remote URL localhost:8100 to the folder containing your ionic project ( where your package.json is ). Your IDE needs this setting to understand how the generated sources and the originally sources are connected.

You are ready to run Ionic 2 from IntelliJ/Webstorm/… and to enable debugging. Make sure to have the browser extension installed:

Debugging in Action1

 

Problems?

My breakpoint is not working:

  1. Make sure that the connection between IDE debugger and browser is ok. To do so go to the debug tab and type “alert(1);”. This should trigger an alert in your browser window.
  2. make sure to have the path to URL mapping correctly in the debug config

If IntellJ/Webstorm recognizes the breakpoints and is able map it to a file the breakpoint changes its look and shows a checkmark on the red dot.

Note to especially to WebStorm and PyCharm:

I received feedback from a Ionic 2 user experiencing issues with the debug configuration in PyCharm and WebStorm (2016.2). He managed to get rid of the problem by adding some more remote URL mappings:

See this thread for further information:
https://forum.ionicframework.com/t/debugging-in-webstorm/52563/2

 

Related Posts

Can Kattwinkel
Developer at thecodecampus </>


7 responses to “Setup Ionic 2 + TypeScript Debugging with IntelliJ/WebStorm/Jetbrains IDE”

  1. Dmitry says:

    Thank for article, js/ts debug in websorm/pystorm is fantastic!

  2. Meatloaf says:

    Thanks for the information! I wasn’t able to get breakpoints working though. Have any other tips to get that working?

    • Scott Kroll says:

      I know this is a month old, but I had to edit the package.json and add:

      “config”: {
      “ionic_bundler”: “webpack”,
      “ionic_source_map”: “source-map”
      }

      Without it, the file mappings wouldn’t work and neither would breakpoints.

  3. Alex says:

    in “\node_modules\@ionic\app-scripts\config\webpack.config.js”
    line: 46
    function getDevtool() {
    if (process.env.IONIC_ENV === ‘prod’) {
    // for now, just force source-map for prod builds
    return ‘source-map’;
    }
    return process.env.IONIC_SOURCE_MAP;
    }

    add to env IONIC_SOURCE_MAP=’source-map’

    or change

    module.exports = {
    ….
    line: 62 devtool: getDevtool(),
    to
    devtool: ‘source-map’,

    Then debug started working.

  4. Phillip says:

    Thanks for sharing

  5. Hai Nguyen says:

    you made my day, thanks !

  6. JRamos says:

    This works fine to debuggin with browser but how can configure intellij to debugging directly typescript with a real device?

Leave a Reply

Add code to your comment in Markdown syntax.
Like this:
`inline example`

```
code block
example
```

Your email address will not be published.