Browser extension for inspection Preact applications
MIT License
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";
// Or if you just want the devtools bridge (~240B) without other
// debug code (useful for production sites)
import "preact/devtools";
Then, download the Preact Devtools extension for your browser:
npm run dev
to start a demo pagenpm run watch
to rebuild all extensions on any code changesnpm run build:firefox
or npm run build:chrome
to create a release buildChrome:
dist/chrome/
folderFirefox:
manifest.json
in dist/firefox/
These commands will build the extension and load it into a browser with a temporary profile. The browser will automatically navigate to preactjs.com. There you can test the extension.
Chrome:
npm run run:chrome
Preact
tab in devtoolsFirefox:
npm run run:firefox
Preact
tab in devtools