Search code examples
node.jsvisual-studio-codegrommet

Debug grommet-cli sample-app in vscode


Loving Grommet and vscode. Trying to get them to play together. I am able to get Express and vscode working as shown here. I would like to get the grommet-cli sample app to work similarly. Express has one command to start: "npm start" where grommet-cli has two: "npm run dev-server" and "npm run dev" (not sure how to start them both in vscode. I think I may need multi-session debugging?). How do I setup launch.json to debug the sample app? I'd like to be able to debug in IE/Edge. I've had some success in Chrome with the Debugger for Chrome extension.

Here is my current launch.json:

{
"version": "0.2.0",
"configurations": [
    {
        "type": "chrome",
        "request": "launch",
        "name": "Launch Chrome against localhost",
        "url": "http://localhost:3000",
        "webRoot": "${workspaceRoot}"
    },
    {
        "type": "chrome",
        "request": "attach",
        "name": "Attach to Chrome",
        "port": 9222,
        "webRoot": "${workspaceRoot}"
    }
]

}


Solution

  • This appears to resolve the issue. Hopefully, it's been added to the latest version of VS.

    "compounds": [
        {
            "name": "Node+Browser",
            "configurations": [ "Server", "Browser" ]
        }
    ],
    "configurations" [
        {
            "name": "Browser",
            "type": "chrome",
            //...
        },
        {
            "name": "Server",
            "type": "node",
            //...
        }
    ]