What is the proper way to debug an npm script using vscode?

I've got an npm script that I'm trying to debug. I use vscode so I thought I'd create a debug configuration and step through it with the debugger.

My npm script look is:

"scripts": {
    ...
    "dev": "node tasks/runner.js",
}

So I created the following debug config:

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Launch Program",
            "runtimeExecutable": "npm",
            "cwd": "${workspaceRoot}",
            "runtimeArgs": [
                "run", "dev"
            ],
            "port": 5858,
            "stopOnEntry": true
        }
    ]
}

And when I fire it the script runs, but vscode is never able to connect and I get the error:

Cannot connect to runtime via 'legacy' protocol; consider using 'inspector' protocol (timeout after 10000 ms).

I tried adding an inspector protocol:

       {
            "type": "node",
            "request": "attach",
            "name": "Attach (Inspector Protocol)",
            "port": 9229,
            "protocol": "inspector"
       }

And running the npm script via:

npm run dev --inspect

And this time I get the error:

Ensure Node was launched with --inspect. Cannot connect to runtime process, timeout after 10000 ms - (reason: Cannot connect to the target: connect ECONNREFUSED 127.0.0.1:9229).

I'm not sure what part I'm missing.

via Chris Schmitz