Skip to content

DevTools: debug hook, CDP server, and inspecting a TUI from Chrome #9

Description

@brainkim

A web inspector for terminal apps. This is uniquely doable here because the app is a real DOM — the live tree with real nodes, attributes, and computed styles that every inspector needs already exists.

Three layers, smallest first:

1. A debug hook. A callback passed at construction that emits structured events (resize, frame, input, commit), plus a way to dump the renderer's current state as text. No I/O in the library; the caller decides what to do with the events. This is the thing every debugging session this week rebuilt by hand.

2. A Chrome DevTools Protocol server. A WebSocket endpoint speaking CDP, so you open chrome://inspect and attach to your CLI:

  • The DOM panel maps to the real document — inspect and live-edit the running terminal app.
  • Computed and matched styles map to the cascade.
  • Hovering a node in DevTools highlights its cells in the terminal.
  • Screenshot returns the rendered buffer as an image or transcript.

3. A terminal-rendered inspector. The same event stream consumed by a second TermDOM app in another pane: element tree, styles panel, event log — inspecting a TUI from a TUI.

There are already seeds in the codebase: the inspect helpers, and the transport interface that lets a session run over any connection.

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions