devtools - Chirp

server.devtools

module

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…

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. Browser-capable agents can callwindow.ChirpHtmxDebug.help()after loading a debug page to discover the machine-readable API.

Features (v3):

Rosettes syntax highlighting: Highlighted response previews, curl commands, and DOM diffs via/__chirp/debug/highlightendpoint (GET, base64 code).
SSE monitor: Native Chirp EventStream lifecycle traces 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.
Compiled transition evidence: Correlates bounded return traces with public-safe compiler edge descriptions and reports explicitly expected mode gaps.

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

server.devtools

Name	Type	Default	Description
`type`		—
`qualified_name`		—
`element_type`		—
`description`		—
`source_file`		—
`line_number`		—
`is_autodoc`		—
`autodoc_element`		—
`_autodoc_template`		—
`_autodoc_url_path`		—
`_autodoc_page_type`		—
`title`		—
`doc_content_hash`		—

Symbols on this page

function highlight_code

Highlight code via Rosettes if available, else return HTML-escaped<pre>.

function handle_highlight_request

Handle GET /__chirp/debug/highlight — returns JSON{"html": "..."}.

function _load_devtools_js

Concatenate JS modules into a single IIFE.

highlight_code

function

def highlight_code(code: str, language: str) -> str

Highlight code via Rosettes if available, else return HTML-escaped<pre>.

Parameters

Name	Type	Default	Description
`code`	`str`	—
`language`	`str`	—

handle_highlight_request

function

def handle_highlight_request(query_params: Mapping[str, str]) -> str

Handle GET /__chirp/debug/highlight — returns JSON{"html": "..."}.

Parameters

Name	Type	Default	Description
`query_params`	`Mapping[str, str]`	—

_load_devtools_js

function

def _load_devtools_js() -> str

Concatenate JS modules into a single IIFE.

No parameters.

View source · /home/runner/work/chirp/chirp/site/../src/chirp/server/devtools/__init__.py:1