CloudIDEaaS JavaScript Debugger — F5 Chrome Debugging with a C# DAP Adapter

[kenlnetherland]

I've been working on CloudIDEaaS JavaScript Debugger, an open-source VS Code extension built around a straightforward goal:

Set a breakpoint. Press F5. Debug JavaScript in Chrome.

The project grew out of wanting a more convention-over-configuration workflow for straightforward JavaScript and HTML projects.

⚡ The F5 Workflow

When you press F5, CloudIDEaaS can:

• 🌐 Start its built-in local web server
• 🚀 Launch Chrome
• 🔗 Establish the debugging connection
• 🔴 Configure breakpoints before the application loads
• ▶️ Load the application
• 👣 Provide step into, step over, step out, continue, and pause
• 🔍 Expose variables, scopes, objects, and call stacks
• 🧮 Evaluate expressions while execution is paused

Configuring the debugger before navigation also allows breakpoints to catch JavaScript that executes during application startup.

🧠 The Architecture

One of the more interesting aspects of the project is that the debug adapter itself is written in C#/.NET.

The architecture is essentially:

Visual Studio Code
        |
        | Debug Adapter Protocol (DAP)
        v
CloudIDEaaS C# Debug Adapter
        |
        | Chrome DevTools Protocol (CDP)
        | WebSocket
        v
      Chrome

The VS Code extension launches the C# debug adapter, which communicates with VS Code through DAP.

On the other side, the adapter translates debugging operations and events between DAP and Chrome's CDP interface.

Building that translation layer has been one of the most interesting parts of the project—particularly breakpoint resolution, stack frames, scopes, runtime object inspection, expression evaluation, and coordinating debugger initialization with browser navigation.

🎯 What I'm Trying to Build

I'm not trying to reproduce every capability of VS Code's built-in JavaScript debugger or Chrome DevTools.

The goal is deliberately narrower:

A lightweight F5 browser-debugging workflow with fewer moving pieces.

I'd especially appreciate feedback from other extension and debug-adapter developers about:

• DAP implementation choices
• DAP ↔ CDP translation
• Breakpoint lifecycle handling
• Debugger initialization and startup sequencing
• Features you'd consider essential in a lightweight browser debugger
• Things you would expect the extension to handle automatically

🆓 Free and Open Source

CloudIDEaaS JavaScript Debugger is free and open source under the MIT license.

🔧 Source code:
https://github.com/CloudIDEaaS/cloudideaas-vscode-debugger

🚀 Visual Studio Marketplace:
https://marketplace.visualstudio.com/items?itemName=CloudIDEaaS.cloudideaas-vscode-debugger

Feedback, criticism, bug reports, and contributions are welcome.