Debugging react native in VSCode: Error connecting to packager

I am developing the code in VSCode. I launch a terminal inside VSCode and run “npm start”. This brings up the Metro Bundler in Chrome. I click on “Run on iOS Simulator” and this brings up the app in a simulator and everything is fine so far.

Packager is configured to run on port 19000. This is my packager-info.json:

{
    “devToolsPort”: 19002,
    “expoServerPort”: 19000,
    “packagerPort”: 19000,
    “packagerPid”: null,
    “expoServerNgrokUrl”: null,
    “packagerNgrokUrl”: null,
    “ngrokPid”: null,
    “webpackServerPort”: null
}

In order to debug in VSCode, I have a launch.json configuration as follows:

“version”: “0.2.0”,
“configurations”: [
  {
    “name”: “Attach to packager”,
    “cwd”: “${workspaceFolder}”,
    “type”: “reactnative”,
    “request”: “attach”
  }
]

I also set the react-native.packager.port setting in VSCode to 19000.

I now go to VSCode, click on “Run and Debug”, choose the “Attach to packager” configuration and click on the green arrow and I get the following error in my OUTPUT window.

[Info] Packager is already running.

[Warning] Error: React Native Packager running outside of VS Code. If you want to debug please use the ‘Attach to packager’ option

The little blue line under the debug keeps going round and round and control never comes to a breakpoint I’ve set. Can you please let me know what I’m doing wrong!

Thanks