How a VS Code Debugger Actually Works: DAP, CDP, and a C# Debug Adapter

Описание и применение

Дебаггер VS Code использует протокол DAP, а Chrome – CDP. Автор создал C#‑адаптер, который переводит команды, управляет состоянием и обеспечивает корректное установление брейкпоинтов до загрузки страницы, а также отображает стек и переменные в редакторе.

Задача

Developers need a seamless debugging experience in VS Code when debugging JavaScript running in Chrome, but the editor and browser speak different protocols (DAP and CDP).

Результат

The adapter enables reliable debugging of JavaScript in Chrome from VS Code by translating protocols, managing breakpoint timing, and mapping runtime objects to editor concepts.

Рабочий процесс

• Configure launch.json for CloudIDEaaS debugger
• Press F5 to start debugging
• VS Code starts the C# debug adapter
• Adapter connects to Chrome via CDP WebSocket
• Adapter enables Page, Runtime, Debugger domains
• Adapter signals VS Code ready
• VS Code sends breakpoint configuration
• Adapter installs breakpoints in Chrome
• Adapter navigates Chrome to target URL
• Execution pauses at breakpoint
• Adapter translates Debugger.paused to DAP stopped event
• VS Code requests stack trace, scopes, variables
• Adapter maps Chrome frames/objects to DAP concepts
• VS Code evaluates expressions via adapter

Доказательства

Visual Studio Code speaks the Debug Adapter Protocol (DAP). Chrome speaks the Chrome DevTools Protocol (CDP).

Источник

The adapter translates those requests into the appropriate Chrome DevTools Protocol commands—and translate Chrome's responses and events back into something Visual Studio Code understands.

Источник

Chrome initially launches without navigating to the application. The adapter connects to Chrome, enables the required CDP debugging domains, and tells VS Code that the debugger is ready.

Источник