React VS Code debugger

Info.md

Debbug React App in VSCode

Chrome

Based on: https://dev.to/zirkelc/debug-a-react-app-in-vscode-21ga

1. Enable remote debugging

Add to the chrome shortcut "C:\Program Files\Google\Chrome\Application\chrome.exe" --remote-debugging-port=9222 -- "%1" to the target field.

2. Add VS Code configuration

Add this configuration to the .vscode/launch.json file.

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch Chrome",
            "request": "launch",
            "type": "chrome",
            "url": "http://localhost:3000",
            "webRoot": "${workspaceFolder}"
        },
        {
            "name": "Attach to Chrome",
            "port": 9222,
            "request": "attach",
            "type": "chrome",
            "urlFilter": "http://localhost:3000/*", // use urlFilter instead of url!
            "webRoot": "${workspaceFolder}"
        }
    ]
}