vscode-extension-debugger

Debug and fix VS Code extension issues with structured workflows.

21|11|Updated Jul 4, 2025
One-click install
npx skills add https://github.com/s-hiraoku/vscode-sidebar-terminal --skill vscode-extension-debugger
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: vscode-extension-debugger
Source: https://github.com/s-hiraoku/vscode-sidebar-terminal/tree/main/.claude/skills/vscode-extension-debugger
Command: npx skills add https://github.com/s-hiraoku/vscode-sidebar-terminal --skill vscode-extension-debugger

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This skill provides a systematic approach to debugging and fixing complex issues in VS Code extensions, such as memory leaks, race conditions, and WebView communication failures. It streamlines the debugging process, helping developers quickly identify root causes and implement robust fixes, saving significant time and reducing frustration.

Core Features & Use Cases

  • Systematic Debugging Workflow: Guides through bug triage, root cause analysis, fix implementation, and verification.
  • Common Bug Patterns: Identifies and provides solutions for frequent issues like dispose handler problems, race conditions, and unhandled async errors.
  • Debugging Tools & Strategies: Leverages VS Code's built-in tools (Extension Host, DevTools) and logging best practices for effective investigation.
  • Use Case: Investigate a reported memory leak in a VS Code extension by using heap snapshot analysis, identifying unreleased event listeners, and implementing a DisposableStore pattern for proper resource management.

Quick Start

Use the vscode-extension-debugger skill to outline a debugging strategy for an extension that is experiencing unhandled promise rejections during activation.

Frequently Asked Questions about vscode-extension-debugger

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I debug memory leaks in VS Code extensions?

Debugging memory leaks in VS Code extensions involves using heap snapshot analysis through the Extension Host debugger to identify unreleased objects, then implementing the DisposableStore pattern to ensure proper resource cleanup and event listener disposal.

What causes race conditions in VS Code extensions and how do I fix them?

Race conditions occur when async operations complete out of order or interleave unexpectedly. Fix them by structuring async workflows sequentially, using proper error handling for promise rejections, and ensuring disposable lifecycle management prevents stale callbacks.

How do I troubleshoot WebView communication failures in VS Code extensions?

WebView communication failures stem from missing message handlers, timing issues, or improper serialization. Diagnose using DevTools logging, verify message routing between extension and WebView, and implement comprehensive error handling for bidirectional messages.

What's the best way to systematically debug a VS Code extension?

Systematic debugging follows structured triage: reproduce the issue, collect logs and heap snapshots, identify the root cause pattern (dispose handlers, async errors, event listeners), implement a targeted fix, and verify with regression testing.

Can I use VS Code's built-in tools to find extension activation problems?

Yes, the Extension Host debugger and DevTools reveal activation failures by tracking unhandled promise rejections, logging extension lifecycle events, and inspecting the activation context to pinpoint where initialization breaks.

Why does my VS Code extension crash and how do I trace it?

Runtime crashes result from unhandled errors, resource exhaustion, or inter-extension conflicts. Trace crashes by enabling Extension Host verbose logging, analyzing stack traces, capturing heap snapshots at failure, and testing isolation from other extensions.