How do you debug Typescript in Chrome?

#1 · January 13, 2018, 7:26 am

Hi,

I used VS2017. I tried to set debugger on VS at the typescript code and it didn't hit the breakpoints. I can debug just fine in IE. Also, I tried F12 in Chrome and there is no ts file in the source that I can choose. I see only js file. I wonder how you debug in Chrome.

Thanks,

Sam

#2 · January 15, 2018, 11:40 am

Check to see if you're using a "Release" build.

If you are change it to debug, delete the "dist" folder under wwwroot and rebuild your solution. This will generate source maps and you should be able to debug in both chrome and VS.

Note: Ensure typescript debugging is not disabled in VisualStudio (Tools => OPtions => Debugging => General => Enable JavaScript debugging for ASP.NET (Chrome and IE)

#3 · January 15, 2018, 6:20 pm

Thank you for your response, Eben,

I followed your instruction but it still didn't break into VS. I attached the bitmap files for you. Just curious, do you usually debug in Chrome?

#4 · January 15, 2018, 8:33 pm

Yes I almost always debug JavaScript in Chrome.

I prefer the browser because debuging JavaScript with VisualStudio back then didn't work very well (I think they've polished it now).

In your case with WebPack look for the folder with the name "..\..\." This will contain all the scripts you wrote. If you don't see it leave the developer window opened whilst refreshing the page with (Ctrl+F5) to force reload everything. Or restart your browser where possible.

Alternatively you can drag the entire ClientApp folder into the developer window do debug from there (see https://developers.google.com/web/tools/setup/setup-workflow). This can be quite powerful.

IMPORTANT!

This forum is now archived. Click here for the New Support Forum