Javascript breakpoints in Visual Studio 2017

Question

I just installed Visual Studio 2017. After starting an ASP.NET MVC application I get the message that chrome debugging in Visual Studio is enabled.

The breakpoints on Razor code seems to be working but Javascript does not. The breakpoints are not fully red like they should be. A restart, rebuild don't seem to take any effect.

@Html.Partial("_Test", Model.Test) // debugging works here

<script>
    var i = 1;
    console.log(i); // debugging does not work here or above
</script>

@section scripts {
    <script>
        var a = 11;
        console.log(a); // debugging does not work here or above
    </script>
}

Answer 1

This feature does not work for javascript code inside a *.cshtml file, but only for code in separate *.js (or *.ts) files.

Notice how the breakpoint in the JavaScript file is active, while the breakpoint in the Razor view is not.

I have also noticed that breakpoints will not be hit for JavaScript files when JavaScript code is executed during page load when the page is loaded the first time in the current Chrome session. Breakpoints will only work after the document has finished loading once.

Answer 2

Another tip: js debug only can be enabled after setting 'start URL' on run/debug.

Only in this way VS will attach to browser process.

Answer 3

I had the same issue. I followed the instructions from the same post: https://blogs.msdn.microsoft.com/webdev/2016/11/21/client-side-debugging-of-asp-net-projects-in-google-chrome/

I did the following in Visual Studio: Go to Tools -> Options -> Debugging -> General and turned off the setting "Enable JavaScript Debugging for ASP.NET (Chrome and IE)". Saved changes, then run the webpage.

After this, I noticed that Chrome was not showing the "Debug webpage" before loading my page. Then i closed my webpage and stopped the debugging session.

I re-enabled the "Enable Javascript Debugging for ASP.NET (Chrome and IE)" option, then run the webpage using IE, and it worked. The page stopped and the breakpoint showed up in my visual studio.

Answer 4

I had the same issue, new to .net core, a solution that worked for me was to add debugger; at the top of the script:

<script>
  debugger;

  -- rest of your jscript here
</script>

Answer 5

It does work in vs 2017 only with enabling option "Enable Javascript Debugging for ASP.NET (Chrome and IE)" and setting debugger; in js code in *.cshtml as well as *.js file

Answer 6

After thinking the only way to get this working was to do a repair on Visual Studio 2017, using the installer, I realized that we had BundleTable.EnableOptimizations = true; in Bundle.config . I removed this line and added it to Web.Debug.config transformation and it started working as expected.

Answer 7

Two options you could try:

1. Turn off the "Enable JavaScript debugging for ASP.NET (Chrome and IE)" in VS options, and then use the debugger (F12) in your browser.
2. Start debugging in Visual Studio and then add your breakpoint(s) in Solution Explorer -> Internet Explorer -> <your view name> . (Assumes you are using IE)

Answer 8

My best guess here (at least in my case, potentially in your case as well) is that it has to do with bundling. The project I'm working on right now bundles separate scripts into one Big Daddy script (without minifying in debug configuration) so my hunch is that VS won't map my breakpoint to that ultimate script run in the browser.

I know this doesn't answer the question since it's just a hunch, but I'm hoping it points us in the right direction. Maybe if we can validate this against others' experience this could evolve into a real answer.

Answer 9

For those who use Google Chrome Portable (or added chrome to browsers debug list manually) helps this:

https://docs.microsoft.com/en-us/visualstudio/javascript/tutorial-nodejs-with-react-and-jsx?view=vs-2017#set-and-hit-a-breakpoint-in-the-client-side-react-code

You need to attach then to proper chrome instance manually and viola

Answer 10

• Visual Studio Professional 2017 Version 15.8.1
• Chrome Version 68.0.3440.106 (Official Build) (64-bit)

I had to enable Legacy Chrome JavaScript debugger under:

Options -> Tools -> Debugging -> General -> Enable legacy Chrome JavaScript debugger for ASP.NET

Answer 11

I finally got all my break points to begin hitting after I right clicked on IIS Express and Exit after working for many hours.

I had debugger in my script files and break points and as soon as I did a Clean Solution > Debug my breakpoints started to begin to hit again.

I understand how frustrating this is and I am just letting the stackoverflow community know what worked for me.

Answer 12

我遇到了同样的情况 Javascript 断点没有命中，然后我卸载并重新安装了 Visual Studio 2017，它又开始工作了

Answer 13

I had the same situation Javascript break point were not hitting and then i uninstalled and reinstall visual studio 2017 but it dosent work. Re install Windows 10 no solution. Than finally I re-educated computer science. Now everythigng is ok.

Thank you vs2017, thanks all of microsoft.