Visual Studio 2017 中的 Javascript 断点

Javascript breakpoints in Visual Studio 2017

提问by ronaldm

I just installed Visual Studio 2017. After starting an ASP.NET MVC application I get the message that chrome debugging in Visual Studio is enabled.

我刚刚安装了 Visual Studio 2017。启动 ASP.NET MVC 应用程序后，我收到消息，指出启用了 Visual Studio 中的 chrome 调试。

But my breakpoints in Visual Studio won't hit. The breakpoints on Razor code seems to be working but Javascript does not. The breakpoints are not fully red like they should be. A restart, rebuild don't seem to take any effect.

但是我在 Visual Studio 中的断点不会命中。Razor 代码上的断点似乎有效，但 Javascript 没有。断点没有像它们应该的那样完全红色。重新启动，重建似乎没有任何效果。

I have the following code example

我有以下代码示例

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

I don't have the chrome debugging console open and I checked the option in Visual Studio ('Enable Javascript debugging..') which is enabled.

我没有打开 chrome 调试控制台，我在 Visual Studio ('Enable Javascript debugging..') 中检查了已启用的选项。

According to this blog post I thought this should work: https://blogs.msdn.microsoft.com/webdev/2016/11/21/client-side-debugging-of-asp-net-projects-in-google-chrome/

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

Am I missing something here? Could it be that this is not working in Visual Studio 2017 somehow?

我在这里错过了什么吗？难道这在 Visual Studio 2017 中以某种方式不起作用？

I only have one extension and that is Resharper, but I guess this is not an issue.

我只有一个扩展名，那就是 Resharper，但我想这不是问题。

采纳答案by NineBerry

This feature does not work for javascript code inside a *.cshtml file, but only for code in separate *.js (or *.ts) files.

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

Notice how the breakpoint in the JavaScript file is active, while the breakpoint in the Razor view is not.

请注意 JavaScript 文件中的断点如何处于活动状态，而 Razor 视图中的断点未处于活动状态。

I have also noticed that breakpoints will not be hit for JavaScript files when JavaScript code is executed during page load when the page is loaded the first time in the current Chrome session. Breakpoints will only work after the document has finished loading once.

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

回答by Lw Cui

Another tip: js debug only can be enabled after setting 'start URL' on run/debug.

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

Only in this way VS will attach to browser process.

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

回答by Luis Art Guerra

I had the same issue. I followed the instructions from the same post: https://blogs.msdn.microsoft.com/webdev/2016/11/21/client-side-debugging-of-asp-net-projects-in-google-chrome/

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

I did the following in Visual Studio: Go to Tools-> Options-> Debugging-> Generaland turned off the setting "Enable JavaScript Debugging for ASP.NET (Chrome and IE)". Saved changes, then run the webpage.

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

After this, I noticed that Chrome was not showing the "Debug webpage" before loading my page. Then i closed my webpage and stopped the debugging session.

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

I re-enabled the "Enable Javascript Debugging for ASP.NET (Chrome and IE)" option, then run the webpage using IE, and it worked. The page stopped and the breakpoint showed up in my visual studio.

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

回答by s1cart3r

I had the same issue, new to .net core, a solution that worked for me was to add debugger; at the top of the script:

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

<script>
  debugger;

  -- rest of your jscript here
</script>

回答by s1cart3r

It does work in vs 2017 only with enabling option "Enable Javascript Debugging for ASP.NET (Chrome and IE)" and setting debugger; in js code in *.cshtml as well as *.js file

只有启用选项“启用 ASP.NET（Chrome 和 IE）的 Javascript 调试”并设置调试器，它才能在 vs 2017 中工作；在 *.cshtml 和 *.js 文件中的 js 代码中

回答by Froman

After thinking the only way to get this working was to do a repair on Visual Studio 2017, using the installer, I realized that we had BundleTable.EnableOptimizations = true;in Bundle.config. I removed this line and added it to Web.Debug.configtransformation and it started working as expected.

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

回答by Moojjoo

I finally got all my break points to begin hitting after I right clicked on IIS Express and Exit after working for many hours.

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

I had debugger in my script files and break points and as soon as I did a Clean Solution > Debug my breakpoints started to begin to hit again.

我的脚本文件和断点中有调试器，只要我执行了 Clean Solution > Debug 我的断点就开始再次命中。

I understand how frustrating this is and I am just letting the stackoverflow community know what worked for me.

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

回答by Riaz Gulamali

I had the same situation Javascript break point were not hitting and then i uninstalled and reinstall visual studio 2017 and it started working again

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

回答by John VanZwieten

My best guess here (at least in my case, potentially in your case as well) is that it has to do with bundling. The project I'm working on right now bundles separate scripts into one Big Daddy script (without minifying in debug configuration) so my hunch is that VS won't map my breakpoint to that ultimate script run in the browser.

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

I know this doesn't answer the question since it's just a hunch, but I'm hoping it points us in the right direction. Maybe if we can validate this against others' experience this could evolve into a real answer.

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

回答by amarax

For those who use Google Chrome Portable (or added chrome to browsers debug list manually) helps this:

对于那些使用 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

https://docs.microsoft.com/en-us/visualstudio/javascript/tutorial-nodejs-with-react-and-jsx?view=vs-2017#set-and-hit-a-breakpoint-in-the-客户端反应代码

You need to attach then to proper chrome instance manually and viola

您需要手动附加到正确的 chrome 实例和中提琴