Javascript breakpoint not work in Visual Studio 2019 asp.net application

Question

I recently upgraded from VS 2017 to VS 2019.

In VS 2017, when running an asp.net application locally, using Chrome, I could put a breakpoint in javascript code and the debugger would stop on the breakpoint. This no longer works in Visual Studio 2019.

What do I need to do to enable javascript debugging in Visual Studio 2019 using Chrome? I would like to be able to put breakpoints in javascript files and have them hit.

Here is my setup.

1. I've enabled Javascript debugging.

2. I put a breakpoint in my Javscript code. This breakpoint is in a *.js file (not inside a Razor view).

3. The breakpoint is ignored. Visual Studio very courteously shows me a tooltip telling me the breakpoint will be ignored.

Answer 1

Besides enabling JavaScript debugging in Visual Studio, please ensure that minification is off. (Turn off bundling/minification while debugging in WebForms)

Answer 2

If your page contains Razor syntax, the breakpoints won't work.

Instead add the debugger; statement into the script as a breakpoint.

Then again, the debugger statement had failed to work earlier this year. It only works at top level, means before the page is completely rendered. It will not work if I put the debugger statement into $(document).ready()

So my work around now is to put my javascript in a separate .js file without any Razor syntax.

Answer 3

The good old console.log works for me as nothing suggested as above answers are working at all. Anyway it is what it is amidst the frustration for VS, nothing new about that.

Answer 4

If your Javascript is in a Razor file it will not work.

I have been struggling with this for ages and getting by with console.log. But just now I moved the js into an external file and bingo it works.

I am using latest VS 16.11.5 and Chrome in a .Net 5 project with Razor pages.