debugger still not working while test in browser mode

[gezilinll]

Describe the bug

I commit issue yesterday: https://github.com/vitest-dev/vitest/issues/5085 , but @sheremet-va closed it and mark it to duplicate to https://github.com/vitest-dev/vitest/issues/4497 . I have tried ways of https://github.com/vitest-dev/vitest/issues/4497 metioned, but still not working, and I don't think they are same problem, please try my demo in Reproduction, it still can not debugger in browser mode, THANKS~

Reproduction

https://github.com/gezilinll/vitest-browser-debugger

System Info

System:
    OS: macOS 13.5.2
    CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 288.28 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.15.0 - ~/Library/Caches/fnm_multishells/56721_1706690459670/bin/node
    Yarn: 1.22.19 - ~/Library/Caches/fnm_multishells/56721_1706690459670/bin/yarn
    npm: 9.5.0 - ~/Library/Caches/fnm_multishells/56721_1706690459670/bin/npm
    pnpm: 7.30.0 - ~/Library/Caches/fnm_multishells/56721_1706690459670/bin/pnpm
  Browsers:
    Chrome: 121.0.6167.139
    Safari: 16.6

Used Package Manager

pnpm

Validations

• [X] Follow our Code of Conduct
• [X] Read the Contributing Guidelines.
• [X] Read the docs.
• [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• [X] Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• [X] The provided reproduction is a minimal reproducible example of the bug.

[AriPerkkio]

It's possible if you run Vitest in watch-mode and open browser's dev-tools.

[gezilinll]

It's possible if you run Vitest in watch-mode and open browser's dev-tools.

@AriPerkkio thanks, how to enable watch-mode and open dev-tools, i can't find infomation in document

[AriPerkkio]

To run in watch mode, remove the run part from here: https://github.com/gezilinll/vitest-browser-debugger/blob/51542b5af37f932ba35643190191e0961b23c70c/package.json#L5-L7

    "scripts": {
-        "test": "vitest run"
+        "test": "vitest"
    },

[hughfenghen]

If it's possible to debug with VS Code while running Vitest in headless mode, that would be great.

[hubertgrzeskowiak]

I am trying to run my vitest browser mode tests in debug mode through IntelliJ Idea, but it looks like my test code is run in a different thread (browser?) and hence none of the breakpoints trigger. It works out of the box when using the default, non-browser mode.

Is this the same issue described here, or should I open a new ticket?

[gezilinll]

To run in watch mode, remove the run part from here: https://github.com/gezilinll/vitest-browser-debugger/blob/51542b5af37f932ba35643190191e0961b23c70c/package.json#L5-L7

    "scripts": {
-        "test": "vitest run"
+        "test": "vitest"
    },

not working～

[next-juanantoniogomez]

@gezilinll The problem is not the browser mode, but the headless mode. Try to configure test.browser.headless = false in your vite.config.mjs.

[dangoodman]

I also use IntelliJ IDEA, and breakpoints and debugger instructions are not working for me either. Tests never stop on those. I have test.browser.headless = false in my vite.config.ts.

[AriPerkkio]

Debugger in VS code works fine with breakpoints with these settings:

// vitest.config.ts
import { defineConfig } from "vitest/config";

export default defineConfig({
  test: {
    browser: {
      enabled: true,
      name: "chromium",
      provider: "playwright",
      headless: true, // Both modes work fine
      providerOptions: {
        launch: {
          args: ["--remote-debugging-port=9222"],
        },
      },
    },
  },
});

// .vscode/launch.json
{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "attach",
            "name": "Attach to browser",
            "port": 9222
        }
    ]
}

1. Start Vitest in watch mode
2. Attach VS Code to the debug port
3. Set breakpoints
4. Re-run tests by pressing 'r' in Vitest's terminal

vitest-browser-mode-vscode-debug.webm

[niklas-wortmann]

For Idea support, I went ahead and opened a YouTrack ticket. I hope there is some kind of workaround, but I assume it requires some work in our vitest integration. Nevertheless, I'd appreciate it if you could upvote the youtrack ticket, so that we can gauge interest more accurately. Thanks!

[AriPerkkio]

I don't have access to IntelliJ, but you should be able to get it working with these instructions: https://www.jetbrains.com/help/idea/configuring-javascript-debugger.html

It's just about connecting to Chrome Devtools Protocol, not really Vitest related.

E: Installed IntelliJ trial and did some testing. It is possible to attach debugger into Vitest's browser mode. It's really hacky atm so https://youtrack.jetbrains.com/issue/WEB-68768/Vitest-Browser-Mode-Debugging-Doesnt-Work is needed.

intellij-demo.webm

[niklas-wortmann]

Thanks @AriPerkkio for providing a workaround for the IDEA platform, I documented it in YouTrack https://youtrack.jetbrains.com/issue/WEB-68768/Vitest-Browser-Mode-Debugging-Doesnt-Work#focus=Change-27-10353350.0-0

[AriPerkkio]

For VS Code you can also create a single configuration file. This will run Vitest and attach to the browser.

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Run Vitest",
      "program": "${workspaceRoot}/node_modules/vitest/vitest.mjs",
      "console": "integratedTerminal"
    },
    {
      "type": "chrome",
      "request": "attach",
      "name": "Attach to browser",
      "port": 9229
    }
  ],
  "compounds": [
    {
      "name": "Debug Vitest Browser",
      "configurations": ["Attach to browser", "Run Vitest"],
      "stopAll": true
    }
  ]
}

But from Vitest's side we could still improve the developer experience to match the current --inspect-brk usage.

We could make the --browser --inspect (or --inspect-brk) option to automatically set the --remote-debugging-port - the port could also be specified as argument --inspect=9000. And when --inspect-brk is passed, we should add breakpoint to the first test file using Debugger.setBreakpointByUrl. I tested this quickly by patching the Playwright provider a bit and it seems to work. But this will only work on Chromium based browsers.

Similar steps are done on Node's side for --inspect-brk here:

https://github.com/vitest-dev/vitest/blob/2c926bf2334f8b8a31bc93a92dd106b8b822082c/packages/vitest/src/runtime/inspector.ts#L30-L43