agent-browser is the recommended backend on Fedora and Rocky. It is useful
for driving a page through login flows, clicks, forms, and navigation.
css-view can then attach to that same browser session and capture computed
CSS from the page state the agent already reached.
When agent-browser is on PATH, this is the default backend:
bun run bin/css-view.ts "http://127.0.0.1:${PORT}/index.html" \
--props color,font-size,background-color,display \
--wait-until load \
--pretty
To make the backend and session explicit:
bun run bin/css-view.ts "http://127.0.0.1:${PORT}/index.html" \
--backend agent-browser \
--agent-browser-session css-view \
--props color,font-size,background-color,display \
--wait-until load \
--pretty
To snapshot the active page without navigation:
bun run bin/css-view.ts \
--backend agent-browser \
--agent-browser-session css-view \
--use-current-page \
--pretty
For lower-level workflows, use agent-browser get cdp-url to obtain the CDP
endpoint and pass it directly:
agent-browser --session css-view open "http://127.0.0.1:${PORT}/index.html"
CDP_URL="$(agent-browser --session css-view get cdp-url)"
bun run bin/css-view.ts "http://127.0.0.1:${PORT}/index.html" \
--mode cdp \
--cdp-url "$CDP_URL" \
--pretty
--cdp-url accepts browser-level CDP endpoints in these forms:
http://127.0.0.1:9222/https://browser-provider.example/sessionws://127.0.0.1:9222/devtools/browser/<id>wss://browser-provider.example/devtools/browser/<id>
When --cdp-url is present, css-view bypasses backend selection and uses
direct CDP mode with Chromium semantics. The positional <url> remains the
page to inspect. If an existing page in the CDP session already has that URL,
css-view snapshots it. Otherwise it uses an available page or creates one,
navigates it to the requested URL, waits for the requested lifecycle event, and
then captures the DOM snapshot.