feat(browser): support --inspect-brk

[AriPerkkio]

Description

• Continues feat(browser): support --inspect #6433

Adds support for --browser --inspect-brk. Compared to --inspect, this one waits for debugger to attach and then stops on top of the first test file. Similar experience as vitest --inspect-brk does on Node side. Requires CDP so only Playwright and Chromium browser are supported.

Demo below has no initial breakpoints set:

vitest-inspect-brk.webm

Please don't delete this checklist! Before submitting the PR, please make sure you do the following:

• It's really useful if your PR references an issue where it is discussed ahead of time. If the feature is substantial or introduces breaking changes without a discussion, PR might be closed.
• Ideally, include a test that fails without this PR but passes with it.
• Please, don't make changes to pnpm-lock.yaml unless you introduce a new test example.

Tests

• Run the tests with pnpm test:ci.

Documentation

• If you introduce new functionality, document it. You can run documentation with pnpm run docs command.

Changesets

• Changes in changelog are generated from PR name. Please, make sure that it explains your changes in an understandable manner. Please, prefix changeset messages with feat:, fix:, perf:, docs:, or chore:.

[netlify]

✅ Deploy Preview for vitest-dev ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	32ea024
🔍 Latest deploy log	https://app.netlify.com/sites/vitest-dev/deploys/66ddb9499c24280008683e17
😎 Deploy Preview	https://deploy-preview-6434--vitest-dev.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[AriPerkkio]

The requirement for --no-file-parallelism when used with --browser was removed in #6433 but during this PR I noticed that the flag actually affects browser mode as well. We need it in order to successfully set breakpoint to the first test file.

[AriPerkkio]

This test is based on Node pool's equivalent, but adding browser mode tests there didn't look right.

vitest/test/cli/test/inspect.test.ts

Lines 1 to 92 in 8d883cf

	import type { InspectorNotification } from 'node:inspector'
	import { expect, test } from 'vitest'
	import WebSocket from 'ws'
	import { runVitestCli } from '../../test-utils'
	type Message = Partial<InspectorNotification<any>>
	test('--inspect-brk stops at test file', async () => {
	const { vitest, waitForClose } = await runVitestCli(
	'--root',
	'fixtures/inspect',
	'--inspect-brk',
	'9232',
	'--no-file-parallelism',
	)
	await vitest.waitForStderr('Debugger listening on ')
	const url = vitest.stderr.split('\n')[0].replace('Debugger listening on ', '')
	const { receive, send } = await createChannel(url)
	send({ method: 'Debugger.enable' })
	send({ method: 'Runtime.enable' })
	await receive('Runtime.executionContextCreated')
	const paused = receive('Debugger.paused')
	send({ method: 'Runtime.runIfWaitingForDebugger' })
	const { params } = await paused
	const scriptId = params.callFrames[0].functionLocation.scriptId
	// Verify that debugger paused on test file
	const response = receive()
	send({ method: 'Debugger.getScriptSource', params: { scriptId } })
	const { result } = await response as any
	expect(result.scriptSource).toContain('test("sum", () => {')
	expect(result.scriptSource).toContain('expect(1 + 1).toBe(2)')
	send({ method: 'Debugger.resume' })
	await vitest.waitForStdout('Test Files 1 passed (1)')
	await waitForClose()
	})
	async function createChannel(url: string) {
	const ws = new WebSocket(url)
	let id = 1
	let receiver = defer()
	ws.onerror = receiver.reject
	ws.onmessage = (message) => {
	const response = JSON.parse(message.data.toString())
	receiver.resolve(response)
	}
	async function receive(filter?: string) {
	const message = await receiver.promise
	receiver = defer()
	if (filter && message.method !== filter) {
	return receive(filter)
	}
	return message
	}
	function send(message: Message) {
	ws.send(JSON.stringify({ ...message, id: id++ }))
	}
	await new Promise(r => ws.on('open', r))
	return { receive, send }
	}
	function defer(): {
	promise: Promise<Message>
	resolve: (response: Message) => void
	reject: (error: unknown) => void
	} {
	const pr = {} as ReturnType<typeof defer>
	pr.promise = new Promise((resolve, reject) => {
	pr.resolve = resolve
	pr.reject = reject
	})
	return pr
	}