fix: enable Browser Debug when using project configurations (#702)

Author: Alanoll

packages/extension/src/debug.ts

@@ -198,12 +198,13 @@ export async function debugTests(
               },
             ).then(
               (fullfilled) => {
+                log.info('[DEBUG] Browser debugger started')
                 metadata.rpc.onBrowserDebug(fullfilled).catch(() => {})
                 if (fullfilled) {
-                  log.info('[DEBUG] Secondary debug launch config started')
+                  log.info('[DEBUG] Browser debugger attached')
                 }
                 else {
-                  log.error('[DEBUG] Secondary debug launch config failed')
+                  log.error('[DEBUG] Browser debugger failed to attach')
                 }
               },
               (error) => {

packages/worker/src/index.ts

@@ -16,6 +16,7 @@ export async function initVitest(
   const meta = data.meta
   const reporter = new VSCodeReporter({
     setupFilePaths: meta.setupFilePaths,
+    debug: data.debug,
   })
 
   let stdout: Writable | undefined
@@ -78,6 +79,9 @@ export async function initVitest(
           meta.pnpLoader,
         ]
       : [],
+    inspect: typeof data.debug === 'object'
+      ? `${data.debug.host}:${data.debug.port}`
+      : undefined,
   }
   const vitest = await vitestModule.createVitest(
     'test',
@@ -122,19 +126,6 @@ export async function initVitest(
               } as any,
             }
           },
-          configureVitest(context) {
-            const options = context.project.config.browser
-            if (options?.enabled && typeof data.debug === 'object') {
-              context.project.config.setupFiles.push(meta.setupFilePaths.browserDebug)
-              context.vitest.config.inspector = {
-                enabled: true,
-                port: data.debug.port,
-                host: data.debug.host,
-                waitForDebugger: false,
-              }
-              context.project.config.inspector = context.vitest.config.inspector
-            }
-          },
           api: {
             vitest: {
               experimental: {

packages/worker/src/reporter.ts

@@ -1,5 +1,5 @@
 import type { RunnerTaskResultPack, UserConsoleLog } from 'vitest'
-import type { VitestWorkerRPC, WorkerInitMetadata } from 'vitest-vscode-shared'
+import type { VitestWorkerRPC, WorkerInitMetadata, WorkerRunnerOptions } from 'vitest-vscode-shared'
 import type {
   BrowserCommand,
   Reporter,
@@ -15,20 +15,25 @@ import { ExtensionWorker } from './worker'
 
 interface VSCodeReporterOptions {
   setupFilePaths: WorkerInitMetadata['setupFilePaths']
+  debug: WorkerRunnerOptions['debug']
 }
 
 export class VSCodeReporter implements Reporter {
   public rpc!: VitestWorkerRPC
   private vitest!: VitestCore
 
   private setupFilePaths: WorkerInitMetadata['setupFilePaths']
+  private debug: WorkerRunnerOptions['debug']
 
   constructor(options: VSCodeReporterOptions) {
     this.setupFilePaths = options.setupFilePaths
+    this.debug = options.debug
   }
 
   onInit(vitest: VitestCore) {
     this.vitest = vitest
+    this.configureBrowserDebugging(vitest)
+
     vitest.projects.forEach((project) => {
       this.ensureSetupFileIsAllowed(project.vite.config)
     })
@@ -142,6 +147,19 @@ export class VSCodeReporter implements Reporter {
     })
   }
 
+  configureBrowserDebugging(vitest: VitestCore) {
+    //
+    // Note: This is too late to enable the inspector itself, but we can still add setup files
+    //
+    if (this.debug !== undefined && typeof this.debug === 'object') {
+      vitest.projects.forEach((project) => {
+        if (project.config.browser?.enabled) {
+          project.config.setupFiles.push(this.setupFilePaths.browserDebug)
+        }
+      })
+    }
+  }
+
   toJSON() {
     return {}
   }