Debugging Cypress tests in Visual Studio Code

Question

I want to use VS Code to edit and debug Cypress tests. It seems like this should be simple; the cypress docs mention VS Code directly (but give no clues about how to configure VS Code's launch.json file for debugging either there or on the debugging page). I have a launch.json configuration that starts cypress/electron, but VS Code gives this error:

Cannot connect to runtime process… connect ECONNREFUSED 127.0.0.1:5858

Then shuts it down.

Looking at the sample electron for VS Code project doesn't help (adding protocol or program attributes didn't work).

Here is my configuration:

{
    "name": "Start integration_tests",
    "type": "node",
    "request": "launch",
    "stopOnEntry": false,
    "cwd": "${workspaceRoot}",
    "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/cypress",
    "runtimeArgs": [
        "open"
    ],
    "console" : "internalConsole",
    "port": 5858,
}

Answer 1

I set this up today and it worked!

1. Modify plugins/index.js to launch Chrome in debug mode (--remote-debugging-port=9222):

module.exports = (on, config) => {

  on('before:browser:launch', (browser = {}, args) => {

    if (browser.name === 'chrome') {
      args.push('--remote-debugging-port=9222')

      // whatever you return here becomes the new args
      return args
    }

  })
}

Cypress Browser Launch API

2. Add the following to your launch.json (note the same port as above)

{
  "type": "chrome",
  "request": "attach",
  "name": "Attach to Chrome",
  "port": 9222,
  "urlFilter": "http://localhost:4200/*",
  "webRoot": "${workspaceFolder}"
}

3. Put the word "debugger" in your test. See Cypress Doc on debugging
4. Run "cypress open" and launch the test from #3 in Chrome
5. Start the vscode debugger with your new "Attach to Chrome" configuration
6. Restart the test with "debugger" in it and debug away!