无法使用Visual Studio 2017或2019调试浏览器JavaScript

Question

I am trying to debug a Web app with some ASP.NET (vbhtml) components and some more regular HTML5 bits. It was built several years ago and makes extensive use of Knockout. Some of these parts are broken and I am trying to debug them.

The project includes an API (WebAPI 2) and some other stuff. It is not straightforward to separate out the HTML5 parts and debug them using VSCode, so I think I am stuck with using Visual Studio.

For a tantalizing few minutes two days ago I was able to set breakpoints, step through the Javascript code and find one problem. I am not sure what I did right. Since then I have been unable to do any debugging of the Javascript components. I have tried using Visual Studio 2017 and 2019.

I ran debugging with Chrome selected and script debugging enabled. As soon as the browser launched, the breakpoint got a yellow flag at its left hand end which showed a message: The breakpoint will not currently be hit. Breakpoint set but not yet bound.

The browser ran normally but the breakpoint was not hit. When the Inspect window was open I could see some stuff heppening but nothing relevant.

I set up a new "Browse With" entry in Visual Studio. I selected chrome.exe and added --remote-debugging-port=9222 in the Arguments field. Saved it and started debugging. After the browser opened, I got pop-up error message: Cannot connect to runtime process, timeout after 10000 ms - (reason: Cannot connect to the target: connect ECONNREFUSED 127.0.0.1:51772).

Every time this happens I get a different port number at the end. When I click OK, debugging stops and the browser window closes. I have made absolutely sure that Chrome is closed before starting debugging, to the extent of running a batch file that kills all Chrome processes.

After more searching I selected the Chrome debugging configuration and then Debug|Start Without Debugging. Chrome started OK. I then selected Attach to Process and selected the process. It all looked good but the breakpoint went inactive again with the "breakpoint will not currently be hit" message.

I have tried adding "debugger;" entries to the code. VS 2019 complains about them and they have no effect.

If I try debugging with IE11 and got similar results. Sometimes I got an error saying that another debugger was already connected although I had previously killed Chrome.

I am at a loss. Any clues would much appreciated.

Rob

Answer 1

The problem was definitely in the bundle configuration. In my case it is a file called BundleConfig.vb. It appears to bundle up JavaScript and css files to enable faster loading of the site rather than loading each of the files as a discrete HTTP request.

My file starts like this:

Imports System.Web.Optimization
Public Module BundleConfig
    ' For more information on bundling, visit http://go.microsoft.com/fwlink/?LinkId=301862
    Public Sub RegisterBundles(ByVal bundles As BundleCollection)
        bundles.Add(New ScriptBundle("~/bundles/jquery").Include(
                   "~/Scripts/jquery-3.4.1.min.js",
                   "~/Scripts/jquery-ui-1.12.1.js"))

and ends like this:

       BundleTable.EnableOptimizations = False  'Commented out 190601 to debug scripts
        'BundleTable.EnableOptimizations = True
    End Sub
End Module

If EnableOptimization is True you will not be able to debug any of the JavaScript with either Visual Studio or the debug tools in Chrome or IE. Comment it out and debugging becomes possible.