Inside VS Code’s New JavaScript Debugger: Architecture, DAP, and Breakpoint Mechanics

Debugging is a core part of software development, and VS Code’s JavaScript Debugger, introduced in version 1.47, replaces older Node Debug and Chrome Debugger extensions with a unified solution that supports all JavaScript scenarios, offering rich debugging capabilities, a new Debug Terminal, profiling, and improved breakpoint and source mapping.

The debugger is built on the Debug Adapter Protocol (DAP), which abstracts the interaction between the IDE and various debuggers, allowing multiple tools to share adapters. The DAP implementation enables the debugger to handle requests such as initializing, setting breakpoints, and configuring the debugging session.

Key debugging functionalities are implemented in adapter/debugAdapter.ts and related files. Breakpoint handling is performed in adapter/breakpoints.ts, where the debugger abstracts breakpoint requests and translates them into Chrome DevTools Protocol (CDP) commands, ensuring consistent behavior across Node, Chrome, Edge, and other environments.

The JavaScript Debug Terminal allows scripts to be run directly from the terminal without needing explicit debug configurations. It injects NODE_OPTIONS to load a bootloader that establishes IPC communication with the debugger, enabling seamless CDP connections even for terminal‑executed scripts.

Automatic browser debugging is achieved by registering terminal link handlers that detect URLs and automatically attach the appropriate debugger (Edge or Chrome) based on configuration settings.

Profiling support leverages DAP messages to enable the CDP Profiler domain, allowing developers to capture performance data and view reports within VS Code or via the dedicated profiling extension.

The Debug Console now supports top‑level await by rewriting expressions into async IIFEs and marking them with awaitPromise=true, ensuring correct evaluation across different runtimes.

Overall, the article provides a source‑level walkthrough of the debugger’s design, illustrating how DAP, CDP, and various adapter layers work together to deliver a unified JavaScript debugging experience, and notes that OpenSumi 2.18 has already integrated these features.