Debugger only stops on breakpoints on initial page load

Describe the bug After starting up the app with these scripts

    "preview": "yarn parallel --kill-others 'yarn:watch:client' 'yarn:watch:server'",
    "watch:client": "NODE_ENV=development webpack-dev-server --config ./webpack.client.js --host 0.0.0.0 --mode=development",
    "watch:server:debug": "babel-watch --watch '.env*' --inspect=0.0.0.0:9229 ./src/server.js",

I run the vscode debugger with this configuration and it successfully attaches:

{
    "type": "pwa-node",
    "request": "attach",
    "name": "Attach via Port",
    "port": 9229,
    "protocol": "inspector",
    "sourceMaps": true,
    "skipFiles": [
        "${workspaceFolder}/node_modules/**/*.js",
        "<node_internals>/**/*.js"
    ]
}

However, the debugger only hits the breakpoints for when the page has just refreshed. If I interact with any components on the page which should hit the breakpoints again, the debugger does not catch them. It only stops at breakpoints if I refresh the page on the first time.

I then tried a different configuration

{
    "name": "Launch Chrome",
    "request": "launch",
    "type": "pwa-chrome",
    "url": "https://localhost:8443/",
    "webRoot": "${workspaceFolder}/src",
    "trace": true,
    "sourceMaps": true,
    "sourceMapPathOverrides": {
        "webpack:///./src/*.js": "${workspaceFolder}/src/*.js",
        "webpack:///./src/*.jsx": "${workspaceFolder}/src/*.jsx",
    },
    "skipFiles": [
        "${workspaceFolder}/node_modules/**/*.js",
        "<node_internals>/**/*.js"
    ]
}

This takes over 2 minutes to load when I click the green arrow to run this config, however it does catch every breakpoint no matter what.

Is there a way to fix the first configuration so it hits every single breakpoint consistently. Or is there a fix to speed up the second configuration so it attaches onto the running server?

To Reproduce Run a ReactJS application with the above configuration and run debugger.

Log File Not able to attach log file here.

VS Code Version:

Version: 1.65.2
Commit: c722ca6c7eed3d7987c0d5c3df5c45f6b15e77d1
Date: 2022-03-10T14:33:49.188Z
Electron: 13.5.2
Chromium: 91.0.4472.164
Node.js: 14.16.0
V8: 9.1.269.39-electron.0
OS: Darwin x64 21.4.0

Additional context

Machine specs

Sorry for the delayed response, this fell of my queue.

From what you've said, I don't see that this is an issue with the debugger. You're debugging two different things in each config: in the first, you're debugging your Node.js server, and in the second you're debugging the browser. I'm guessing that you're server side rendering your React component. Thus the behavior you described makes perfect sense: the breakpoint is hit when it's rendered on the server, but interactions happen solely in the browser, so breakpoints would not subsequently get hit again.

It's expected that the browser config would hit every breakpoint, although taking two minutes to load is unexpected, especially for a webpack config where things should be getting bundled up nicely. If you still experience this, please collect a log file using the instructions in the issue template, and share it either here or over email. Thanks

microsoft / vscode-js-debug

Debugger only stops on breakpoints on initial page load #1223