Debugging Angular with VS Code and Firefox

Everyone has their own preference when it comes to debugging. Here is what has worked well for me!

This example is based on a new angular application.

If you would like to know how to get started with angular – head over here:

https://code.visualstudio.com/docs/nodejs/angular-tutorial

If you would like to clone the repo and give it a try, head over here:

https://github.com/jcianci12/angular-debugging-with-firefox-and-vscode

Step 1. Install debugger for firefox

Open your vscode extensions tab

Step 2. Create your launch.json file

Paste in the following:

{
    // 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": [
        {
            "type": "firefox",
            "request": "launch",
            "preLaunchTask": "npm: start",
            "reAttach": true,
            "name": "Launch localhost",
            "url": "http://localhost:4200/",
            "webRoot": "${workspaceFolder}/Aspnetcoreapp/ClientApp",
            // "firefoxExecutable": "C:\\Program Files\\Firefox Developer Edition\\firefox.exe",
            "pathMappings": [
                {
                    "url": "webpack:///src",
                    "path": "${workspaceFolder}/Aspnetcoreapp/ClientApp/src"
                }
            ]
        },
    ],
    "compounds": [
        {
            "name": "HOME_compund",
            "configurations": [
                "Launch localhost"
            ]
        }
    ]
}

Step 3. Test your setup!

Click the play button next to “Launch localhost”

If everything is working, you should see the following: