Penpot DevTools

Why it's ranked here

This is focused internal tooling with unusually direct access to live Penpot state. Its console, expandable state browser, and debug switches cover practical diagnosis tasks. The narrow URL allowlist and documented connection failures make it less useful as a general extension.

What's good

The state explorer resolves expanded items on demand and reports loading or error states. Console commands retain navigable history and surface both results and failures. Requests use identifiers, promises, and timeouts, while queued messages protect communication before the panel or page bridge becomes available.

Tradeoffs

The extension only runs against the documented local development address and hosted design environment. Its panel can disconnect from the page context, requiring a frame reload. Messages cross several browser contexts, and the documentation says they may need repeated forwarding. Console evaluation also depends on a globally exposed Penpot evaluator.

How to use it well

It suits Penpot contributors debugging application state, ClojureScript behavior, or runtime debug flags inside Chrome DevTools. Load it as an unpacked extension, rebuild after panel interface changes, and refresh after extension script changes. It does not replace general browser debugging or support arbitrary Penpot deployments.

Observed

Primary language

JavaScript, with Vue single-file components referenced by the application entry point

Interface

Chrome DevTools extension panel with a ClojureScript console, state inspector, and debug option controls

Installation surface

Loaded as an unpacked Chrome extension from the repository folder

Package management

Private ES module package managed with pnpm

Runtime requirement

Node.js 20.11 or newer for the development and build toolchain

Target scope

Restricted to localhost port 3449 and design.penpot.dev

Testing structure

Vitest tests are colocated with the console, state, status, and options stores