Huy's Notes
Preact and React Developer Tools

Preact and React Developer Tools

#reading #ui

TL;DR: If you're trying to make Preact works with the latest React Dev Tools, just give up. Use their own Dev Tools instead.


React Dev Tools is a browser extension that help us debug React application.

There are few people not using React directly in their project, but wrapped everything around a tiny React-like renderer called Preact (see [React inside a Backbone View]). Or they simply prefer Preact because of its lightweightness.

These people won't be able to use React Dev Tools to debug their (P)react components.

In around 2016, the Preact team mentioned that they were working on some solution to make Preact compatible with React Dev Tools. And they did shipped a solution.

Unfortunatelly, years later, React team then rebuilt the Dev Tools and changed many things, including the debugging protocol, and make it harder for the Preact team to continue making their framework compatible with the tool, so they focused on their own Dev Tools instead. (See State of Preact Devtools - @marvinhagemeist).

So, if you're looking for a way to use Preact with React Dev Tools, just don't, use their own Dev Tools instead.

Referred in


If you think this note resonated, be it positive or negative, please feel free to send me an email and we can talk.