Writing into being.
When I looked at the webview code for Debug80, I found 2,866 lines of JavaScript embedded as template literals inside TypeScript files. I extracted them into proper TypeScript modules alongside HTML templates alongside CSS files. After adding esbuild bundling, the maintenance burden dropped considerably.
The Debug80 panel started as a full-sized webview that competed for screen space with the editor. I migrated it to VS Code's sidebar using the WebviewView API which keeps the panel visible without stealing focus then allows per-session filtering through the activity bar.
Debug80 regenerated its debug maps on every session start even when the underlying source had not changed. I added content-hash based caching to skip redundant work then tackled two quality-of-life improvements: auto-opening source files plus consolidating the memory panel.
The first step in building Debug80 was establishing a stable bridge between the VS Code Debug Adapter Protocol and the Z80 execution environment. This article explores the initial DAP implementation and the integration of the asm80 assembler.
Building a debugger means implementing the Debug Adapter Protocol. For Debug80, I chose an inline implementation to keep the connection between the interface and the machine model as tight as possible.
Debug80 integrates a JavaScript Z80 assembler with VS Code’s debugging infrastructure to create a coherent environment for building and observing Z80 programs.