Debugging in Webstorm

Ionic Framework ionic-v3
1

Hi everyone,

currently I am building a small app in ionic2 ( 2.0.0-beta.25 ).
Recently I tried to get the debugging of Webstorm started.
As I occur no errors, everything seems to work fine, but my code won’t stop at any breakpoints …

What I have done so far:

  • Installed the chrome jetbrains plugin
  • Added “compilerOptions”:-> “sourceMap”: true in tsconfig.json
  • Added a javascript Debug Configuration ( no RemoteUrls )

Has some a hint or idea what I am missing ?

Kind regards
abcNocturn

2 Likes
2

Maybe too late for you, but for future reference (if this thread had had an answer, it would have saved me hours…).

This post describes the basic setup: https://blog.thecodecampus.de/setup-ionic-2-typescript-debugging-intellijwebstormjetbrains-ide/

What’s missing is a working “Remote URL” to “local file” mapping in the last step.

URL of the debugging config: http://localhost:8100
URL for the project’s root directory: http://localhost:8100/source
URL for the “www” directory: http://localhost:8100

This should work in all JetBrains IDEs (it does work in WebStorm and PyCharm for me).

Hope this helps anyone.

3 Likes
3

hey d1sk0,

are you sure this additional information is required?
I’m running IntelliJ 2016.2 without the mappings you mentioned and the debugging works. I’ve only the “localhost:8100” mapped the Ionic project root (client/ for me).

4

Hey CanKattw,

FWIW it didn’t work without these (or with any other). I tried with latest PyCharm and WebStorm (2016.2).

I could set breakpoints in the generated JS without the above and the IDEA debugger would stop at the corresponding TS line, but all breakpoints in TS files were completely ignored.

5

Strange. For me it works in TS sources with the single mapping to client.

I’ll add a note at the end of the blog post. Thanks for your effort!

6

Hi,

May I know what “debugging config” do you refer to? I am trying to setup WebStorm 2016.2.3 to trap Typescript in Ionic 2 rc0 without success after trying out everything suggested here except for the debug config which I don’t understand.

Thanks.

7

I’m also curious about the debugging config.

8

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.

9

Is it possible to debug on the device like Android? I haven’t been able to figure out if this is possible. I was able to get debugging working in the browser but with Ionic RC.0 (and greater) a lot of plug-ins that used to work in the browser in beta stopped working and require running on the device. Any help would be appreciated.