simple browser: console logs to chat by justschen · Pull Request #277293 · microsoft/vscode

Justin Chen (justschen) · 2025-11-13T23:21:47Z

a rehash of this PR #248459 which has been floating around forever. lots of chrome dev tools work to get logging working!

cc Kyle Cutler (@kycutler) since I think you're taking over some of the simple browser work

Screen.Recording.2025-11-13.at.3.19.10.PM.mov

vs-code-engineering · 2025-11-13T23:22:11Z

📬 CODENOTIFY

The following users are being notified based on files changed in this PR:

Johannes Rieken (@jrieken)

Matched files:

src/vs/workbench/contrib/chat/browser/chatEditing/simpleBrowserEditorOverlay.ts

Copilot

Pull Request Overview

This PR adds functionality to capture and attach console logs from the Simple Browser to chat conversations. It implements console log collection using Chrome DevTools Protocol in Electron and provides a UI button to attach these logs to the chat context.

Key Changes

Added console log collection via Chrome DevTools Protocol during debug sessions
Created a new getConsoleLogs() method across the service layer (platform → workbench)
Added an "Attach Logs" button (bug icon) in the Simple Browser overlay UI
Logs are stored in a module-level Map with a maximum of 5 entries per window

Reviewed Changes

Copilot reviewed 7 out of 7 changed files in this pull request and generated 12 comments.

Show a summary per file

File	Description
src/vs/platform/browserElements/electron-main/nativeBrowserElementsMainService.ts	Implements console log collection via CDP, stores logs in a Map, and formats them for display
src/vs/platform/browserElements/common/browserElements.ts	Adds `getConsoleLogs()` method to INativeBrowserElementsService interface
src/vs/workbench/services/browserElements/electron-browser/browserElementsService.ts	Implements workbench-level wrapper for getConsoleLogs()
src/vs/workbench/services/browserElements/browser/browserElementsService.ts	Adds getConsoleLogs() to IBrowserElementsService interface
src/vs/workbench/services/browserElements/browser/webBrowserElementsService.ts	Adds stub implementation throwing "not implemented" error for web
src/vs/workbench/contrib/chat/browser/chatEditing/simpleBrowserEditorOverlay.ts	Adds "Attach Logs" button and addConsolesToChat() method to attach logs to chat
src/vs/workbench/contrib/chat/browser/media/simpleBrowserOverlay.css	Adds CSS styling for the new bug icon button

Comments suppressed due to low confidence (1)

src/vs/platform/browserElements/electron-main/nativeBrowserElementsMainService.ts:318

The allConsole Map is accessed without any synchronization mechanism. Since the onMessage handler can add entries to the Map concurrently with getConsoleLogs reading from it, there's a potential race condition. While JavaScript is single-threaded, consider using a snapshot of the logs or ensuring proper handling if logs are being modified during formatting.


		const logs = allConsole.get(window.id) ?? [];
		if (logs.length === 0) {
			return undefined;
		}

		const formatted = logs.map(log => {
			let line = '';
			if (log.type === 'console') {
				line = `[${log.level?.toUpperCase()}] ${log.message}`;
			} else if (log.type === 'exception') {
				line = `[ERROR] Exception: ${log.message}`;
				if (log.exceptionDetails?.stackTrace?.callFrames?.length) {
					line += '\nStack Trace:';
					log.exceptionDetails.stackTrace.callFrames.forEach((frame: any) => {
						line += `\n  at ${frame.functionName} (${frame.url}:${frame.lineNumber}:${frame.columnNumber})`;
					});
				}
			} else if (log.type === 'log') {
				line = `[${log.level?.toUpperCase()}] ${log.message}`;
			}
			return line;
		}).join('\n');

		return formatted;
	}

	async finishOverlay(debuggers: any, sessionId: string | undefined): Promise<void> {
		if (debuggers.isAttached() && sessionId) {
			await debuggers.sendCommand('Overlay.setInspectMode', {

Copilot · 2025-11-13T23:33:16Z

+		const onMessage = (event: any, method: string, params: any, sessionIdFromMessage?: string) => {
+			if (sessionIdFromMessage === sessionId && (method === 'Runtime.consoleAPICalled' || method === 'Runtime.exceptionThrown' || method === 'Log.entryAdded')) {
+				const current = allConsole.get(windowId!) ?? [];
+
+				let logEntry: LogEntry;
+
+				if (method === 'Runtime.consoleAPICalled') {
+					// Extract console message from args
+					const args = params.args?.map((arg: any) => {
+						if (arg.type === 'string') {
+							return arg.value;
+						}
+						if (arg.type === 'object') {
+							// For objects, try to extract a readable representation
+							if (arg.preview?.description) {
+								return arg.preview.description;
+							}
+							return JSON.stringify(arg, null, 2);
+						}
+						if (arg.value !== undefined) {
+							return arg.value;
+						}
+						return JSON.stringify(arg, null, 2);
+					}) ?? [];
+
+					logEntry = {
+						type: 'console',
+						level: params.type, // 'log', 'debug', 'info', 'error', 'warning', 'dir', 'dirxml', 'table', 'trace', 'clear', 'startGroup', 'startGroupCollapsed', 'endGroup'
+						message: args.join(' '),
+						args: params.args,
+						timestamp: Date.now(),
+						rawData: JSON.stringify(params)
+					};
+				} else if (method === 'Runtime.exceptionThrown') {
+					const exceptionDetails = params.exceptionDetails;
+					let errorMessage = exceptionDetails?.text || 'Unknown error';
+					if (exceptionDetails?.exception?.description) {
+						errorMessage = exceptionDetails.exception.description;
+					}
+
+					logEntry = {
+						type: 'exception',
+						level: 'error',
+						message: errorMessage,
+						exceptionDetails: params.exceptionDetails,
+						timestamp: Date.now(),
+						rawData: JSON.stringify(params)
+					};
+				} else { // Log.entryAdded
+					logEntry = {
+						type: 'log',
+						level: params.level, // 'verbose', 'info', 'warning', 'error'
+						message: params.text,
+						timestamp: Date.now(),
+						rawData: JSON.stringify(params)
+					};
+				}
+
+				if (!current.some(entry => entry.rawData === logEntry.rawData)) {
+					current.push(logEntry);
+					if (current.length > 5) {
+						current.shift();
+					}
+					allConsole.set(windowId!, current);
+				}
+			}
+		};
+
 		try {


The onMessage event handler captures windowId from the outer scope, but windowId could potentially be undefined (as the parameter type indicates). While it's checked at line 140, using the non-null assertion (windowId!) at lines 160, 226 could fail if the check at 140 doesn't return. Consider checking windowId is defined before setting up the message handler or using a local constant to store the validated windowId.

Copilot · 2025-11-13T23:33:17Z

 	}
+
+	async getConsoleLogs(): Promise<string | undefined> {
+		return await this.simpleBrowser.getConsoleLogs();


[nitpick] The await keyword is unnecessary here since the method is directly returning the promise from this.simpleBrowser.getConsoleLogs(). This can be simplified to return this.simpleBrowser.getConsoleLogs(); for cleaner code.

Suggested change

return await this.simpleBrowser.getConsoleLogs();

return this.simpleBrowser.getConsoleLogs();

Copilot · 2025-11-13T23:33:17Z

+				targetId: matchingTargetId,
+				flatten: true,
+			});
+			sessionId = attachResult.sessionId;


This comment does not accurately describe what's happening. The code already attached to the target and enabled console logging above (lines 241-250). This section is for handling detachment on IPC messages, not "starts console logging".

Copilot · 2025-11-13T23:33:17Z

+	rawData: string;
+}
+
+const allConsole = new Map<number, LogEntry[]>();


The global module-level Map (allConsole) storing console logs has no cleanup mechanism. As users open/close windows, this Map will continue to grow indefinitely, leading to a memory leak. Consider adding cleanup logic when windows are closed (e.g., in a window close event handler) to remove entries from the Map.

Copilot · 2025-11-13T23:33:18Z

+	async addConsolesToChat() {
+		const logs = await this._browserElementsService.getConsoleLogs();
+		const toAttach: IChatRequestVariableEntry[] = [];
+
+		toAttach.push({
+			id: 'element-' + Date.now(),
+			name: localize('consoleLogs', 'Console Logs'),
+			fullName: localize('consoleLogs', 'Console Logs'),
+			value: logs,
+			kind: 'element',
+			icon: ThemeIcon.fromId(Codicon.bug.id),
+		});
+
+		const widget = await showChatView(this._viewService, this._layoutService) ?? this._chatWidgetService.lastFocusedWidget;
+		widget?.attachmentModel?.addContext(...toAttach);
+	}


The addConsolesToChat method doesn't handle the case where logs could be undefined. If no logs are available, the method will attach a context entry with value: undefined, which may not be the desired behavior. Consider adding a check and either showing a message to the user or returning early if no logs are available.

Copilot · 2025-11-13T23:33:18Z

 		const cancelButtonLabel = localize('cancelSelectionLabel', 'Cancel');
 		cancelButton.label = cancelButtonLabel;

+		const attachLogs = this._showStore.add(new Button(mainContent, { supportIcons: true, title: localize('chat.attachLogs', "Attach Logs") }));


The attachLogs button is missing the defaultButtonStyles spread that other buttons in this file use (e.g., cancelButton, configure). This inconsistency may lead to different visual appearance. Consider adding ...defaultButtonStyles to maintain consistency with other buttons.

Suggested change

const attachLogs = this._showStore.add(new Button(mainContent, { supportIcons: true, title: localize('chat.attachLogs', "Attach Logs") }));

const attachLogs = this._showStore.add(new Button(mainContent, { ...defaultButtonStyles, supportIcons: true, title: localize('chat.attachLogs', "Attach Logs") }));

Copilot · 2025-11-13T23:33:19Z

+	message?: string;
+	args?: any[];
+	exceptionDetails?: any;
+	params?: any;


The params property in the LogEntry interface appears to be unused. It's only assigned in the interface definition but never used elsewhere in the code, and in the console API logging, the args field already stores the relevant data.

Suggested change

params?: any;

Copilot · 2025-11-13T23:33:19Z

 		}

+		let sessionId: string | undefined;
+		const onMessage = (event: any, method: string, params: any, sessionIdFromMessage?: string) => {


Using any type for debuggers parameter lacks type safety. Consider defining a proper interface or type for the debugger object to improve code maintainability and catch potential errors at compile time.

Suggested change

const onMessage = (event: any, method: string, params: any, sessionIdFromMessage?: string) => {

/**

* Types for debugger protocol messages

*/

interface ConsoleAPICalledParams {

args?: Array<{

type: string;

value?: unknown;

preview?: {

description?: string;

};

}>;

type: string;

}

interface ExceptionThrownParams {

exceptionDetails?: {

text?: string;

exception?: {

description?: string;

};

};

}

interface LogEntryAddedParams {

level: string;

text: string;

}

type DebuggerParams = ConsoleAPICalledParams | ExceptionThrownParams | LogEntryAddedParams;

const onMessage = (event: unknown, method: string, params: DebuggerParams, sessionIdFromMessage?: string) => {

Copilot · 2025-11-13T23:33:19Z

+					const args = params.args?.map((arg: any) => {
+						if (arg.type === 'string') {
+							return arg.value;
+						}
+						if (arg.type === 'object') {
+							// For objects, try to extract a readable representation
+							if (arg.preview?.description) {
+								return arg.preview.description;
+							}
+							return JSON.stringify(arg, null, 2);
+						}
+						if (arg.value !== undefined) {
+							return arg.value;
+						}
+						return JSON.stringify(arg, null, 2);
+					}) ?? [];


Multiple any types used (arg: any, frame: any) reduce type safety. Consider defining proper interfaces for the Chrome DevTools Protocol message structure (e.g., RemoteObject, CallFrame) to improve code maintainability.

Copilot · 2025-11-13T23:33:19Z

 			if (activeBrowserType) {
 				try {
 					await this._browserElementsService.startDebugSession(cts.token, activeBrowserType);
+


There's an extra blank line after the startDebugSession call. Remove this blank line to maintain consistency with the codebase style.

Suggested change

Justin Chen (justschen) added 2 commits November 13, 2025 15:14

log console errors from simple browser

368dae8

some cleanup and icon changes

e94686d

Copilot AI review requested due to automatic review settings November 13, 2025 23:21

Copilot started reviewing on behalf of Justin Chen (justschen) November 13, 2025 23:22 View session

vs-code-engineering Bot assigned Justin Chen (justschen) Nov 13, 2025

vs-code-engineering Bot added this to the November 2025 milestone Nov 13, 2025

remove some copilot comments and unnecessary stuffs

b5f289e

Copilot finished reviewing on behalf of Justin Chen (justschen) November 13, 2025 23:26

Copilot AI reviewed Nov 13, 2025

View reviewed changes

Justin Chen (justschen) marked this pull request as draft November 13, 2025 23:39

Justin Chen (justschen) and others added 3 commits November 13, 2025 16:44

Merge branch 'main' into justin/pachirisu

d9ed743

Merge branch 'main' into justin/pachirisu

647c523

address some comments

4f6e6c7

Justin Chen (justschen) modified the milestones: November 2025, Backlog Dec 3, 2025

Navigation Menu

Uh oh!

simple browser: console logs to chat - #277293

simple browser: console logs to chat#277293
Justin Chen (justschen) wants to merge 6 commits into
microsoft:mainfrom
justschen:justin/pachirisu

Justin Chen (justschen) commented Nov 13, 2025 •

edited

Loading

Uh oh!

vs-code-engineering Bot commented Nov 13, 2025 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Nov 13, 2025

Uh oh!

Copilot AI Nov 13, 2025

Uh oh!

Copilot AI Nov 13, 2025

Uh oh!

Copilot AI Nov 13, 2025

Uh oh!

Copilot AI Nov 13, 2025

Uh oh!

Copilot AI Nov 13, 2025

Uh oh!

Copilot AI Nov 13, 2025

Uh oh!

Copilot AI Nov 13, 2025

Uh oh!

Copilot AI Nov 13, 2025

Uh oh!

Copilot AI Nov 13, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

	return await this.simpleBrowser.getConsoleLogs();
	return this.simpleBrowser.getConsoleLogs();

	const attachLogs = this._showStore.add(new Button(mainContent, { supportIcons: true, title: localize('chat.attachLogs', "Attach Logs") }));
	const attachLogs = this._showStore.add(new Button(mainContent, { ...defaultButtonStyles, supportIcons: true, title: localize('chat.attachLogs', "Attach Logs") }));

-		const onMessage = (event: any, method: string, params: any, sessionIdFromMessage?: string) => {
+		/**
+		 * Types for debugger protocol messages
+		 */
+		interface ConsoleAPICalledParams {
+			args?: Array<{
+				type: string;
+				value?: unknown;
+				preview?: {
+					description?: string;
+				};
+			}>;
+			type: string;
+		}
+		interface ExceptionThrownParams {
+			exceptionDetails?: {
+				text?: string;
+				exception?: {
+					description?: string;
+				};
+			};
+		}
+		interface LogEntryAddedParams {
+			level: string;
+			text: string;
+		}
+		type DebuggerParams = ConsoleAPICalledParams | ExceptionThrownParams | LogEntryAddedParams;
+		const onMessage = (event: unknown, method: string, params: DebuggerParams, sessionIdFromMessage?: string) => {

Uh oh!

Conversation

Justin Chen (justschen) commented Nov 13, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

vs-code-engineering Bot commented Nov 13, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📬 CODENOTIFY

Johannes Rieken (@jrieken)

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Key Changes

Reviewed Changes

Uh oh!

Copilot AI Nov 13, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Nov 13, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Nov 13, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Nov 13, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Nov 13, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Nov 13, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Nov 13, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Nov 13, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Nov 13, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Nov 13, 2025

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Justin Chen (justschen) commented Nov 13, 2025 •

edited

Loading

vs-code-engineering Bot commented Nov 13, 2025 •

edited

Loading