If you're creating an ASP.NET Core MVC project, then how do you debug JavaScript in Visual Studio?

If you’re making ASP.NET projects in Visual Studio like me, you’ve probably grown accustomed to using breakpoints to debug your code. It makes it easy! Wrote a controller action that isn’t working like you expected? Put a breakpoint at the start of the method to verify you’re reaching it in the first place, then follow along step-by-step and see where things are going off the rails. And that works great when you’re debugging your C# code, but what about that jQuery script you’ve got at the bottom of your razor page? Visual Studio won’t let you place breakpoints there, so how do you debug?

A breakpoint in Chrome’s developer tools

My preferred method is using the built-in developer tools in Chrome. Other browsers have them as well, but your mileage may vary. Start by launching a Visual Studio debug session in Chrome, then once your application is open in the browser, right click the page background and click ‘Inspect.’ The developer tools will either open in their own window or else docked on the side/bottom of the existing browser window (the screenshot above is in its own window). Select the ‘Sources’ tab at the top, and as you navigate to pages in your application, the rendered HTML will be displayed under the ‘Home’ folder (if you’re already on the page you want, reload the page to have the HTML show up). To place a breakpoint, just click the line where you want it (line 445 is selected in the screenshot above). When you restart the page, the browser will pause at the breakpoint if it reaches it, and if it doesn’t, then pop on over to the console to investigate further.

I hope this proves helpful for you all! Happy debugging!