How to debug source in VsCode?

[FoxDaxian]

Describe the bug

After run vitest --ui, all tests passed. but the ui link: http://localhost:51204/__vitest__/ shows can not load page(404) as below:

Reproduction

Here are what I did:

1. clone vitest code: git clone https://github.com/vitest-dev/vitest.git
2. switch main branch
3. use pnpm to add all dependencies
4. run this command to do some test: pnpm -r --filter='./examples/basic' run test:ui
5. then the error page came out no matter all tests passed or not

System Info

System:
    OS: macOS 13.6.6
    CPU: (8) arm64 Apple M1 Pro
    Memory: 114.77 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.20.2 - ~/.nvm/versions/node/v18.20.2/bin/node
    npm: 10.5.0 - ~/.nvm/versions/node/v18.20.2/bin/npm
    pnpm: 8.10.3 - ~/.nvm/versions/node/v18.20.2/bin/pnpm
  Browsers:
    Chrome: 124.0.6367.62
    Safari: 16.6
  npmPackages:
    @vitest/browser: workspace:* => 1.5.0 
    @vitest/coverage-istanbul: workspace:* => 1.5.0 
    @vitest/coverage-v8: workspace:* => 1.5.0 
    @vitest/ui: workspace:* => 1.5.0 
    vite: ^5.2.6 => 5.2.6 
    vitest: workspace:* => 1.5.0

Used Package Manager

pnpm

Validations

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

[FoxDaxian]

and cause vitest is a monorepo type. so after install dependencies. some of them is soft-link things:

[hi-ogawa]

I just tested on fresh clone and it's working for me:

git clone --depth 1 git@github.com:vitest-dev/vitest.git vitest-fresh
cd vitest-fresh
pnpm i
pnpm build
pnpm -C examples/basic test:ui

[FoxDaxian]

well. seems like I can run test:ui only after get build steps done.
but if so. in debug mode. what I can test or trace is all uglified code. if there any why to debug source code?
like npm link way.
not sure ask here is properly or not. if not, you can close this.

[hi-ogawa]

Yeah, build step should be necessary inside the monorepo, but I'm still not sure what you intend to do. Are you thinking about contributing to Vitest repo, so you want to debug some internals inside this repo?

[FoxDaxian]

yeah, like I wanna Javascript Debug Terminal to get start debug process. then I think I can make some breakpoints in sourceCode(not in dist folder) , then I can have a good aware of what vitest does. then I can do changes, in the end, maybe create some pr or something.

like this below:

@hi-ogawa

[FoxDaxian]

Additional, I know I can change something of scripts of root package.json, like this below:

but I want to have a good aware of how did you develop or test Vitest.

Looking forward to your responses.

Thanks and best regards.

[hi-ogawa]

I've never actually tried using debugger on this monorepo and I can still get away with good old console.log.

My basic workflow is to run pnpm dev in one terminal, then in another terminal, I run internal tests like pnpm -C test/core test.
After adding console to whatever I want to check, pnpm dev rebuilds quickly, so I relaunch pnpm -C test/core test to see if it show something I would expect and trial-and-error from there.

Yeah, it would be nice if someone knows how to make debugger work, but that's not strictly necessary for my workflow.

[FoxDaxian]

Okay, understand. hope can get some other ideas per this topic.
but nevertheless. thanks for you quickly response and patient.
Have a good day! :)