Debugging in Webstorm


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


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:

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.


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).


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.


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!



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.



I’m also curious about the debugging config.


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(),
devtool: ‘source-map’,

Then debug started working.


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.