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

Question

我正在尝试使用一些 ASP.NET (vbhtml) 组件和一些更常规的 HTML5 位来调试 Web 应用程序。它是几年前建造的，并广泛使用了 Knockout。其中一些部分已损坏，我正在尝试调试它们。

该项目包括一个 API (WebAPI 2) 和其他一些东西。分离出 HTML5 部分并使用 VSCode 调试它们并不简单，所以我认为我坚持使用 Visual Studio。

两天前的几分钟，我能够设置断点，单步执行 Javascript 代码并找到一个问题。我不确定我做对了什么。从那以后，我一直无法对 Javascript 组件进行任何调试。我曾尝试使用 Visual Studio 2017 和 2019。

我在选择 Chrome 并启用脚本调试的情况下运行调试。浏览器一启动，断点的左端就会出现一个黄色标志，显示一条消息：断点当前不会被命中。已设置断点但尚未绑定。

浏览器运行正常，但没有命中断点。当 Inspect 窗口打开时，我可以看到一些事情正在发生，但没有任何相关性。

我在 Visual Studio 中设置了一个新的“浏览方式”条目。我选择了 chrome.exe 并在 Arguments 字段中添加了 --remote-debugging-port=9222。保存并开始调试。浏览器打开后弹出错误信息：Cannot connect to runtime process, timeout after 10000 ms - （原因：无法连接目标：connect ECONNREFUSED 127.0.0.1:51772）。

每次发生这种情况时，我最后都会得到一个不同的端口号。当我单击确定时，调试停止并且浏览器窗口关闭。我已经绝对确保 Chrome 在开始调试之前已关闭，以至于运行一个批处理文件会杀死所有 Chrome 进程。

经过更多搜索，我选择了 Chrome 调试配置，然后选择了 Debug|Start without Debugging。 Chrome 启动正常。然后我选择了附加到进程并选择了进程。一切看起来都不错，但断点再次变为非活动状态，并显示“断点当前不会被命中”消息。

我已尝试添加“调试器；”代码的条目。 VS 2019 抱怨他们，他们没有效果。

如果我尝试使用 IE11 进行调试并得到类似的结果。有时我会收到一个错误提示，虽然我之前已经杀死了 Chrome，但已经连接了另一个调试器。

我很茫然。任何线索将不胜感激。

罗伯

Answer 1

问题肯定出在捆绑配置中。在我的例子中，它是一个名为 BundleConfig.vb 的文件。它似乎将 JavaScript 和 css 文件捆绑在一起，以便更快地加载网站，而不是将每个文件作为离散的 HTTP 请求加载。

我的文件是这样开始的：

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"))

这样结束：

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

如果 EnableOptimization 为 True，您将无法使用 Visual Studio 或 Chrome 或 IE 中的调试工具调试任何 JavaScript。将其注释掉，即可进行调试。