$ show fcavallarin/wirebrowser
Wirebrowser is an Electron desktop application that provides an integrated runtime instrumentation platform for web applications, built entirely on the Chrome DevTools Protocol (CDP). In production, it acts as a unified debugger, memory inspector, network interceptor, and automation runner for JavaScript running in Chromium-based browsers. The application launches a headless or headful Chrome instance via Puppeteer-core, attaches CDP debuggers to multiple pages, and presents a rich GUI (React, Ant Design, Monaco Editor, AG Grid) through an Electron window. The architecture follows a modular event-driven design: core back-end modules (Heap, Debugger, Network, Automation) are loaded by a ModuleManager and communicate with the front-end via custom DOM events and Electron IPC. The debugger module implements a sophisticated hook system that injects user-defined JavaScript callbacks on function entry/leave/return without monkeypatching, using CDP breakpoints and a state machine to serialize asynchronous events. The heap module supports both live object search (via injected QueryObjects) and offline snapshot analysis with object similarity matching (Jaccard/Dice/SimHash) for origin tracing. Key data flows include user-defined automation scripts (Node-side or browser-side) that interact with pages through the WB.Node and WB.Browser APIs, network requests that can be intercepted and modified in real-time, and memory snapshots that are queried for structural matches across multiple snapshots (BDHS). External dependencies are heavy: Puppeteer (bundled Chrome), AG-Grid (community), Monaco Editor, Ant Design, lowdb, and several CDP-specific features that lock the tool to Chromium. The project is primarily targeted at security researchers, reverse engineers, and advanced frontend developers who need introspection beyond standard DevTools.
The LLM identified 4 files worth highlighting for reuse:
Implements a FIFO lock for CDP event handling, preventing race conditions in the debugger. The state machine transitions through 'idle', 'running', and 'error' states, queuing incoming events and processing them in order. This pattern is reusable in any system where asynchronous events must be serialized without blocking, and the implementation is self-contained with no internal module dependencies.
A hybrid structural similarity engine that combines Jaccard index, Dice coefficient, and SimHash to compare JavaScript objects by shape (property names, types, values). Designed for memory analysis, it can be extracted and reused in any context requiring object deduplication, change detection, or clustering. Configurable alpha and threshold parameters make it adaptable to different datasets.
Core hook engine that registers breakpoints at specific source locations and injects user callbacks (onEnter, onLeave, onReturnFollowed, onStep, at) into paused debugger contexts. Handles async continuation tracking via structural similarity of stack traces and temporal proximity heuristics. Also supports variable and return value overriding via eval. The pattern of serializing callbacks into CDP evaluateOnCallFrame is reusable for any runtime instrumentation tool that needs to inject hooks without monkeypatching.
A rich wrapper around Monaco Editor that adds search highlights, formatting, content widgets, and inline error decoration. It exposes a controlled React component that handles theme syncing, undo/redo, and resize. The component is decoupled from internal state and can be reused in any Electron or web project requiring a full-featured code editor with advanced decorations.