Debugging Angular Typescript files

Type script is converted into Javascript at runtime. It would be nice to be able to set break points on your TypeScript in Chrome when debugging. This can be done easily.

In the Developer tools, Source tab, there are a list of Sources.
Expand the ‘webpack://’ source
Expand the ‘.’ folder
Expand the ‘src’ folder
Find your ts file that you want to set a break point in, and you are done.

Another option.. Angular Augury

Google Angular Augury.
Install it.
It is a Chrome Extension.
Now Augury should show up in your Developer tools (in your tabs with ‘Sources’).
Using Augury, you can watch what is going on with your Angular as your pages run.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s