Debugging React client on port 8001 and Node Server Port 3000 with VSCode Chrome-Extension

I have tried and tried and tried to debug the app in VSCode using chrome-extension until i come here to ask for help. I have read the manuals how to debug etc , but i miss something .

Until now what i achieved is only to debug the React Client on localhost:8001 with the below:

{
  "name": "Attach to Chrome",
  "port": 9222,
  "request": "attach",
  "type": "pwa-chrome",
  "urlFilter": "http://127.0.0.1:8001/*",
  "webRoot": "${workspaceFolder}"
}

I don't want it to open any new Chrome Tabs so i found out the above works after doing some work around with Chrome launching adding --remote-debugging-port=9222:

Now my problem is i can't debug the Node.js server which is running on port 3000:

{
  "name": "Attach to Node",
  "port": 3000,
  "request": "attach",
  "type": "pwa-node"
}

I have tried the above it doesn't work .

I am starting my project using $ npm start. My project code looks like this i am using webpack-dev-server .