Using React Devtools in VS Code with Chrome Devtools Attach Configuration

Overview

The purpose of this article is to show how to enable remote debugging via a chrome devtools connection to a react application.

References

Prerequisites

At the root of the project, the following must be present:

Folder: /.vscode 

File: /.vscode/launch.json :

Windows:

{

    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "attach",
            "name": "Attach (OpenFin)",
            "port": 9222,
            "runtimeExecutable": "C:\Users\adamsaland\AppData\Local\OpenFin\runtime\14.78.46.14\OpenFin\openfin.exe",
            "url": "http://localhost:3000",
        }
    ]
}

Mac: 

{

    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "attach",
            "name": "Attach (OpenFin)",
            "port": 9222,
            "runtimeExecutable": "/Users/adamsaland/OpenFin/Runtime/14.78.46.14/OpenFin.app/Contents/MacOS/OpenFin",          
            "url": "http://localhost:3000",
        }

    ]

}

Note:

the port specified in the launch config must match the --remote-debugging-port specified in the app.json

app.json:

{
  "startup_app": {
    "name": "OpenfinPOC",
    "url": "http://localhost:3000",
    "uuid": "OpenfinPOC",
    "applicationIcon": "http://localhost:3000/favicon.ico",
    "autoShow": true,
    "saveWindowState": false
  },
  "runtime": {
    "arguments": "--inspect --remote-debugging-port=9222",
    "version": "stable"
  },
  "shortcut": {
    "company": "OpenFin",
    "description": "Openfin POC",
    "icon": "http://localhost:3000/favicon.ico",
    "name": "Openfin POC",
  }
}

Once the application is launched in OpenFin:

- Press cmd | ctrl + shift + D to open the VS Code debugger panel

- Press enter or click the green play button to attach to the running Openfin instance