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

@fhilton's answer used to work, but with newer versions of Cypress, it will cause Chrome to not be able to connect to the test runner and not run any tests. Use this instead:

1. Install the standard vscode Debugger for Chrome extension.
2. If you or any of your co-workers develop in Windows, run npm i cross-env.
3. In package.json add a script to start the Cypress test runner (or if you already have a script that says something like cypress open then just modify that). You want the script to set the CYPRESS_REMOTE_DEBUGGING_PORT environment variable to something like 9222 before it runs cypress open. Since I use Windows, I use the cross-env npm package to set environment variables. Therefore, the script in my package.json looks like

"scripts": {
  "cypr": "cross-env CYPRESS_REMOTE_DEBUGGING_PORT=9222 cypress open",
},

I got the idea of doing that from here and here. The rest of this answer is mostly what @fhilton wrote in his answer so most of the credit goes to them.

4. Add the following to the list of configurations in your launch.json (note the same port as above)

{
    "type": "chrome",
    "request": "attach",
    "name": "Attach to Cypress Chrome",
    "port": 9222,
    "urlFilter": "http://localhost*",
    "webRoot": "${workspaceFolder}",
    "sourceMaps": true,
    "skipFiles": [
        "cypress_runner.js",
    ],
},

5. Put the word debugger in your test. See Cypress Doc on debugging. Or, if you are confident in your source maps, put a breakpoint in your code with vscode.
6. Run npm run cypr (or whatever you called your npm script)
7. From the Cypress test runner, start your tests running in Chrome
8. Start the vscode debugger with your new "Attach to Cypress Chrome" configuration
9. Restart the test with breakpoint in it and debug away!