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

Question

I have latest Visual Studio 2019 16.5.4 Enterprise.

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

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://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>
}

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).

According to this article (Debug JavaScript in dynamic files using Razor (ASP.NET) section):

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. 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.

My test project is attached

score 6 · Accepted Answer · answered May 13 '20 at 07:41

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

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.

Solution

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) 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) 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://learn.microsoft.com/aspnet/core">building Web apps with ASP.NET Core</a>.</p>
</div>


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

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

Thank you. Debugging now is working even without `debugger;` line of code. Step over, Step into, Go to Definition are working. Unfortunatelly I cannot manage to make Edit and Continue working :( — bairog, May 14 '20 at 13:31

score 2 · Answer 2 · answered Sep 29 '22 at 21:14

Another way is to explicitly define the source mapping name for the script directly in your javascript code via a sourceURL comment.

<script>

...your script code

//# sourceURL=blah
</script>

The script in that block will show up in Chrome with the value you specified. You can then view and debug just like a normal .js file.

This is especially useful if you don't want to refactor an existing codebase that has embedded javascript in the cshtml files or really ANY codebase that has javascript loaded on the fly.

Live Example

You can actually see an example with the built-in javascript runner here. Just click 'Run Snippet' and then search for "blahblah" in your Page sources. You should see this:

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

Thanks! This works in Chrome but not in firefox. (I tesetd with .Net 6) — Amir, Mar 29 '23 at 17:08

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

2 Answers2

Linked