AstroSpect

AstroSpect is a Chrome DevTools extension for inspecting websites built with Astro.

When inspecting a page, AstroSpect allows developers to display a tree diagram of all elements of an Astro webpage onto a panel.

The "All Elements" tab displays all static html elements as well as hydrated components known as Astro Islands. The "Islands Only" tab displays only Astro Islands.

When clicking on an Astro Island, a side-pane reveals information about the component such as its type, client directive, and props.

AstroSpect has an expand and collapse feature to open and close all tree nodes. It also has a search feature that navigates through searched elements for quicker access and debugging.