Understanding Browser and VS Code Web Debugging with the Chrome DevTools Protocol

The Douyin mini‑program developer tool provides a desktop IDE for building, debugging, previewing, and uploading mini‑apps. To explore breakpoint debugging beyond simple console logs, the author investigates the underlying communication between the page and DevTools using the Chrome DevTools Protocol (CDP).

Basic Knowledge – CDP

CDP is a JSON‑RPC based protocol that lets developers remotely control Chrome or compatible browsers, exposing domains such as DOM, CSS, Network, Console, Debugger, and Performance. It enables actions like setting breakpoints, stepping through code, and retrieving runtime information.

Browser Breakpoint Debugging

When a breakpoint is added in the Sources panel, DevTools sends CDP messages like Debugger.setBreakpointsActive , Debugger.setBreakpointByUrl , and Debugger.getPossibleBreakpoints . Pausing triggers Debugger.paused , and stepping sends Debugger.stepInto , Debugger.stepOut , or Debugger.resume . Removing a breakpoint uses Debugger.removeBreakpoint . The communication flow is illustrated with several diagrams.

Vscode Web Debugging Architecture

VS Code uses a Debug Adapter Protocol (DAP) to translate user actions into CDP messages. The .vscode/launch.json configures the target URL and port. When a user clicks “Step Into”, VS Code sends a DAP request, the extension converts it to a CDP call (e.g., Debugger.stepInto ), and the browser responds, updating the UI.

{
  "command": "stepInTo",
  "seq": 1,
  "type": "request",
  "arguments": { "threadId": 1 }
}

Source maps bridge the gap between original source files and compiled bundles, allowing breakpoints set in the editor to map to the correct runtime locations.

IDE Mini‑Program Debugging

By reusing the CDP‑based workflow, an IDE can capture DAP messages from its editor, translate them to CDP, and forward them to the mini‑program simulator, enabling breakpoint debugging directly from the IDE.

Conclusion

The article provides a comprehensive overview of front‑end debugging techniques, from basic console logs to sophisticated CDP‑driven breakpoint control, and demonstrates how VS Code and custom IDEs can leverage these mechanisms for efficient web development.