How to debug Ionic4 with WebStorm?

Ionic Framework ionic-v3
1

Hi,
I can’t debug an Ionic4 app with WebStorm, because the breakpoints don’t work.
To configure the system I have done these things (according to this article):

On Ionic app:

  • Added the entry “start”: “ionic serve” in package.json,
  • added “sourceMap”: true in tsconfig.json,

On Chrome:

  • installed and enabled the WebStorm plugin,

On WebStorm:
– added a new Javascript debug configuration with URL: http://localhost:8100

When I launch the debug, it opens the app into Chrome, in the WebStorm console I can see these messages:

> ionic serve
Debugger listening on ws://127.0.0.1:51405/19a574a3-dc1d-41c9-90a5-2c616834feb5
For help, see: https://nodejs.org/en/docs/inspector
Debugger attached.
> ng run app:serve --host=0.0.0.0 --port=8100
[ng] Debugger listening on ws://127.0.0.1:51414/8a517b94-5de8-415e-9f30-1330e343e179
[ng] For help, see: https://nodejs.org/en/docs/inspector
[ng] Debugger attached.
....

But the breakpoints don’t work.
Which could be the problem?

cld

2

Steps tested and fully working for debugging Ionic 5.0.7 with WebStorm 2020.1 :

  1. Configure a JavaScript Debug configuration (note the right 8100 port used by default)
    image
    image866×504 26.6 KB
  2. run ionic serve
  3. Start debugging
    image
  4. A new chrome process will start, remember to use that window else the debugger won’t work!
1 Like
3

@yurik94 What do you mean when you say remember to use that window else the debugger won’t work! ? What if I want to configure the debugger while the code runs on the emulator when using the command ionic cap run android -l --external? How would I configure the debugger then?