Node js 调试在 Visual Studio 代码中不起作用（2020 年）

Question

I have gone though similar questions and none of the answers help perhaps because the configurations have changed in the latest VS Code or they are not relavant.

I get this error when I try to launch:

Exception has occurred: ReferenceError
ReferenceError: closeDescriptionPopup is not defined
    at HTMLParagraphElement.eval (eval at E (chrome-error://chromewebdata/:14:208), <anonymous>:3:21)
    at w (chrome-error://chromewebdata/:4622:845)
    at L.b (chrome-error://chromewebdata/:4628:231)
    at L.e (chrome-error://chromewebdata/:4627:393)
    at window.jstProcess (chrome-error://chromewebdata/:4630:800)
    at chrome-error://chromewebdata/:4632:56

My launch.json looks like this. Please note that this has become like this due to various trial and errors:

   {
    "configurations": [
        {
            "name": "Launch Chrome",
            "request": "launch",
            "type": "pwa-chrome",
            "url": "http://localhost:8080",
            "webRoot": "${workspaceFolder}",
            
        },
        {
            "name": "Attach by Process ID",
            "processId": "${command:PickProcess}",
            "request": "attach",
            "skipFiles": [
                "<node_internals>/**"
            ],
            "type": "pwa-node"
        },
    {
        "name": "Attach to Chrome",
        "port": 9222,
        "request": "attach",
        "type": "pwa-chrome",
        "webRoot": "${workspaceFolder}",
    }
    ]
}

I have tried various combination of this as well:

 node --inspect-brk  --inspect app.js

Sometimes it gives a message the dubugger is running at ws://somehexadisgits but the break points do not hit.

PS This is my vs code version:

 Version: 1.46.1 (user setup)
Commit: cd9ea6488829f560dc949a8b2fb789f3cdc05f5d
Date: 2020-06-17T21:13:20.174Z
Electron: 7.3.1
Chrome: 78.0.3904.130
Node.js: 12.8.1
V8: 7.8.279.23-electron.0
OS: Windows_NT x64 10.0.18363

Answer 1

After a few hours of frustrations this is how I solved.

1. Remove everything in launch.json to completely make it blank so that the button Run and Debug becomes visible like this.

(Earlier a dropdown was showing with the list of configurations that were added in the launch json)

2. Hit the button Run and Debug and select any environment. I selected (chrome). Now in the terminal run npm start . Notice the dropdown on the terminal at the bottom. It would have selected JavaScript Debug Terminal

3. Put the breakpoints anywhere, hit the API (through postman or browser get request) and notice the joy of happiness within you when it hits the breakpoint .

PS later on when you don't want to run the app everytime in debug, you may select the other option in the terminal for. eg select default shell/powershell , Now when you run npm start it will start with the environment in normal node environment and will run normally without attaching itself in the debug environment. So this is how you may switch between choosing your application to run in debug environment or without it by selecting any of these options from the drop-down in the VS terminal.