Browser extension that allows you to inspect a Preact component hierarchy, including props and state.

⚠️ Requires Preact >=10.1.0 ⚠️

Firstly, we need to 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";

Then, download the Preact Devtools extension for your browser:

• Firefox
• Chrome
• Edge

• Use npm run dev to start a demo page
• Use npm run watch to rebuild all extensions on any code changes
• Use npm run build:firefox or npm run build:chrome to create a release build

Chrome:

1. Go to extensions page
2. Enable developer mode
3. Click "Load unpacked"
4. Select dist/chrome/ folder

Firefox:

1. Go to addons page
2. Click the settings icon
3. Select "Debug addons"
4. Click "Load temporary addon"
5. Select the manifest.json in dist/firefox/

preact-devtools supports an inline build target, where the devtools can be embedded into any page without any restrictions like rendering it into iframes. Don't forget to include the css file too.

import "preact-devtools/dist/preact-devtools.css";
import { attach, createRenderer, renderDevtools } from "preact-devtools";
import { options } from "preact";

// Instantiate devtools backend and attach it to preact
// - store -> The backing store for the devtools
// - destroy -> unlisten and restore previous `preact.options`
const { store, destroy } = attach(options, createRenderer);

// Render the actual devtools into the specified DOM node
renderDevtools(store, document.getElementById("devtools"));