vscode debugger configuration .vscode/launch.json react node with attach mode

launch.json

{
  // before running this script, open chrome in terminal using: 
  // /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222
  
  // GIST: https://gist.github.com/tgrrr/dc95952a33cfc04ab4b8ace23e63e848

  "version": "0.2.0",
  "configurations": [
    {
      "name": "Launch Chrome against localhost",
      "type": "chrome",
      "request": "attach",
      "preLaunchTask": "start",
      "port": 9222,
      "url": "http://localhost:3000",
      "webRoot": "${workspaceRoot}/src",
      "smartStep": true,
      "skipFiles": [
        "node_modules/**/*.js",
        "lib/**/*.js",
        "build/polyfills.js",
        "node_modules/react/*.min.js"
      ],
      "internalConsoleOptions": "openOnSessionStart",      
    }]
}

NOTE: before running this script, open chrome in terminal using:

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222

Configuration:

preLaunchTask: // runs yarn run start. To get fancy, see: https://code.visualstudio.com/Docs/editor/tasks

"internalConsoleOptions": "openOnSessionStart",
alternatively try "console": "internalConsole",
see: https://stackoverflow.com/a/49573055/3281978

"url": "http://localhost:3000",
You might need to add the route here. Eg 3000/pageRoute

IntelliSense

hint: ctrl + space or hover to view descriptions of existing attributes.
For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 OR https://code.visualstudio.com/docs/editor/debugging

Babel

If you have trouble with babel, see: https://gist.github.com/dchowitz/83bdd807b5fa016775f98065b381ca4e