如何在ASP .NET Core 3.1 MVC应用程序中调试JavaScript(剃刀视图-* .cshtml)? [英] Howto debug JavaScript inside ASP .Net Core 3.1 MVC applications (Razor view - *.cshtml)?

问题描述

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

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

I've just created an ASP .Net Core 3.1 MVC application from a template (with default settings).

并且我已经在首页的 Index.cshtml 中添加了一些JavaScript代码:

And I've added some JavaScript code to a Home Page's Index.cshtml:

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

<div class="text-center">
    <h1 class="display-4">Welcome</h1>
    <p>Learn about <a href="https://docs.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(铬).

And I'm not able to debug JavaScript code (breakpoints inside GetJSON_Simple function body or on var simpleData = GetJSON_Simple() is never hit). I've tried both Chrome and MS Edge (Chromium).

根据本文(使用Razor(ASP.NET)调试动态文件中的JavaScript 部分):

放置调试器；声明要在何处中断:这会导致 动态脚本来停止执行并立即开始调试 它正在创建.

Place the debugger; statement where you want to break: This causes the dynamic script to stop execution and start debugging immediately while it is being created.

P.S.我已经具有工具->选项->调试->常规，并且已打开为ASP.NET启用JavaScript调试(Chrome和IE)复选框，当然我m在Debug中编译.

P.S. I've already have Tools->Options->Debugging->General with turned on Enable JavaScript Debugging for ASP.NET (Chrome and IE) checkbox and of course I'm compiling in Debug.

我的测试项目是已附加

推荐答案

如何在ASP .NET Core 3.1 MVC应用程序中调试JavaScript (剃刀视图-* .cshtml)?

Howto debug JavaScript inside ASP .Net Core 3.1 MVC applications (Razor view - *.cshtml)?

事实上，这已经是一个众所周知的问题. 我们无法在Net Core剃须刀页面下调试js代码，而只能调试单独的js或ts文件中的代码.请参见

In fact, it is already a well-known issue. We can not debug the js code under Net Core razor page but only for code in separate js or ts files. See this link.

解决方案

要解决此问题，建议您创建一个名为test.js的新js文件，然后在剃须刀页面中对其进行引用，然后在调试时插入js代码.

To solve it, I suggest you could create a new single js file called test.js and then reference it in razor page and then you can hit into js code when you debug it.

1)创建一个名为test.js的文件，并将您的js代码迁移到其中:

1) create a file called test.js and migrate your js code into it:

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

        debugger;
        var simpleData = GetJSON_Simple();

2)更改为在您的cshtml文件中使用它:

2) change to use this in your cshtml file:

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

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


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

3) 清理您的项目，然后重建您的项目并对其进行调试，您将遇到Js代码.

3) clean your project, then rebuild your project and debug it and you will hit into Js code.

这篇关于如何在ASP .NET Core 3.1 MVC应用程序中调试JavaScript(剃刀视图-* .cshtml)?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！