Debugging ionic2 apps tool


Currently when I am debugging ionic2 apps I use Google Chrome’s Developer tool to inspect my device. I read the console for any errors. The problem I am faceing is when errors occur the error messages are usful but they don’t say where the occur. They just say where the error was called from the framework (e.g app.bundle.js:34121). It doesn’t though say which of my app pages are causing it. It would be useful if it said the error is occurring for instance on app.ts on line 5. Is there a way to get this type of debugging help. Most languages and frameworks work like this, for instance Java will give you a stacktrace and on the top usually it says which of your classes is causing the error and the line number.


Assuming you’re using TypeScript, try setting "sourceMap": true in your tsconfig.json, pathinfo: true in the output stanza of webpack.config.js, and devtool: 'source-map' also in webpack.config.js.


Thanks! Is devtool also in the output stanza?


Ya I’d like more info on this too. I’ve used souremaps for debugging before, but for whatever reason with ionic it’s not generating sourcemaps. I tried the options you listed and that does give me the file name with each module in the final app.bundle.js, but I’d really like to get souremaps working.


No, it is its own stanza, at the same level of “entry”, “output”, and “module”.