如何在 ASP .Net Core 3.1 MVC 应用程序中调试 JavaScript（Razor 视图 - *.cshtml）？

Question

我有最新的Visual Studio 2019 16.5.4 Enterprise。

我刚刚从模板（使用默认设置）创建了一个ASP .Net Core 3.1 MVC应用程序。

我已将一些 JavaScript 代码添加到主页的Index.cshtml中：

@{
    ViewData["Title"] = "Home Page";
}

<div class="text-center">
    <h1 class="display-4">Welcome</h1>
    <p>Learn about <a href="https://learn.microsoft.com/aspnet/core">building Web apps with ASP.NET Core</a>.</p>
</div>


@section Scripts {
    <script>
        function GetJSON_Simple() {
            var resp = [];           
            return resp;
        }

        debugger;
        var simpleData = GetJSON_Simple();

    </script>
}

而且我无法调试 JavaScript 代码（里面的断点GetJSON_Simple函数体内的断点或var simpleData = GetJSON_Simple()永远不会被命中）。我尝试过 Chrome 和 MS Edge (Chromium)。

根据这篇文章（使用 Razor (ASP.NET) 调试动态文件中的 JavaScript部分）：

放置调试器；要中断的语句：这会导致动态脚本在创建时停止执行并立即开始调试。

PS 我已经打开了“工具”->“选项”->“调试”->“常规”，启用了“启用 ASP.NET 的 JavaScript 调试”（Chrome 和 IE）复选框，当然我正在“调试”中进行编译。

附上我的测试项目

Answer 1

如何在 ASP .Net Core 3.1 MVC 应用程序中调试 JavaScript（Razor 视图 - *.cshtml）？

事实上，这已经是一个众所周知的问题了。我们无法调试 Net Core razor 页面下的 js 代码，只能调试单独的 js 或 ts 文件中的代码。请参阅此链接。

解决方案

为了解决这个问题，我建议你可以创建一个名为的新的单个js文件test.js，然后在razor页面中引用它，然后在调试它时就可以进入js代码。

1）创建一个名为的文件test.js并将你的js代码迁移到其中：

 function GetJSON_Simple() {
            var resp = [];           
            return resp;
        }

        debugger;
        var simpleData = GetJSON_Simple();

2）更改为在您的 cshtml 文件中使用它：

@{
    ViewData["Title"] = "Home Page";
}

<div class="text-center">
    <h1 class="display-4">Welcome</h1>
    <p>Learn about <a href="https://learn.microsoft.com/aspnet/core">building Web apps with ASP.NET Core</a>.</p>
</div>


@section Scripts {
    <script scr="xxx/test.js">  
    </script>
}

3） 清理你的项目，然后重建你的项目并调试它，你将进入Js代码。