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

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!