Loading...
Loading...
This skill provides expert-level guidance for debugging and fixing bugs in VS Code extensions. Use when investigating runtime errors, fixing memory leaks, resolving WebView issues, debugging activation problems, fixing TypeScript type errors, or troubleshooting extension communication failures. Covers systematic debugging workflows, common bug patterns, root cause analysis, and prevention strategies.
npx skill4agent add s-hiraoku/vscode-sidebar-terminal vscode-extension-debugger| Category | Symptoms | Priority |
|---|---|---|
| Crash | Extension host crash, unhandled rejection | P0 |
| Memory Leak | Increasing memory usage over time | P0 |
| Data Loss | State not persisted, data corruption | P0 |
| Functionality | Feature not working as expected | P1 |
| Performance | Slow response, UI lag | P1 |
| UI/UX | Visual glitches, incorrect display | P2 |
// Add strategic logging for investigation
console.log('[DEBUG] State before operation:', JSON.stringify(state));
try {
await problematicOperation();
} catch (error) {
console.error('[DEBUG] Error details:', {
message: error.message,
stack: error.stack,
context: currentContext
});
throw error;
}// Bug: Missing dispose registration
const listener = vscode.workspace.onDidChangeConfiguration(...);
// listener never disposed!
// Fix: Always register disposables
context.subscriptions.push(
vscode.workspace.onDidChangeConfiguration(...)
);// Bug: Concurrent operations conflict
async function createTerminal() {
if (isCreating) return; // Insufficient guard
isCreating = true;
// ... creation logic
}
// Fix: Use atomic operation pattern
private creationPromise: Promise<void> | null = null;
async function createTerminal(): Promise<void> {
if (this.creationPromise) {
return this.creationPromise;
}
this.creationPromise = this.doCreateTerminal();
try {
await this.creationPromise;
} finally {
this.creationPromise = null;
}
}// Bug: Message sent before WebView ready
panel.webview.postMessage({ type: 'init', data });
// Fix: Wait for ready signal
panel.webview.onDidReceiveMessage(msg => {
if (msg.type === 'ready') {
panel.webview.postMessage({ type: 'init', data });
}
});// Bug: Assuming object exists
const terminal = this.terminals.get(id);
terminal.write(data); // Crash if undefined!
// Fix: Defensive access with early return
const terminal = this.terminals.get(id);
if (!terminal) {
console.warn(`Terminal ${id} not found`);
return;
}
terminal.write(data);// Bug: Unhandled promise rejection
someAsyncFunction(); // No await, no catch!
// Fix: Proper error handling
try {
await someAsyncFunction();
} catch (error) {
vscode.window.showErrorMessage(`Operation failed: ${error.message}`);
}async function processTerminal(id: number): Promise<void> {
// Early validation
if (id < 1 || id > MAX_TERMINALS) {
throw new Error(`Invalid terminal ID: ${id}`);
}
const terminal = this.getTerminal(id);
if (!terminal) {
console.warn(`Terminal ${id} not found, skipping`);
return;
}
// Safe to proceed
await terminal.process();
}async function safeOperation(): Promise<void> {
const resource = await acquireResource();
try {
await performOperation(resource);
} catch (error) {
await handleError(error);
throw error; // Re-throw after logging
} finally {
await releaseResource(resource); // Always cleanup
}
}async function operationWithTimeout<T>(
operation: Promise<T>,
timeoutMs: number
): Promise<T> {
const timeout = new Promise<never>((_, reject) =>
setTimeout(() => reject(new Error('Operation timed out')), timeoutMs)
);
return Promise.race([operation, timeout]);
}describe('Bug Fix: Terminal creation race condition', () => {
it('should handle concurrent creation requests', async () => {
const manager = new TerminalManager();
// Simulate concurrent requests
const results = await Promise.all([
manager.createTerminal(),
manager.createTerminal(),
manager.createTerminal()
]);
// Verify only expected terminals created
expect(manager.getTerminalCount()).toBe(expectedCount);
});
});// Add disposal tracking
class ResourceManager implements vscode.Disposable {
private disposables: vscode.Disposable[] = [];
private disposed = false;
register(disposable: vscode.Disposable): void {
if (this.disposed) {
disposable.dispose();
console.warn('Attempted to register after disposal');
return;
}
this.disposables.push(disposable);
}
dispose(): void {
if (this.disposed) return;
this.disposed = true;
// LIFO disposal order
while (this.disposables.length) {
const d = this.disposables.pop();
try {
d?.dispose();
} catch (e) {
console.error('Dispose error:', e);
}
}
}
}// Implement message queue for reliability
class MessageQueue {
private queue: Message[] = [];
private ready = false;
setReady(): void {
this.ready = true;
this.flush();
}
send(message: Message): void {
if (this.ready) {
this.webview.postMessage(message);
} else {
this.queue.push(message);
}
}
private flush(): void {
while (this.queue.length) {
this.webview.postMessage(this.queue.shift()!);
}
}
}export async function activate(context: vscode.ExtensionContext) {
console.log('[Extension] Activation started');
try {
// Initialize services
await initializeServices(context);
console.log('[Extension] Services initialized');
// Register commands
registerCommands(context);
console.log('[Extension] Commands registered');
console.log('[Extension] Activation complete');
} catch (error) {
console.error('[Extension] Activation failed:', error);
vscode.window.showErrorMessage(
`Extension activation failed: ${error.message}`
);
throw error;
}
}// Bug: Implicit any and unsafe access
function processData(data) {
return data.items.map(item => item.value);
}
// Fix: Explicit types and null safety
interface DataItem {
value: string;
}
interface Data {
items?: DataItem[];
}
function processData(data: Data): string[] {
return data.items?.map(item => item.value) ?? [];
}// Terminal State Debug Panel (Ctrl+Shift+D)
// Monitors: system state, terminal info, performance metrics// Structured logging with context
const logger = {
debug: (component: string, message: string, data?: object) => {
if (debugEnabled) {
console.log(`[${component}] ${message}`, data ?? '');
}
},
error: (component: string, message: string, error: Error) => {
console.error(`[${component}] ${message}:`, {
message: error.message,
stack: error.stack
});
}
};references/common-bugs.mdreferences/debugging-tools.mdreferences/fix-patterns.md