vscode launch config for next.js app

Question

I'm developing a next.js app with Visual Studio Code (vscode) and I like that editor a lot! I've installed Debugger for Chrome from the extension store. The config below starts a new Chrome instance and I can start to debug. It stops on the breakpoint in vscode but here comes the problem. It doesn't show the values of the function and jumps into the node_modules event though I added it to "skipfiles". Breakpoints also won't stop on the constructor. Is next.js somehow not supported? I'm using async await syntax a lot. Debugging server side code works perfectly.

    {
        "name": "My Client",
        "type": "chrome",
        "request": "launch",
        "url": "http://localhost:3000",
        "webRoot": "${workspaceRoot}/my-client/",
        "skipFiles": [
            "node_modules/**/*.js",
            "<node_internals>/**/*.js",
            "node_modules",
            ".next"
        ]
    }

Answer 1

I hope is not too late for you ma friend, Here you have the original documentation from VSCode that solve the issue:

 { "version": "0.2.0", "configurations": [ { "type": "chrome", "request": "launch", "name": "Next: Chrome", "url": "http://localhost:3000", "webRoot": "${workspaceRoot}" }, { "type": "node", "request": "launch", "name": "Next: Node", "runtimeExecutable": "next", "runtimeArgs": [ "--inspect" ], "port": 9229, "console": "integratedTerminal" } ], "compounds": [ { "name": "Next: Full", "configurations": ["Next: Node", "Next: Chrome"] } ] } 

Answer 2

Following worked for me (extending from Maximiliano Cespedes answer):

{
    // 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": "node",
            "request": "launch",
            "name": "NPM Launch",
            "runtimeExecutable": "npm",
            "cwd": "${workspaceFolder}/my-app",
            "runtimeArgs": [
                "run-script",
                "debug"
            ],
            "port": 9229,
            "console": "integratedTerminal"
        },
        {
            "type": "node",
            "request": "attach",
            "name": "Attach",
            "port": 9229,
            "stopOnEntry": false,
            "restart": true
        },
        {
            "type": "chrome",
            "request": "launch",
            "name": "Chrome",
            "url": "http://localhost:4200",
            "webRoot": "${workspaceRoot}"
        }
    ],
    "compounds": [{
        "name": "Debug-Full",
        "configurations": ["NPM Launch", "Attach", "Chrome"]
    }]
}