Module

server.devtools

Chirp DevTools (⌁⌁) — debug overlay for development mode.

The app injects a single script tag on full-page responses. The script itself is served from an internal route and is idempotent, so it can be included on multiple navigations without duplicating listeners or toast containers.

The overlay monitors HTMX requests, SSE connections, View Transitions, render plans, layout chains, route metadata, DOM diffs, and provides an element inspector.

Shortcuts: Ctrl+Shift+D toggles the drawer; Ctrl+Shift+K toggles the inspector. SetlocalStorage key chirp-debug-verbose to 1to log boot to console.

Features (v3):

  • Rosettes syntax highlighting: Highlighted response previews, curl commands, and DOM diffs via/__chirp/debug/highlightendpoint (GET, base64 code).
  • SSE monitor: EventSource connection lifecycle and event log.
  • Network waterfall: Inline bars for request timing phases.
  • View Transition tracking: Hooksdocument.startViewTransitionlifecycle.
  • DOM diff: Before/after swap snapshots with unified diff view.
  • Render plan inspector: DecodesX-Chirp-Render-Planheader into detail panel.

The JavaScript is split into modules underdevtools/js/and concatenated at import time into a single IIFE. No build step required.

3Functions

Functions

highlight_code 2 str ▼
Highlight code via Rosettes if available, else return HTML-escaped ````.
def highlight_code(code: str, language: str) -> str
Parameters
Name Type Description
code str
language str
Returns
str
handle_highlight_request 1 str ▼
Handle GET /__chirp/debug/highlight — returns JSON ``{"html": "..."}``.
def handle_highlight_request(query_params: Mapping[str, str]) -> str
Parameters
Name Type Description
query_params Mapping[str, str]
Returns
str
_load_devtools_js 0 str ▼
Concatenate JS modules into a single IIFE.
def _load_devtools_js() -> str
Returns
str