mirror of
https://github.com/vitest-dev/vitest.git
synced 2025-12-08 18:26:03 +00:00
142 lines
4.4 KiB
Markdown
142 lines
4.4 KiB
Markdown
---
|
|
title: Debugging | Guide
|
|
---
|
|
|
|
# Debugging
|
|
|
|
:::tip
|
|
When debugging tests you might want to use following options:
|
|
|
|
- [`--test-timeout=0`](/guide/cli#testtimeout) to prevent tests from timing out when stopping at breakpoints
|
|
- [`--no-file-parallelism`](/guide/cli#fileparallelism) to prevent test files from running parallel
|
|
|
|
:::
|
|
|
|
## VS Code
|
|
|
|
Quick way to debug tests in VS Code is via `JavaScript Debug Terminal`. Open a new `JavaScript Debug Terminal` and run `npm run test` or `vitest` directly. *this works with any code run in Node, so will work with most JS testing frameworks*
|
|
|
|
|
|
|
|
You can also add a dedicated launch configuration to debug a test file in VS Code:
|
|
|
|
```json
|
|
{
|
|
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
|
|
"version": "0.2.0",
|
|
"configurations": [
|
|
{
|
|
"type": "node",
|
|
"request": "launch",
|
|
"name": "Debug Current Test File",
|
|
"autoAttachChildProcesses": true,
|
|
"skipFiles": ["<node_internals>/**", "**/node_modules/**"],
|
|
"program": "${workspaceRoot}/node_modules/vitest/vitest.mjs",
|
|
"args": ["run", "${relativeFile}"],
|
|
"smartStep": true,
|
|
"console": "integratedTerminal"
|
|
}
|
|
]
|
|
}
|
|
```
|
|
|
|
Then in the debug tab, ensure 'Debug Current Test File' is selected. You can then open the test file you want to debug and press F5 to start debugging.
|
|
|
|
### Browser mode
|
|
|
|
To debug [Vitest Browser Mode](/guide/browser/index.md), pass `--inspect` or `--inspect-brk` in CLI or define it in your Vitest configuration:
|
|
|
|
::: code-group
|
|
```bash [CLI]
|
|
vitest --inspect-brk --browser --no-file-parallelism
|
|
```
|
|
```ts [vitest.config.js]
|
|
import { defineConfig } from 'vitest/config'
|
|
import { playwright } from '@vitest/browser-playwright'
|
|
|
|
export default defineConfig({
|
|
test: {
|
|
inspectBrk: true,
|
|
fileParallelism: false,
|
|
browser: {
|
|
provider: playwright(),
|
|
instances: [{ browser: 'chromium' }]
|
|
},
|
|
},
|
|
})
|
|
```
|
|
:::
|
|
|
|
By default Vitest will use port `9229` as debugging port. You can overwrite it with by passing value in `--inspect-brk`:
|
|
|
|
```bash
|
|
vitest --inspect-brk=127.0.0.1:3000 --browser --no-file-parallelism
|
|
```
|
|
|
|
Use following [VSCode Compound configuration](https://code.visualstudio.com/docs/editor/debugging#_compound-launch-configurations) for launching Vitest and attaching debugger in the browser:
|
|
|
|
```json
|
|
{
|
|
"version": "0.2.0",
|
|
"configurations": [
|
|
{
|
|
"type": "node",
|
|
"request": "launch",
|
|
"name": "Run Vitest Browser",
|
|
"program": "${workspaceRoot}/node_modules/vitest/vitest.mjs",
|
|
"console": "integratedTerminal",
|
|
"args": ["--inspect-brk", "--browser", "--no-file-parallelism"]
|
|
},
|
|
{
|
|
"type": "chrome",
|
|
"request": "attach",
|
|
"name": "Attach to Vitest Browser",
|
|
"port": 9229
|
|
}
|
|
],
|
|
"compounds": [
|
|
{
|
|
"name": "Debug Vitest Browser",
|
|
"configurations": ["Attach to Vitest Browser", "Run Vitest Browser"],
|
|
"stopAll": true
|
|
}
|
|
]
|
|
}
|
|
```
|
|
|
|
## IntelliJ IDEA
|
|
|
|
Create a [vitest](https://www.jetbrains.com/help/idea/vitest.html#createRunConfigVitest) run configuration. Use the following settings to run all tests in debug mode:
|
|
|
|
Setting | Value
|
|
--- | ---
|
|
Working directory | `/path/to/your-project-root`
|
|
|
|
Then run this configuration in debug mode. The IDE will stop at JS/TS breakpoints set in the editor.
|
|
|
|
## Node Inspector, e.g. Chrome DevTools
|
|
|
|
Vitest also supports debugging tests without IDEs. However this requires that tests are not run parallel. Use one of the following commands to launch Vitest.
|
|
|
|
```sh
|
|
# To run in a single worker
|
|
vitest --inspect-brk --pool threads --poolOptions.threads.singleThread
|
|
|
|
# To run in a single child process
|
|
vitest --inspect-brk --pool forks --poolOptions.forks.singleFork
|
|
|
|
# To run in browser mode
|
|
vitest --inspect-brk --browser --no-file-parallelism
|
|
```
|
|
|
|
If you are using Vitest 1.1 or higher, you can also just provide `--no-file-parallelism` flag:
|
|
|
|
```sh
|
|
# If pool is unknown
|
|
vitest --inspect-brk --no-file-parallelism
|
|
```
|
|
|
|
Once Vitest starts it will stop execution and wait for you to open developer tools that can connect to [Node.js inspector](https://nodejs.org/en/docs/guides/debugging-getting-started/). You can use Chrome DevTools for this by opening `chrome://inspect` on browser.
|
|
|
|
In watch mode you can keep the debugger open during test re-runs by using the `--poolOptions.threads.isolate false` options.
|