Debugging typescript in chrome?

Ionic Framework ionic-v3
1

Hi,

I’m coming from the angular 1.x / plain JS and experimenting with Ionic 2 (Angular 2 / typescript). I’m used to set break points or adding the debugger keyword and see my code in chrome. I’m trying to do the same with ionic 2 after running the command ionic serve but without success. I see the map files being created but in chrome I see only the app.bundle.js.

Any idea ?

thanks

1 Like
2

I personally, use the app.bundle.js to debug. Your typescript code is there, but not it is in “raw” Javascript. It is not that bad though.

I put “sourceMap”: true in my tsconfig file, but it does not seem to do anything.

For sure, if someone answer your request that would be nice.

2 Likes
3

here is the trick: after putting “sourceMap”: true in your tsconfig add devtool: 'source-map', to webpack.config.js

 module.exports = {
  devtool: 'source-map',
3 Likes
4

kudos to you!

Thanks

5

Works great, thanks for the tip!

6

Sebastian, you made my day!!!
This should be part of a FAQ or in the typescript default starter files!

7

Hy, i tried your suggestion but when i try to debug an app on an android device with chrome dev tools and i hit save on the edited app.bundle.js the app closes, any idea why?

Thanks in advance.

8

Thats asking too much for chrome dev tools, when inspecting device its aimed to see the code in the device, not modifying it, i think it’s not a good idea to do that, after all the js code in device is supposed to be transpiled down to ES5, and the debug showing in Typescript are due to SourceMaps, it’s not actual code.

9

I was asking because in ionic one i could do that, i mean save it in dev tools just until the session, of course it wasnt permanent after i closed the app that edit code disappeared, no problem with that, but know i cant do that in ionic2 when i hit save in the dev tools the app restarts so my session is gone so the code is gone

1 Like
10

As i said, ionic 2 code is at least transpiled to ES5, so if you suddenly change the code to ES6 equivalent it will not be able to understand it and it will crash, or at least is what i think it should be happening, is what i expect to happen.

11

Follow steps from 1 and 2 and restart your app with ionic serve

1) enable it in your webpack config

https://github.com/mhartington/Devnexus2016/blob/master/webpack.config.js#L16

** 2) In your tsconfig**

https://github.com/mhartington/Devnexus2016/blob/master/tsconfig.json#L9

https://github.com/mhartington/Devnexus2016/blob/master/tsconfig.json#L10

3) restart the server

After restart you should able debug typescripts files using chrome developer tools under source> (webpack)building folder

1 Like
12

you are even able to debug from your IDE and not via Chrome. For IntelliJ or WebStorm see http://blog.thecodecampus.de/setup-ionic-2-typescript-debugging-intellijwebstormjetbrains-ide/

1 Like
13

I am using ionic 2.2.0, is webpack the default bundler ? I think @mhartington said that they did not put a default bundler in ionic to leave possibilities open.

14

On ionic3 this solution is not working anymore.
Can someone help find out the new solution??

We need to debug ionic-angular lib in our app, how can we do this?

16

you don’t need this any more in ionic3 it prebuild you can see sources:localhost:8100

17

I tried your suggetion its not working in my app :frowning_face:

18

this is not working when it is connect to real device not abel to see TS file.