Visual Studio 2017 中的 JavaScript 断点

41

我刚刚安装了Visual Studio 2017。在启动ASP.NET MVC应用程序后,我收到消息说在Visual Studio中启用了Chrome调试。

但是我的Visual Studio断点不起作用。Razor代码上的断点似乎可以正常工作,但Javascript不行。断点没有完全变为红色。重新启动和重建都没有效果。

我有以下代码示例

@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>
}

我没有打开Chrome调试控制台,并且我已经在Visual Studio中勾选了选项(“启用JavaScript调试…”),该选项已启用。

根据这篇博客文章,我认为应该有效: https://blogs.msdn.microsoft.com/webdev/2016/11/21/client-side-debugging-of-asp-net-projects-in-google-chrome/

这里有什么遗漏吗?这可能是Visual Studio 2017中无法工作的问题吗?

我只有一个扩展程序,那就是Resharper,但我想这不是问题。


你做得比我好。在JavaScript中使用断点的选项甚至都不可用。 - user609926
1
如果您以管理员身份运行Visual Studio 15.9.12,并尝试在JavaScript代码中设置断点,即使在.cshtml文件中,它也会自动弹出一个窗口,要求您启用JavaScript调试。Visual Studio“JavaScript调试警告”弹出窗口 然而,至少对我来说,即使现在它命中了断点,我也无法检查变量,无论是将鼠标悬停在它们上面(弹出窗口根本不会显示),还是将它们添加到监视窗口中(它会出现错误`error CS0103:'variableNameHere'的名称在当前上下文中不存在)。 - user5753614
13个回答

34

这个功能不适用于*.cshtml文件中的javascript代码,只适用于单独的*.js(或*.ts)文件中的代码。

enter image description here 请注意,Javascript文件中的断点处于活动状态,而Razor视图中的断点未激活。

我还注意到,在当前Chrome会话中首次加载页面时执行JavaScript代码时,JavaScript文件的断点将无法被触发。断点仅在文档完成加载后才能正常运行。


我仍然有这个问题。断点没有加载,也没有被触发。我是不是漏了什么? - Rudey
7
通过以管理员身份运行 Visual Studio,我终于使它工作了。 - Rudey
1
那么,为什么我们要使用这样一个有问题的功能呢?使用Chrome的检查器不是更好吗? - S.Serpooshan
NineBerry值得赞扬。 - Chris Mylonas
5
在cshtml中使其工作:在js代码中设置**debugger;**即可。 - qnguyen

26

另一个提示:只有在运行/调试设置'开始网址'之后才能启用js调试。

只有这样,VS才会附加到浏览器进程。


我为了让JavaScript调试正常工作而苦苦挣扎了数日,最后发现问题竟是由于一个小小的配置细节引起的,而这个细节在其他任何地方都没有被提及。非常感谢您! - emkayultra
@GarrGodfrey 我猜不是。这是 VS 2017 的全新功能。 - Lw Cui
2
我已经尝试了所有的方法,但都没有成功,直到我读到这个答案。事实上,我的项目设置为“不打开页面。等待来自外部应用程序的请求。” 这对我很有帮助。这个人值得一杯啤酒。非常感谢!+1 - Alan
@Lw Cui,“Start URL”是什么意思?我在哪里设置它? - CSCoder
2
@CSCoder:右键单击项目->属性->选择左侧的“Web”选项卡->启动操作菜单->启动URL单选按钮。 - Shane
显示剩余2条评论

14
我遇到了同样的问题。我按照同一篇文章的说明进行操作: https://blogs.msdn.microsoft.com/webdev/2016/11/21/client-side-debugging-of-asp-net-projects-in-google-chrome/ 在Visual Studio中按照以下步骤操作:进入工具 -> 选项 -> 调试 -> 常规,关闭设置"为ASP.NET(Chrome 和 IE)启用JavaScript调试",保存更改,然后运行网页。
之后,我注意到Chrome在加载我的页面之前没有显示"调试网页"。然后我关闭了我的网页并停止了调试会话。
我重新启用了"为ASP.NET(Chrome 和 IE)启用JavaScript调试"选项,然后使用IE运行网页,它可以正常工作了。页面停止了,断点出现在我的Visual Studio中。

没错,在VS 2017安装中,JavaScript调试的工作正常了。 - Duomi8

13

我遇到了同样的问题,对 .net core 不熟悉。对我有效的解决方法是在脚本顶部添加 debugger;:

<script>
  debugger;

  -- rest of your jscript here
</script>

4
我觉得这并没有什么帮助,因为它只是在“调试器”行上暂停执行,而不能让我在VS中查看变量。是否有某些隐含的东西我没有注意到? - John VanZwieten
在添加调试器行之后,您需要使用浏览器上的“检查”选项卡运行应用程序。要打开检查选项卡,请右键单击并选择检查。 - Deshan Maduranga

5

只有在启用选项“为ASP.NET启用JavaScript调试(Chrome和IE)”并在*.cshtml文件以及*.js文件中设置debugger;的情况下,才能在VS 2017中运行。


相比过去两天的阅读,这太容易了。 - Chris Catignani
1
对于在Visual Studio 2017中寻找此选项的任何人 - 导航到:工具>选项>调试>常规>"为ASP.NET启用JavaScript调试(Chrome、Edge和IE)" - Gerald LeRoy

1

在思考唯一让这个工作起来的方法是在 Visual Studio 2017 上进行修复之后,使用安装程序,我意识到我们在 Bundle.config 中有 BundleTable.EnableOptimizations = true;。我删除了这行并将其添加到 Web.Debug.config 转换中,它开始按预期工作。


我遇到的真正问题是我的代码调用了一个新窗口,使用window.open(url,...)。为了调试目的,我将其更改为window.location.href = url;,这解决了我的问题。 据我所见,调试器无法附加到新窗口,导致新窗口中的任何代码都无法绑定。 - Froman

0

经过多个小时的努力,我终于通过右键单击IIS Express并退出来使所有断点开始生效。

我的脚本文件中有调试器和断点,当我执行“清理解决方案”>“调试”时,我的断点开始再次生效。

我知道这是多么令人沮丧,所以我想让stackoverflow社区知道这对我起了作用。


0

0
  • Visual Studio Professional 2017 版本 15.8.1
  • Chrome 版本 68.0.3440.106(官方版本)(64 位)

我必须在以下位置启用传统的 Chrome JavaScript 调试器:

选项 -> 工具 -> 调试 -> 通用 -> 为 ASP.NET 启用传统的 Chrome JavaScript 调试器


0

我曾经遇到过同样的情况,JavaScript断点无法触发,然后我尝试卸载并重新安装Visual Studio 2017,但是没有效果。重新安装Windows 10也没有解决问题。最终,我选择重新学习计算机科学。现在一切都好了。

感谢vs2017,感谢微软。


你的回答可以通过提供更多支持信息来改进。请编辑以添加进一步的细节,例如引用或文档,以便他人可以确认你的答案是正确的。您可以在帮助中心找到有关如何编写良好答案的更多信息。 - Community
这并没有真正回答问题。如果你有不同的问题,你可以点击提问来提出。如果你想在这个问题有了新的回答时得到通知,你可以关注此问题。一旦你拥有足够的 声望,你也可以添加悬赏来引起更多人的注意。- 来自评论审核 - Alexander Z

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接