Preact Devtools

Preact Devtools is a browser extension for Preact, a 3kB JavaScript library. It provides additional debugging tools like component hierarchy viewer.


Usage Instructions

Note: This extension needs Preact >=10.1.0 or newer.

Import preact/debug somewhere to initialize the connection to the extension. Make sure that this import is the first import in your whole app.

// Must be the first import
import "preact/debug";

// Or if you just want the devtools bridge (~240B) without other
// debug code (useful for production sites)
import "preact/devtools";

That's it! Now you should see a "Preact" tab in the devtools showing up.

Screenshots

The component tree inside Preact devtools extensions The dark theme