search

preactjs / preact-devtools

Browser extension for inspection Preact applications
https://preactjs.github.io/preact-devtools/
MIT License
310 stars 27 forks source link

Zoom to component #318

Open fkotsian opened 3 years ago

fkotsian commented 3 years ago

In the Preact panel in Chrome, it would be absolutely incredible if we could right click + inspect and zoom to the selected component, as does the Inspect function in Chrome's DOM tools

Use case: particular on large, new codebases, it really helps figure out which components we need to modify! (The alternative right now: scroll the Elements panel until you find something vaguely right that highlights, then inspect that - 😢 )

🙏 🙏 🙏

marvinhagemeister commented 3 years ago

Looks like something isn't working correctly maybe due to some changes in internal browser APIs that the extension relies upon. By default the extension should sync selection state between the native "Elements" panel and Preact's elements panel in both directions. If you select a DOM node in the native Elements panel the extension should automatically highlight the matching component and the other way round.

Need to check what broke here. That feature relies on some internal and undocumented browser APIs, maybe something changed there.

fkotsian commented 3 years ago

Indeed! Specifically, it would be super nice if we could right-click + "Inspect in Preact (or similar)" and trigger that zoom. I dunno if that's easier than fixing a persistent sync? I, for one, would find that much more useful for checking out component trees