Why it's a strong pick

Preact Developer Tools shows the structure of your Preact app inside Chrome DevTools. It is open source under the MIT license, and its code is public on GitHub. It uses Manifest V3, Chrome's current extension format. Its latest release commit was on 28 September 2026.

What it does

The extension adds a panel where you can browse your Preact component tree and look at each component's props and state. It needs Preact 10.1.0 or higher. Chrome, Firefox and Edge versions exist.

Key features

Component tree. Browse the components on the page.
Props and state. Inspect what each component holds.
Production bridge. A devtools bridge of about 240 bytes is available for production builds.
Other browsers. Chrome, Firefox and Edge versions exist.
Open source. The code is public under MIT.

Who it's for

Preact Developer Tools is for developers who build with Preact. If your app uses another library, such as React, the panel has nothing to show.

What permissions does Preact Developer Tools ask for?

Its manifest asks for scripting and storage, and lists clipboardWrite as optional. It lists access to all sites, runs a content script on all pages as they start loading, and adds a DevTools page. We could not read the developer's privacy policy when we checked; read it before installing.

Which Preact versions does it need?

It needs Preact 10.1.0 or higher, according to the README. If your project is on an older release, upgrade Preact first, then add the setup the README describes, and reload the page. Check the README for the exact setup steps for your build tool.

Does my app need extra setup?

Yes. The app needs the Preact debug or devtools import before the panel can see it. Without that, the panel stays empty. The README describes a small devtools bridge for production builds. Add the import in development builds, then reload the page and open the Preact panel.

FAQ

Does it work with React? No. It is for Preact apps only.

Does it work outside Chrome? The README says Firefox and Edge versions exist.

Is it open source? Yes, under the MIT license.

Good to know

If the panel stays empty, check the app first. Without the debug or devtools import, nothing is sent to the panel. Also keep in mind that the extension lists access to all sites, so it is a tool for development machines.

Other developer tools to compare

Preact Developer Tools is one of 13 picks in our developer tools guide:

Redux DevTools: debug Redux state.
Apollo Client Devtools: inspect Apollo Client apps.
JSON Formatter: read JSON responses.
Lighthouse: audit a page.
React Developer Tools: inspect React components.
Vue.js devtools: inspect Vue 3 apps.
Requestly: Open-source HTTP interceptor: redirect URLs, modify headers and mock requests while you test.
Solid DevTools: debug SolidJS reactivity.
Ember Inspector: inspect Ember.js apps.
MobX Developer Tools: debug MobX apps.
Refined GitHub: Simplifies GitHub and adds 100+ small improvements for repos and pull requests. Works on GitHub.com only. Open source.
Header Editor: Rewrites request and response headers, redirects and blocks requests with rules you set. The Chrome build is the Lite version. Open source.