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.

来源