breakpoint on javascript in CSHTML?

Question

I have a .CSHTML file that has a javascript tag. Within this script tag I have a few lines of javascript. The first line of javascript refers to a property in the @ViewBag. All other javascript lines are plain script without any MVC related references.

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

It seems only the breakpoint without the white dot is hit during run-time.

Question: Can somebody explain what is going on here? What does the white dot mean? Why is the plain red breakpoint line the only line that is hitting the breakpoint?

Answer 1

The Visual Studio debugger is actually expecting you to debug the actual server-side code within your .cshtml file as opposed to the client-side Javascript within it.

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

An easy approach would be to take advantage of Javascript's debugger keyword, which you can place in your code and run with the Developer Tools open (just press F12 and then refresh your page). It will hit a breakpoint and the browser will allow you to step through 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
}