.NET Core Web Application with AngularJS - JS Debug not working for JS files in VS Code

Question

VS Code v1.64.2
.NET Core v3.1
AngularJS v1.8.2

I am trying to use Visual Studio Code for debugging .NET Core web application which is using AngularJS. I am able to debug breakpoints placed inside .CS files once I generate .NET: Generate assets for build and debug which creates launch and tasks json files inside .vscode folder.

But the debug points placed in js files of angularJS controller and services are not hitting eventhough application is running.

Am I missing some settings to be enabled for debug js files while running .NET Core in VS Code?

//// Update Feb 15 2022 I tried with the below launch.json which attaches a Chrome browser launch with the .NET Core build + launch.

Now I am able to debug both C# and Javascript in VSCode. But only issue I am facing: its opening 2 browser instances with localhost:5000. I had to manually close 1 instance which is not attached with debugger.

Is this correct way to debug both JS & C# files which are inside .NET Core web application using AngularJS.

{
    "compounds": [
        {
            "name": ".Net+Browser",
            "configurations": [ ".NET Core Launch (web)", "Launch Chrome" ]
        }
    ],
    "configurations": [
        {
            "name": "Launch Chrome",
            "request": "launch",
            "type": "chrome",
            "url": "http://localhost:5000",
            "webRoot": "${workspaceFolder}/wwwroot",
            "runtimeArgs": [
                "--disable-web-security"
            ]
        },
    {
        // Use IntelliSense to find out which attributes exist for C# debugging
        // Use hover for the description of the existing attributes
        // For further information visit https://github.com/OmniSharp/omnisharp-vscode/blob/master/debugger-launchjson.md
        "name": ".NET Core Launch (web)",
        "type": "coreclr",
        "request": "launch",
        "preLaunchTask": "build",
        // If you have changed target frameworks, make sure to update the program path.
        "program": "${workspaceFolder}/bin/Debug/netcoreapp3.1/PROJECTNAME.dll",
        "args": [],
        "cwd": "${workspaceFolder}",
        "stopAtEntry": false,
        "serverReadyAction": {
            "action": "openExternally",
            "pattern": "\\bNow listening on:\\s+(https?://\\S+)"
        },
        "env": {
            "ASPNETCORE_ENVIRONMENT": "Development"
        },
        "sourceFileMap": {
            "/Views": "${workspaceFolder}/Views"
        }
    },
    {
        "name": ".NET Core Attach",
        "type": "coreclr",
        "request": "attach"
    }
    ]
}

You need to have a debugger attached to a running application. Sounds like you have configured .NET Debugger for .NET Core but didn't configure JS Debugger for JS app. How do you run your JS App? Do you run any npm run ... command? — Vlad DX
– Vlad DX, Commented Feb 13, 2022 at 14:00
@VladDX yes... as of now I havent configured any js debugger for angularJS files. Should I attach any extension for that ? — useruser00
– useruser00, Commented Feb 15, 2022 at 11:27
@VladDX I added my lanuch.json which is working for Javascript & C# debugging. — useruser00
– useruser00, Commented Feb 15, 2022 at 12:24

Vlad DX · Accepted Answer · 2022-02-13 14:24:57Z

1

To debug in Visual Studio Code (or any other Editor, IDE), you need to run the app and attach a debugger to it.

In VS Code, you can configure it in .vscode/launch.json file.

For example, I run my app via an NPM script:

npm start run:dev

In such a case, I need to create a .vscode/launch.json file:

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch via NPM",
            "request": "launch",
            "runtimeArgs": [
                "run",
                "start:dev"
            ],
            "runtimeExecutable": "npm",
            "skipFiles": [
                "<node_internals>/**"
            ],
            "type": "pwa-node"
        }
       
    ]
}

Whenever I press F5, this debugging configuration will run npm command with arguments start run:dev and then attach a debugger to my application.

All the breakpoints and watches will work.

Visual Studio Code Docs

https://code.visualstudio.com/docs/editor/debugging

To do it by yourself:

Create an empty file .vscode/launch.json.

Find the button "Add Configuration..." in the right bottom corner and click it.

Choose "Node.js: Launch via npm".

Replace "runtimeArgs" with your arguments.

edited Feb 13, 2022 at 14:24

answered Feb 13, 2022 at 14:14

Vlad DX

4,81821 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

useruser00 Over a year ago

Should I include the below section into configuration as I already have .".NET Core Attach" & ".NET Core Launch (web)" inside configuration for .net { "name": "Launch via NPM", "request": "launch", "runtimeArgs": [ "run", "start:dev" ], "runtimeExecutable": "npm", "skipFiles": [ "<node_internals>/**" ], "type": "pwa-node" },

Collectives™ on Stack Overflow

.NET Core Web Application with AngularJS - JS Debug not working for JS files in VS Code

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related