I Wanted to Press F5 and Debug JavaScript — So I Built My Own VS Code Debugger

Software development can become a cycle where convenient tools themselves turn into tasks. As a software developer, I encountered this issue while debugging JavaScript in the browser. I expected a simple process: set a breakpoint, press F5, and begin debugging my JavaScript code. However, the experience was complicated by issues such as development servers, browser launch configurations, debugger connections, ports, profiles, and the debugging environment itself.

This led to the question: could browser debugging regain its simplicity through convention over configuration? Thus, I created CloudIDEaaS JavaScript Debugger.

The primary goal of CloudIDEaaS is to enable developers to focus on debugging their applications instead of troubleshooting their debugging setup. For a straightforward JavaScript or HTML project, the ideal workflow would be: set a breakpoint, press F5, and start debugging. CloudIDEaaS manages the rest of the process, including starting the local web server, launching Chrome, establishing the debugging connection, configuring breakpoints, and loading the application. The key aspect is that you don't need to worry about most of these steps.

Inside VS Code, CloudIDEaaS offers key debugging features commonly used, including source and conditional breakpoints, stepping over, into, and out of code, continuing and pausing execution, inspecting local variables and objects, scopes and call stacks, expression evaluation, and configuring exception breakpoints. Additionally, it includes a built-in local web server and startup breakpoints.

Startup breakpoints allow the debugger to connect and configure breakpoints before loading the application, making it possible to catch JavaScript execution during startup.

Under the hood, CloudIDEaaS operates using two protocols: the Debug Adapter Protocol (DAP) and the Chrome DevTools Protocol (CDP). VS Code communicates with the CloudIDEaaS debug adapter using the DAP, while the adapter communicates with Chrome using the CDP over WebSockets. This setup allows CloudIDEaaS to translate debugging requests from VS Code into Chrome's debugging operations and vice versa.

Why did I create another JavaScript debugger when VS Code already has excellent JavaScript debugging capabilities and Chrome DevTools is powerful? The motivation behind CloudIDEaaS was workflow. There are numerous JavaScript projects where I don't want to set up a modern frontend toolchain just to debug code running in a browser.

This includes plain JavaScript applications, HTML/CSS/JavaScript projects, traditional web applications, legacy applications, educational projects, small prototypes, and experiments. For these projects, I desired debugging to resemble a traditional IDE experience: set a breakpoint, press F5, and debug.

CloudIDEaaS is designed with a principle of convention over configuration, aiming to simplify one common development task. Although it doesn't try to compete with Chrome DevTools or every large JavaScript debugging platform, it focuses on providing essential debugging features directly within Visual Studio Code. The project is free and open-source under the MIT license, actively developed, and welcomes feedback from developers working with straightforward JavaScript applications, traditional web projects, and older codebases.

If you try CloudIDEaaS, please share your experiences: the type of JavaScript project you're debugging, the most frustrating aspect of browser debugging, your expectations when pressing F5, and any debugging feature that would significantly improve your workflow.