Debugging in VSCode

My editor of choice is VSCode for being lighter than a traditional IDE but a little more than a text editor. It can be frustrating setting up the debugger, hopefully the

Setting up the launch.json file

1. If you don't already have this, create a folder in the root directory called .vscode
2. Create a file under the .vscode folder called launch.json

3. Copy and paste the following code into the launch.json file

{
    // Use IntelliSense to learn about possible Node.js debug attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Debug",
            "runtimeExecutable": "npm.cmd",
            "cwd": "${workspaceRoot}",
            "env":{
               "NODE_PATH": "${workspaceRoot}/node_modules"
            },
            "runtimeArgs": [
                "run-script", "debug"
            ],
            "port": 1337
        }
    ]
} 

Setting up the package.json script

You probably already have this script in the package.json file but let's make sure

1. Open the package.json file in the root directory
2. Under "scripts" make sure you have the following code for "debug"

"scripts": {
  "debug": "node --inspect=1337 --debug-brk --nolazy node_modules/cucumber/bin/cucumber-js --tags @debug --format json:./reports/report.json"
}

Using debugging

You should be all set. Let's try out debugging.

1. For the script I created I tag the scenario that I'm debugging, so all of my tests don't run just the test that I want to debug runs.

2. Select debug in the left pane

3. You should see the "Debug" in the configuration dropdown

4. Now set a breakpoint at the point in the code that is you are trying to learn more about

5. Click the green arrow next to the configuration dropdown