Add dashboard browser setting for VS Code extension

extension/package.json

@@ -233,6 +233,25 @@
           "description": "%configuration.aspire.enableAspireDashboardAutoLaunch%",
           "scope": "window"
         },
+        "aspire.dashboardBrowser": {
+          "type": "string",
+          "enum": ["openExternalBrowser", "debugChrome", "debugEdge", "debugFirefox"],
+          "default": "openExternalBrowser",
+          "description": "%configuration.aspire.dashboardBrowser%",
+          "enumDescriptions": [
+            "%configuration.aspire.dashboardBrowser.openExternalBrowser%",
+            "%configuration.aspire.dashboardBrowser.debugChrome%",
+            "%configuration.aspire.dashboardBrowser.debugEdge%",
+            "%configuration.aspire.dashboardBrowser.debugFirefox%"
+          ],
+          "scope": "window"
+        },
+        "aspire.closeDashboardOnDebugEnd": {
+          "type": "boolean",
+          "default": true,
+          "description": "%configuration.aspire.closeDashboardOnDebugEnd%",
+          "scope": "window"
+        },
         "aspire.enableDebugConfigEnvironmentLogging": {
           "type": "boolean",
           "default": true,

extension/package.nls.json

@@ -21,6 +21,12 @@
   "configuration.aspire.enableAspireCliDebugLogging": "Enable console debug logging for Aspire CLI commands executed by the extension.",
   "configuration.aspire.enableAspireDcpDebugLogging": "Enable Developer Control Plane (DCP) debug logging for Aspire applications. Logs will be stored in the workspace's .aspire/dcp/logs-{debugSessionId} folder.",
   "configuration.aspire.enableAspireDashboardAutoLaunch": "Enable automatic launch of the Aspire Dashboard when using the Aspire debugger.",
+  "configuration.aspire.dashboardBrowser": "The browser to use when auto-launching the Aspire Dashboard.",
+  "configuration.aspire.dashboardBrowser.openExternalBrowser": "Use the system default browser (cannot auto-close).",
+  "configuration.aspire.dashboardBrowser.debugChrome": "Launch Chrome as a debug session (auto-closes when debugging ends).",
+  "configuration.aspire.dashboardBrowser.debugEdge": "Launch Microsoft Edge as a debug session (auto-closes when debugging ends).",
+  "configuration.aspire.dashboardBrowser.debugFirefox": "Launch Firefox as a debug session (requires Firefox Debugger extension).",
+  "configuration.aspire.closeDashboardOnDebugEnd": "Close the dashboard browser when the debug session ends. Works with debug browser options (Chrome, Edge, Firefox).",
   "configuration.aspire.enableDebugConfigEnvironmentLogging": "Include environment variables when logging debug session configurations. This can help diagnose environment-related issues but may expose sensitive information in logs.",
   "command.runAppHost": "Run Aspire apphost",
 	"command.debugAppHost": "Debug Aspire apphost",

extension/src/debugger/AspireDebugSession.ts

@@ -6,15 +6,18 @@ import { AspireResourceExtendedDebugConfiguration, AspireResourceDebugSession, E
 import { extensionLogOutputChannel } from "../utils/logging";
 import AspireDcpServer, { generateDcpIdPrefix } from "../dcp/AspireDcpServer";
 import { spawnCliProcess } from "./languages/cli";
-import { disconnectingFromSession, launchingWithAppHost, launchingWithDirectory, processExceptionOccurred, processExitedWithCode } from "../loc/strings";
+import { disconnectingFromSession, launchingWithAppHost, launchingWithDirectory, processExceptionOccurred, processExitedWithCode, aspireDashboard } from "../loc/strings";
 import { projectDebuggerExtension } from "./languages/dotnet";
 import AspireRpcServer from "../server/AspireRpcServer";
 import { createDebugSessionConfiguration } from "./debuggerExtensions";
 import { AspireTerminalProvider } from "../utils/AspireTerminalProvider";
 import { ICliRpcClient } from "../server/rpcClient";
 import path from "path";
+import os from "os";
 import { EnvironmentVariables } from "../utils/environment";
 
+export type DashboardBrowserType = 'openExternalBrowser' | 'debugChrome' | 'debugEdge' | 'debugFirefox';
+
 export class AspireDebugSession implements vscode.DebugAdapter {
   private readonly _onDidSendMessage = new EventEmitter<any>();
   private _messageSeq = 1;
@@ -28,6 +31,7 @@ export class AspireDebugSession implements vscode.DebugAdapter {
   private _resourceDebugSessions: AspireResourceDebugSession[] = [];
   private _trackedDebugAdapters: string[] = [];
   private _rpcClient?: ICliRpcClient;
+  private _dashboardDebugSession: vscode.DebugSession | null = null;
   private readonly _disposables: vscode.Disposable[] = [];
 
   public readonly onDidSendMessage = this._onDidSendMessage.event;
@@ -280,6 +284,79 @@ export class AspireDebugSession implements vscode.DebugAdapter {
     });
   }
 
+  /**
+   * Opens the dashboard URL in the specified browser.
+   * For debugChrome/debugEdge/debugFirefox, launches as a child debug session that auto-closes with the Aspire debug session.
+   */
+  async openDashboard(url: string, browserType: DashboardBrowserType): Promise<void> {
+    extensionLogOutputChannel.info(`Opening dashboard in browser: ${browserType}, URL: ${url}`);
+
+    switch (browserType) {
+      case 'debugChrome':
+        await this.launchDebugBrowser(url, 'pwa-chrome');
+        break;
+
+      case 'debugEdge':
+        await this.launchDebugBrowser(url, 'pwa-msedge');
+        break;
+
+      case 'debugFirefox':
+        await this.launchDebugBrowser(url, 'firefox');
+        break;
+
+      case 'openExternalBrowser':
+      default:
+        // Use VS Code's default external browser handling
+        await vscode.env.openExternal(vscode.Uri.parse(url));
+        break;
+    }
+  }
+
+  /**
+   * Launches a browser as a child debug session.
+   * The browser will automatically close when the parent Aspire debug session ends.
+   */
+  private async launchDebugBrowser(url: string, debugType: 'pwa-chrome' | 'pwa-msedge' | 'firefox'): Promise<void> {
+    const debugConfig: vscode.DebugConfiguration = {
+      type: debugType,
+      name: aspireDashboard,
+      request: 'launch',
+      url: url,
+    };
+
+    // Add type-specific options
+    if (debugType === 'pwa-chrome' || debugType === 'pwa-msedge') {
+      // Don't pause on entry for Chrome/Edge
+      debugConfig.pauseForSourceMap = false;
+    }
+    else if (debugType === 'firefox') {
+      // Firefox debugger requires webRoot; resolve to actual workspace path
+      debugConfig.webRoot = vscode.workspace.workspaceFolders?.[0]?.uri.fsPath ?? os.tmpdir();
+      debugConfig.pathMappings = [];
+    }
+
+    // Register listener before starting so we don't miss the event
+    const disposable = vscode.debug.onDidStartDebugSession((session) => {
+      if (session.configuration.name === aspireDashboard && session.type === debugType) {
+        this._dashboardDebugSession = session;
+        disposable.dispose();
+      }
+    });
+
+    // Start as a child debug session - it will close when parent closes
+    const didStart = await vscode.debug.startDebugging(
+      undefined,
+      debugConfig,
+      this._session
+    );
+
+    if (!didStart) {
+      disposable.dispose();
+      extensionLogOutputChannel.warn(`Failed to start debug browser (${debugType}), falling back to default browser`);
+      await vscode.env.openExternal(vscode.Uri.parse(url));
+    }
+  }
+
   dispose(): void {
     extensionLogOutputChannel.info('Stopping the Aspire debug session');
     vscode.debug.stopDebugging(this._session);
@@ -288,6 +365,36 @@ export class AspireDebugSession implements vscode.DebugAdapter {
     this._rpcClient?.stopCli();
   }
 
+  /**
+   * Closes the dashboard browser if closeDashboardOnDebugEnd is enabled.
+   * Handles closing debug browser sessions.
+   */
+  private closeDashboard(): void {
+    const aspireConfig = vscode.workspace.getConfiguration('aspire');
+    const shouldClose = aspireConfig.get<boolean>('closeDashboardOnDebugEnd', true);
+
+    if (!shouldClose) {
+      this._dashboardDebugSession = null;
+      return;
+    }
+
+    extensionLogOutputChannel.info('Closing dashboard browser...');
+
+    // For debug browsers, stop the debug session
+    if (this._dashboardDebugSession) {
+      vscode.debug.stopDebugging(this._dashboardDebugSession).then(
+        () => extensionLogOutputChannel.info('Dashboard debug session stopped.'),
+        (err) => extensionLogOutputChannel.warn(`Failed to stop dashboard debug session: ${err}`)
+      );
+      this._dashboardDebugSession = null;
+      return;
+    }
+    // At this point there is no tracked dashboard debug session to stop.
+    // Any debug browser child sessions (debugChrome, debugEdge, debugFirefox) will
+    // automatically close when the parent Aspire session is stopped, so no further
+    // cleanup is required here.
+  }
+
   private sendResponse(request: any, body: any = {}) {
     this._onDidSendMessage.fire({
       type: 'response',

extension/src/loc/strings.ts

@@ -9,6 +9,7 @@ export const codespacesUrl = (url: string) => vscode.l10n.t('Codespaces: {0}', u
 export const directLink = vscode.l10n.t('Open local URL');
 export const codespacesLink = vscode.l10n.t('Open codespaces URL');
 export const openAspireDashboard = vscode.l10n.t('Launch Aspire Dashboard');
+export const aspireDashboard = vscode.l10n.t('Aspire Dashboard');
 export const noWorkspaceOpen = vscode.l10n.t('No workspace is open. Please open a folder or workspace before running this command.');
 export const failedToShowPromptEmpty = vscode.l10n.t('Failed to show prompt, text was empty.');
 export const rpcServerAddressError = vscode.l10n.t('Failed to get RPC server address. The extension may not function correctly.');

extension/src/server/interactionService.ts

@@ -8,7 +8,7 @@ import { ProgressNotifier } from './progressNotifier';
 import { applyTextStyle, formatText } from '../utils/strings';
 import { extensionLogOutputChannel } from '../utils/logging';
 import { AspireExtendedDebugConfiguration, EnvVar } from '../dcp/types';
-import { AspireDebugSession } from '../debugger/AspireDebugSession';
+import { AspireDebugSession, DashboardBrowserType } from '../debugger/AspireDebugSession';
 import { AnsiColors } from '../utils/AspireTerminalProvider';
 import { isDirectory } from '../utils/io';
 
@@ -33,6 +33,7 @@ export interface IInteractionService {
     logMessage: (logLevel: CSLogLevel, message: string) => void;
     launchAppHost(projectFile: string, args: string[], environment: EnvVar[], debug: boolean): Promise<void>;
     stopDebugging: () => void;
+    closeDashboard: () => void;
     notifyAppHostStartupCompleted: () => void;
     startDebugSession: (workingDirectory: string, projectFile: string | null, debug: boolean) => Promise<void>;
     writeDebugSessionMessage: (message: string, stdout: boolean, textStyle?: string) => void;
@@ -305,11 +306,16 @@ export class InteractionService implements IInteractionService {
 
         //  If aspire.enableAspireDashboardAutoLaunch is true, the dashboard will be launched automatically and we do not need
         // to show an information message.
-        const enableDashboardAutoLaunch = vscode.workspace.getConfiguration('aspire').get<boolean>('enableAspireDashboardAutoLaunch', true);
+        const aspireConfig = vscode.workspace.getConfiguration('aspire');
+        const enableDashboardAutoLaunch = aspireConfig.get<boolean>('enableAspireDashboardAutoLaunch', true);
         if (enableDashboardAutoLaunch) {
-            // Open the dashboard URL in an external browser. Prefer codespaces URL if available.
+            // Open the dashboard URL in the configured browser. Prefer codespaces URL if available.
             const urlToOpen = codespacesUrl || baseUrl;
-            vscode.env.openExternal(vscode.Uri.parse(urlToOpen));
+            const debugSession = this._getAspireDebugSession();
+            if (debugSession) {
+                const browserType = aspireConfig.get<DashboardBrowserType>('dashboardBrowser', 'openExternalBrowser');
+                await debugSession.openDashboard(urlToOpen, browserType);
+            }
             return;
         }
 
@@ -458,6 +464,13 @@ export class InteractionService implements IInteractionService {
     clearProgressNotification() {
         this._progressNotifier.clear();
     }
+
+    /**
+     * Closes the dashboard browser. Delegates to the current AspireDebugSession.
+     */
+    closeDashboard(): void {
+        // No-op when called from InteractionService - the debug session handles closing in dispose()
+    }
 }
 
 function tryExecuteEndpoint(interactionService: IInteractionService, withAuthentication: (callback: (...params: any[]) => any) => (...params: any[]) => any) {