Visual Studio 2017 中的 Javascript 断点答案

【问题标题】：Javascript breakpoints in Visual Studio 2017Visual Studio 2017 中的 Javascript 断点
【发布时间】：2017-03-08 10:45:05
【问题描述】：

我刚刚安装了 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 中使用断点的选项甚至不可用。
如果您以管理员身份运行 Visual Studio 15.9.12 并尝试在 javascript 代码中放置断点，即使在 .cshtml 文件中，它也会自动弹出一个窗口，要求您启用 JavaScript 调试。 Visual Studio 'JavaScript debugging warning' pop-up window 但是，至少对我来说，即使它现在到达断点，我也无法通过将鼠标悬停在变量上（弹出窗口根本不会显示）或将它们添加到监视窗口（它会出错）来检查变量带有 `error CS0103: The name of 'variableNameHere' does not exist in the cur

标签： javascript visual-studio visual-studio-2017

【解决方案1】：

此功能不适用于 *.cshtml 文件中的 javascript 代码，而仅适用于单独的 *.js（或 *.ts）文件中的代码。

注意 JavaScript 文件中的断点是如何激活的，而 Razor 视图中的断点不是。

我还注意到，在当前 Chrome 会话中第一次加载页面时，在页面加载期间执行 JavaScript 代码时，不会为 JavaScript 文件命中断点。断点仅在文档完成加载一次后才起作用。

【讨论】：

我还是有这个问题。断点没有加载，也没有命中。我错过了什么吗？
刚刚通过以管理员身份运行 Visual Studio 使其工作。
那么，我们为什么要使用这样一个有问题的功能呢？改用chrome Inspector 不是更好吗？
为 NineBerry 点赞。
要使其在cshtml中工作：在js代码中设置debugger;并且它工作

【解决方案2】：

另一个提示：js 调试只能在运行/调试设置“开始 URL”后启用。

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

【讨论】：

我几天来一直在努力让 JavaScript 调试工作，显然这是由于这个非常小的配置细节，其他任何人都不想在其他任何地方提及。谢谢！
这是 VS 2013 的变化吗？在 VS 2013 上使用相同的项目后，这为我修复了它。
@GarrGodfrey 我猜不是。这是 VS 2017 的全新功能
在阅读此答案之前，我已经尝试了所有方法但均未成功。事实上，我将我的项目设置为“不要打开页面。等待来自外部应用程序的请求”。这对我有用。这家伙值得喝啤酒。非常感谢！ +1
@CSCoder：右键单击项目 -> 属性 -> 选择左侧的“Web”选项卡 -> 开始操作菜单 -> 启动 URL 单选按钮

【解决方案3】：

我有同样的问题。我按照同一篇文章的说明进行操作： https://blogs.msdn.microsoft.com/webdev/2016/11/21/client-side-debugging-of-asp-net-projects-in-google-chrome/

我在 Visual Studio 中执行了以下操作：转到 Tools -> Options -> Debugging -> General 并关闭设置“为 ASP.NET（Chrome 和 IE）启用 JavaScript 调试” .保存更改，然后运行网页。

在此之后，我注意到 Chrome 在加载我的页面之前没有显示“调试网页”。然后我关闭了我的网页并停止了调试会话。

我重新启用了“启用 ASP.NET（Chrome 和 IE）的 Javascript 调试”选项，然后使用 IE 运行该网页，它就可以工作了。页面停止，断点出现在我的视觉工作室中。

【讨论】：

确实，第一次在 VS 2017 安装上进行 javascript 调试

【解决方案4】：

我有同样的问题，新的 .net 核心，一个对我有用的解决方案是添加调试器；在脚本的顶部：

<script>
  debugger;

  -- rest of your jscript here
</script>

【讨论】：

我没有发现这有帮助，因为这似乎只是暂停了“调试器”行上的执行，而没有让我调查 VS 中的变量。这里有什么我想念的东西吗？

【解决方案5】：

它仅在启用选项的情况下在 vs 2017 中有效 “启用 ASP.NET（Chrome 和 IE）的 Javascript 调试”和设置调试器；在 *.cshtml 中的 js 代码以及 *.js 文件中

【讨论】：

与我这两天读到的所有内容相比，这简直太容易了。
对于在 Visual Studio 2017 中寻找此选项的任何人 - 导航至：工具 > 选项 > 调试 > 常规 > “为 ASP.NET（Chrome、Edge 和 IE）启用 JavaScript 调试”

【解决方案6】：

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

【讨论】：

我遇到的真正问题是我的代码使用window.open(url,...) 调用了一个新窗口。出于调试目的，我将其更改为 window.location.href = url; 并解决了我的问题。据我所见，调试器不会将自己附加到新窗口，导致新窗口中的任何代码都没有被绑定。

【解决方案7】：

您可以尝试两种选择：

在 VS 选项中关闭“为 ASP.NET（Chrome 和 IE）启用 JavaScript 调试”，然后在浏览器中使用调试器 (F12)。
在 Visual Studio 中开始调试，然后在 Solution Explorer -> Internet Explorer -> <your view name> 中添加断点。（假设您使用的是 IE）

【讨论】：

【解决方案8】：

我在这里最好的猜测（至少在我的情况下，也可能在你的情况下）是它与捆绑有关。我现在正在处理的项目将单独的脚本捆绑到一个 Big Daddy 脚本中（没有在调试配置中缩小），所以我的预感是 VS 不会将我的断点映射到在浏览器中运行的最终脚本。

我知道这并不能回答问题，因为这只是一种预感，但我希望它能够为我们指明正确的方向。也许如果我们可以根据其他人的经验来验证这一点，这可能会演变成一个真正的答案。

【讨论】：

【解决方案9】：

对于那些使用 Google Chrome Portable（或手动将 chrome 添加到浏览器调试列表）的用户可以帮助：

https://docs.microsoft.com/en-us/visualstudio/javascript/tutorial-nodejs-with-react-and-jsx?view=vs-2017#set-and-hit-a-breakpoint-in-the-client-side-react-code

您需要手动和 viola 将其附加到适当的 chrome 实例

【讨论】：

【解决方案10】：

Visual Studio Professional 2017 版本 15.8.1
Chrome 版本 68.0.3440.106（官方版本）（64 位）

我必须启用旧版 Chrome JavaScript 调试器：

选项 -> 工具 -> 调试 -> 常规 -> 为 ASP.NET 启用旧版 Chrome JavaScript 调试器

【讨论】：

【解决方案11】：

在我右键单击 IIS Express 并在工作了几个小时后退出后，我终于得到了所有的断点。

我的脚本文件和断点中有调试器，一旦我执行了一个干净的解决方案 > 调试，我的断点就开始再次命中。

我知道这有多令人沮丧，我只是让 stackoverflow 社区知道什么对我有用。

【讨论】：

【解决方案12】：

我遇到同样的情况 Javascript 断点没有命中，然后我卸载并重新安装了 Visual Studio 2017，它又开始工作了

【讨论】：

【解决方案13】：

我遇到了同样的情况 Javascript 断点没有命中，然后我卸载并重新安装了 Visual Studio 2017，但它不起作用。重新安装Windows 10 没有解决办法。最后，我重新接受了计算机科学的教育。现在一切正常。

感谢vs2017，感谢所有微软。

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。
这并不能真正回答问题。如果您有其他问题，可以点击提问。要在此问题有新答案时收到通知，您可以follow this question。一旦你有足够的reputation，你也可以add a bounty 来引起对这个问题的更多关注。 - From Review