Javascript breakpoint in CSHTML?

Question

I have a .CSHTML file that has a javascript tag. Inside this script tag, I have some javascript lines. The first line of javascript refers to the property in @ViewBag. All other javascript lines are regular scripts without MVC references.

Observation: I can place breakpoints (visual studio 2015) on each of these javascript lines. However, all breakpoints have a white dot in the center of the breakpoint symbol (red circle) EXCLUDE for the row using the @ViewBag link (this particular row does not have a white dot in the center).

It seems that only a breakpoint without a white dot falls at runtime.

Question: Can someone explain what is happening here? What does the white dot mean? Why is a simple red breakpoint the only line that hits a breakpoint?

Answer 1

The Visual Studio debugger actually expects debugging of the actual server-side code in your .cshtml file, unlike the client-side Javascript inside it.

IIRC, Visual Studio will allow you to debug Javascript code, as expected in Internet Explorer (and possibly Edge), but for other browsers you most likely want to use a third-party tool or developer tools (F12) in your browser.

A simple approach would be to use the Javascript debugger keyword, which you can put into your code and run using the developer tools to open (just press F12 and then refresh the page). It will hit a breakpoint, and the browser will allow you to execute your code, as you might expect:

 function doWork(){ // Ensure that this line is hit with the Developer Tools open in your // browser debugger; // Do work here }