Debugging Cordova App with Webpack sourcemaps

[justme1]

Angular2 + TypeScript + Webpack Cordova app - I want to be able to debug original TypeScript files on my Android phone when debugging app using Chrome.

What is additionally needed to configure in order for the sourcemap to also work in a remote mobile device running cordova app bundled by Webpack?

Will add current configurations on demand.

[mhegazy]

What version of VS are you using? what version of TS?

[justme1]

TypeScript 1.8
Not using VS (Webstorm instead)

[mhegazy]

Your debugger needs to support webpack source maps. most do. we have done work in VS 2015 Update3 to support this scenario specifically. i am not familiar with what webstorm does for debugging to be frank so can not comment on this.

@sheetalkamat is the expert, she can give some guidance here as well.

[justme1]

The debugging is being done inside of Chrome - not Webstorm (it's only the IDE, not used for debugging).

I'm describing here the most basic workflow using Webpack + Typescript debugging Cordova app - should be pretty straightforward to set it up. Unfortunately, I couldn't find exact config online to support this.

[sheetalkamat]

@justme1 Webpack puts the sources inline, so chrome might be able to show you typescript files when debugging. You would need to try it out. We did some work so that the inline files can be mapped to the actual disk files in VS but irrespective of that work there is possibility that it would just work, given chrome can find the sourcemap file.

[justme1]

@sheetalkamat Unfortunately I've opened an issue here because I couldn't find the files in Chorme when debugging the Cordova app. However, when I debug using webpack-dev-server as a website I'd see the files in Chrome when debugging.

I think the problem is that the TypeScript files aren't accessible to the Android phone as they are located on my computer, opposed to the case when debugging as a website from my machine where the files are accessible.

I could write here the webpakc config if you want.

[justme1]

any news on this?

[sheetalkamat]

@justme1 , Can you check if your app that you compiled with webpack has inline sources? That is in the source map file of the .js file has contents for the typescript file it is compiled from.

[justme1]

@sheetalkamat you want to check the sourcemap files and see if the sourcemap files contains the TypeScript file in it, am I right?

[sheetalkamat]

@justme1 yes that's right.

[justme1]

@sheetalkamat from the check I've made I'm pretty sure that yes, it does contain the actual TypeScript files in the sourcemaps.

I'm using:

module.exports = {

devtool: 'source-map',
watchOptions: {
poll: true
},

entry: {
"vendor": [
path.resolve(__dirname, 'app', 'vendor')
],
"app": [
path.resolve(__dirname, 'app', 'boot')
]
},

...

[justme1]

Seems like it is now working:

All I needed to do was to use

devtool: 'inline-source-map',

instead of

devtool: 'source-map',

Does that makes sense? Now everything is working (breakpoints, I see all TS files - this rocks!)

[justme1]

@sheetalkamat, do you have any experience in regards to sourcemaps & TypeScript using Safari in Mac?

Everything is working perfectly on Chrome both on Web & Cordova - but I'm unable to see the TypeScript files using same configurations in Safari.

It's important for me due to the fact the debugging iOS Cordova app is only possible using Safari :-(

[sheetalkamat]

@justme1 glad that worked. I haven't used source map debugging with safari so I don't have much idea if and what they support. Sorry.