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

Question

我拥有最新版的Visual Studio 2019 16.5.4企业版。

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

然后，在首页的Index.cshtml中添加了一些JavaScript代码：

@{
    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)。

根据这篇文章 (Debug JavaScript in dynamic files using Razor (ASP.NET) 部分)：

在你想要断点的位置添加debugger;语句: 这会导致动态脚本停止执行并在创建时立即开始调试。

P.S. 我已经打开了Tools->Options->Debugging->General的Enable JavaScript Debugging for ASP.NET (Chrome and IE)复选框，并且当然我也是在Debug模式下编译的。

我的测试项目附在这里。

- bairog

Answer 1

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

实际上，这已经是一个众所周知的问题。 我们无法调试Net Core Razor页面下的js代码，只能针对单独的js或ts文件中的代码进行调试。请参阅this link。

解决方案

为了解决这个问题，我建议您创建一个名为test.js的新的单独的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代码。

- Mr Qian

---

谢谢。现在调试即使没有 debugger; 代码行也可以工作了。步过，步入，转到定义都可以工作。不幸的是，我无法让编辑和继续工作 :( - bairog

Answer 2

另一种方法是通过在你的JavaScript代码中使用sourceURL注释来显式地定义脚本的源映射名称。

<script>

...your script code

//# sourceURL=blah
</script>

那个代码块中的脚本将显示在Chrome中，显示您指定的值。然后，您可以像正常的 .js 文件一样查看和调试。

如果您不想重构现有嵌入式javascript的代码库，或者真的想加载任何具有javascript的代码库，则这非常有用。

实时示例

您实际上可以在此处使用内置的javascript运行器查看示例。只需单击“运行片段”，然后在您的页面源代码中搜索“blahblah”。您应该会看到这个：

alert("test");
//# sourceURL=blahblah

- jlewis

---

谢谢！这在Chrome中可以工作，但在Firefox中不行。（我使用了.Net 6进行测试） - Amir