Debugging ionic2 apps tool


#1

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.


#2

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.


#3

Thanks! Is devtool also in the output stanza?


#4

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.


#5

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