preact-devtools

• Fix only first hooks shown if multiple listeners to options._hook were present (#279, thanks @marvinhagemeister)
• Use pagehide instead of unload (#277, thanks @marvinhagemeister)

Maintenance

• Upgrade web-ext (#276, thanks @andrewiggins)
• Bump ini from 1.3.5 to 1.3.7 (#274, thanks @dependabot)

• Fix Firefox description (#273, thanks @rschristian)
• Show usage info in the disabled popup (#272, thanks @danieldiekmeier)

Maintenance

• Upgrade dependencies (#271, thanks @marvinhagemeister)
• Remove changeset bot (#269, thanks @marvinhagemeister)

Better Suspense integration

This release contains a much improved integration for the Suspense component. The sidebar contains a new button when a node or a parent is a Suspense component and clicking it will suspend the sub-tree.

Key displayed in sidebar

The sidebar will now show the full key of the selected element.

HOC-Component filtering (Preview)

In code bases that make extensive use of the HOC-Component pattern, the elements panel could become overly noisy. Inspired by other devtools extension, we've added a filter that flattens HOC-Components. It's not enabled by default yet, because there are some last remaining bugs to shake out. You can give it a go by checking "Experimental Filters" in the Settings panel.

Minor Changes

• 92d7801 #255 Thanks @marvinhagemeister! - Add support for filtering HOC-Components

Patch Changes

• #259 Thanks @bz2! - Add .editorconfig to match prettier config.

• #250 Thanks @bz2! - Fix TypeError dom is null in updateHighlight.

• #258 Thanks @bz2! - Refine types on vnode utility functions.

• #267 Thanks @marvinhagemeister! - Fix Fragments not being filtered with Preact versions other than the devtools was built with.

• 8f361f3 #265 Thanks @bz2 and @marvinhagemeister! - Fix Suspense nodes not being detected.

• d1581c7 #253 Thanks @marvinhagemeister! - Elements panel: Fix key value hard to read in light theme

• 3fb4d2a #252 Thanks @marvinhagemeister! - Display Component key in the sidebar

• 72b7964 #257 Thanks @marvinhagemeister! - Fix horizontal sidebar scroll on low depth elements

• 6e79d7b #266 Thanks @marvinhagemeister! - Add support for suspending Suspense components

• 53b3e20 #261 Thanks @marvinhagemeister! - Upgrade dependencies

• aac0914 #262 Thanks @marvinhagemeister! - Remove vendored "hook" Preact version

• f292f4c #247 Thanks @marvinhagemeister! - Save component filters in browser settings and restore them upon opening the devtools panel

• 081c8e3 #243 Thanks @marvinhagemeister! - Fix inconsistent wrong size in name input

• 5489540 #244 Thanks @marvinhagemeister! - Use more robust Text node checks

• 6e5ebba #238 Thanks @marvinhagemeister! - Align font-sizes with native browser devtools and fix component name "pushing" sidebar layout.

• 74e7edc #242 Thanks @marvinhagemeister! - Improve Tree view performance by using virtualization. This way the Tree view stays smooth, regardless of how many components are rendered of the page. This was tested with 7.000 components in a real world app.

• Add new "Statistics" tab to collect renderer statistics (#230, thanks @marvinhagemeister)

• Fix error on highlighting text node with "Highlight Updates" (#226, thanks @marvinhagemeister)

I think it's time to finally make the 1.0.0 release. From all feedback that I got over Slack, Twitter and GitHub it's very stable and many users are happily using it in production. Looking at the feature set it includes everything I originally had envisioned when starting down this path, so the 1.0.0 number is long overdue!

Bug Fixes:

• Change default connection message to be more clear (#223, thanks @marvinhagemeister)
• Fix undefined component with prefresh (#222, thanks @marvinhagemeister)
• Fix options._hook arguments not forwarded (#221, thanks @marvinhagemeister)
• Improve Commit-Timeline display (#219, thanks @marvinhagemeister)
• Fix incorrect highlight offset with margins (#218, thanks @marvinhagemeister)

Maintenance:

• Upgrade all dependencies (#220, thanks @marvinhagemeister)
• Fix actions workflow not updating version (#214, thanks @marvinhagemeister)

This release is packed with features!

Highlight updates

The star of the show is the "highlight updates" option in the settings page, which when enabled will visualize updates via on overlay on top of the page.

Full support for iframes

This release ships with full support for debugging Preact apps that live inside iframes. Extra care was done to make the integration with codesandbox seamless 🎉

Lots of UX improvements

Hovering a node in the Profiler will highlight it in the DOM if it is still present.

• "View Source" button in the sidebar to jump to a component definition in the browser debugger 💯
• "View DOM node" button to inspect the DOM node with the native "Elements" panel ⚡
• Selection from the browser's "Elements" tab is synced to Preact Devtools 🎉

Features

• Add support for view source (#210, thanks @marvinhagemeister)
• Add proper support for debugging iframes (#209, thanks @marvinhagemeister)
• Sync selection (#206, thanks @marvinhagemeister)
• Add support for highlight updates (#202, #204, #205, #208, thanks @marvinhagemeister)
• Profiler: Highlight nodes in DOM if present (#199, thanks @marvinhagemeister)

Bug Fixes

• Fix Profiler nodes getting lost due to mutations (#200, thanks @marvinhagemeister)

Maintenance

• Sidebar cleanup (#211, thanks @marvinhagemeister)
• Restructure settings page (#203, #212 thanks @marvinhagemeister)
• Modernize e2e tests (#201, thanks @marvinhagemeister)
• Action docs (#198, thanks @marvinhagemeister)

This release completes the Profiler rewrite. The flamegraph can now display memoized trees and displays timings in a lot more polished way 🎉

• Fix symbol values not supported (#196, thanks @marvinhagemeister)
• Make debug views toggle-able via setting (#195, thanks @marvinhagemeister)
• Profiler: Add support for displaying memoized children (#194, thanks @marvinhagemeister)
• Debug panels (#192, thanks @marvinhagemeister)
• Profiler refactor Part 2 (#191, thanks @marvinhagemeister)
• Fix trying to set popup on closed tab (#189, thanks @marvinhagemeister)

This release contains no new features and all time was spent on polishing the existing ones and a bit of housekeeping. Most notably the Profiler will be a lot faster on weak GPUs (like the one in my Dell XPS 13 laptop).

• Profiler refactor Part 1 (#187, thanks @marvinhagemeister)
• Add support for custom persistent user profiles (#186, thanks @marvinhagemeister)
• Fix report bug link not working (#185, thanks @andrewiggins)
• Work around chrome monospace bug (#184, thanks @marvinhagemeister)
• Only show selftime in ranked Flamegraph (#183, thanks @marvinhagemeister)
• Fix lint-staged config + update pentf (#182, thanks @marvinhagemeister)
• Make flame graph animations less demanding on GPU (#180, thanks @marvinhagemeister)
• Refactor DataInput (#179, thanks @marvinhagemeister)
• Make generated bundles easier to review (#178, thanks @marvinhagemeister)
• Profiler: Mark unrelated nodes visually (#177, thanks @marvinhagemeister)
• Fix window resize event never triggered (#176, thanks @marvinhagemeister)

This release hardens the recently introduced hooks inspection and fixes several edge cases. Apart from that it's now possible to properly debug Preact applications that are rendered inside an iframe. The highlight overlay will adapt to the iframe's position accordingly 🎉

Despite this being mostly a maintenance release, there is one new feature: "Reload and profile". This allows to capture the very first render of any application and inspect the render performance!

Features:

• Sync (only user) selection Profiler -> Elements (#174, thanks @marvinhagemeister)
• Add support for reload and profile (#172, thanks @marvinhagemeister)

Bug Fixes:

• Fix wrong highlight position if rendered in iframe (#171, thanks @marvinhagemeister)
• Fix hooks parsing error when value is shortened (#167, thanks @marvinhagemeister)
• Fix possible exception in hooks parsing code (#166, thanks @marvinhagemeister)
• Fix tree item not scrolling into view in search (#165, thanks @marvinhagemeister)

Maintenance:

• Always enable no-console linting rule (#173, thanks @marvinhagemeister)
• Make e2e tests more resilient (#170, thanks @marvinhagemeister)
• Upgrade all dependencies (#163, thanks @marvinhagemeister)

This release finally brings support for hooks inspection to preact devtools! It allows you to fully debug all hooks of a component, including custom ones. This is big for me as it took me a few tries to get it right. If you find any issues with it, please reach out!

Apart from that there have been some minor visual changes to improve readability.

Features

• Make complex hook values collapsable (#160, thanks @marvinhagemeister)
• Use better color hierarchy in sidebar (#159, thanks @marvinhagemeister)
• Minor design improvements (#158, thanks @marvinhagemeister)
• Add support for hooks (#143, thanks @marvinhagemeister)
• Limit key length display (#154, thanks @marvinhagemeister)

Maintenance

• Extract parsing logic from sidebar components (#156, thanks @marvinhagemeister)
• Refactor SidebarPanel empty message handling (#155, thanks @marvinhagemeister)

This release improves a lot of little UX interactions and contains a lot of house cleaning in preparation for hooks inspection.

We couldn't resist adding a major feature too as it turned out to be easier to implement than initially assumed. The profiler is now able to inspect why a node rendered! The full support for this feature required a change in Preact. But don't worry we'll cut a new release over there in the coming days!

Features

• Profiler: Display why a node rendered (#138, thanks @marvinhagemeister)

Bug Fixes

• Fix elements only clickable on text (#150, thanks @marvinhagemeister)
• Fix toggle alignment (#149, thanks @AlexMunoz)
• Fix highlight stuck on scroll (#147, thanks @marvinhagemeister)
• Fix only first DOM element highlighted on Fragments (#146, thanks @marvinhagemeister)
• Minor wording change (#142, thanks @marvinhagemeister)
• Fix undefined display in input (#139, thanks @marvinhagemeister)
• Improve contrast on component name (#135, thanks @marvinhagemeister)
• Fix invisible undefined prop value in preview (#134, thanks @marvinhagemeister)
• Make design more consistent across browsers (#133, thanks @marvinhagemeister)

Maintenance

• Minor props parser refactoring (#145, thanks @marvinhagemeister)
• Enhance test for multiple property changes (#140, thanks @marvinhagemeister)
• Only delete relevant files in build commands (#137, thanks @marvinhagemeister)
• Add eslint config (#136, thanks @marvinhagemeister)
• Upgrade all dependencies (#132, thanks @marvinhagemeister)

This release brings a few new features and many usability improvements. Thanks to everyone who reported bugs and helped make preact-devtools even more awesome!

Screenshot of collected user timings in the native Performance-Tab:

Features

• Add support for User Timing API (#129, thanks @marvinhagemeister)
• Improve value preview (#125, thanks @marvinhagemeister)
• Add firefox run command (#123, thanks @marvinhagemeister)
• Add support for context displayName (#119, thanks @marvinhagemeister)
• Only display nodes of the current commit in ranked view (#115, thanks @marvinhagemeister)

Bug Fixes

• Fix sidebar collapsing on user input (#128, thanks @marvinhagemeister)
• Add collapse test (#127, thanks @marvinhagemeister)
• Revert to use purple as element color (#126, thanks @marvinhagemeister)
• Maintenance (#124, thanks @marvinhagemeister)
• Fix updates mutating existing vnode properties (#121, thanks @marvinhagemeister)
• Remove debug logs from e2e tests (#120, thanks @marvinhagemeister)
• Fix objects wrongly detected as vnodes (#117, thanks @marvinhagemeister)
• Minor design improvements (#113, thanks @marvinhagemeister)
• Fix mixed font size in props panel (#112, thanks @marvinhagemeister)

With the introduction of a proper end-to-end (e2e) testing framework, we managed to quickly find and fix many bugs related to the element picker or highlighting of nodes on the inspected page 🎉

The extension is pretty stable by now and we expect to cut a proper 1.0.0 release in the not so distant future.

• Minor design tweaks to element search input (#109, thanks @marvinhagemeister)
• Refactor inspection to be less error prone (#108, thanks @marvinhagemeister)
• Fix inspect highlight not working on preactjs.com (#107, thanks @marvinhagemeister)
• E2E test framework improvements (#106, thanks @marvinhagemeister)
• Fix incorrect padding in filter dropdown (#105, thanks @marvinhagemeister)
• Add test case for multiple roots (#103, thanks @marvinhagemeister)
• Fix inspect picker not working anymore (#102, thanks @marvinhagemeister)
• Fix highlight flickering (#101, thanks @marvinhagemeister)
• Add proper end to end test setup (#100, thanks @marvinhagemeister)
• Minor design improvements (#99, thanks @marvinhagemeister)
• Port examples to htm (#98, thanks @marvinhagemeister)

With this release the whole message passing between the extension and the page was rewritten from scratch. It's more robust now and rebuilds state whenever they are re-opened on the same page.

The filters also received a nice upgrade with an improved UX 🎉

• Fix filters not working (#95, thanks @marvinhagemeister)
• Fix devtools losing state when re-opening them (#94, thanks @marvinhagemeister)
• Renderer refactor (#93, thanks @marvinhagemeister)
• Add preact/devtools to usage section in README (#92, thanks @marvinhagemeister)
• Refactor extension connection handling (#90, thanks @marvinhagemeister)
• Upgrade dependencies (#89, thanks @marvinhagemeister)

• Only inject devtools CSS when Preact was detected (#87, thanks @marvinhagemeister)
• Fix race condition when injecting devtools hook (#86, thanks @marvinhagemeister)

• Fix infinite loop on circular references in props (#80, thanks @marvinhagemeister)
• Add default font (#81, thanks @marvinhagemeister)

• Fix wrong reordering offset (#71, thanks @marvinhagemeister)
• Fix inspect context not serializing functions (#70, thanks @marvinhagemeister)