Client and server side JavaScript debugging experience for Visual Studio Community 2017

Question

I vaguely recall debugging client side JavaScript code inside of Visual Studio many years ago (this was before browsers has Dev Tools, and you had just the Firebug extension for Firefox), but more recently when I try it, I cannot break into the script inside of Visual Studio and I have to use the debugger in Dev Tools inside the browsers.

When I set a breakpoint within Visual Studio and run my application, the application does not honor the breakpoint and just keeps running. When I look at the breakpoint in the code editor, I see a message that reads:

The breakpoint will not currently be hit. No symbols have been loaded for this document.

I am using Firefox 62.0.3 on 64-bit Windows.

My question is:

1. Just like the "Chrome Debugger" extension for Visual Studio Code allows for the JavaScript debugging experience inside Code , for both client and server side JavaScript, is there something that I can use with Visual Studio Community 2017 to debug JavaScript, and also support source maps?

2. Also, this is not very important, but since I have not been able to debug JavaScript inside Visual Studio for quite some time now, I am beginning to doubt whether I actually debugged it in Visual Studio or was it just a dream, or a memory gone wrong. But I am pretty sure, 100% that I did. But still, I don't know. I know that I did, but sometimes, I just want to make sure that it wasn't just me.

Answer 1

Adding a few more updates to the previous answer -

1. Microsoft Edge debugging is supported starting with version 15.7 of Visual Studio 2017. You will need to be on " Windows 10 April 2018 Update " or later.
2. Also by default Javascript debugging has been disabled by default on Visual Studio 2017. You can enable that as shown in the post above or automatically let Visual Studio show the below dialog box when you start debugging with a breakpoint set in JavaScript/TypeScript file. Enabling JavaScript dialog box in Visual Studio 2017

Answer 2

Yes options are there to enable debugging JavaScript in visual studio 2017 too. 1. Go to tools and then select options 2. Then by click on the debugging tag you can able to see many check box options. 3. In that check whether your visual studio is enable with JavaScript debugging options provided.

By enabling this you can able to use Client Side JavaScript debugging on Visual Studio 2017

Answer 3

The short answer is:

1. The JavaScript debugging experience for Visual Studio is available only for debugging scripts inside Chrome and Internet Explorer. I am not sure if it is available with Microsoft Edge. And since Internet Explorer is pretty much out of use, the only popular browser that this experience is surely available for is Chrome.

   So, make sure you select Chrome from the list of browsers in the toolbar when launching your debug session in Visual Studio.

2. Yes, I wasn't dreaming. I used to be able to debug those JavaScript files inside of Visual Studio, but at the time, I would be unconsciously using Internet Explorer. That experience was available only for Internet Explorer.

A few things to make sure you're doing before you start debugging:

1. Make sure you're running a debug configuration, so all your symbols are loaded.To do that, go to Project -> Properties , and from the dialog, navigate to the Configuration Properties page, and select Debug as the active configuration for the fields highlighted in the picture below.

2. Like Prasanna Brabourame said in his answer, check the checkbox that reads "Enable JavaScript debugging for ASP.NET (Chrome and IE)" from the Tools -> Options -> Debuggging dialog.