AstroSpect is a Chrome DevTools extension for Astro developers.
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.
Latest reviews
- (2023-03-16) Zahara Aviv: Amazing! This Astro extension really helped me in a pinch when I needed to navigate a complex code base. Can't recommend it more.
- (2023-03-16) Caroline Kimball: As a developer new to working with Astro, this extension really helps me visualize the "islands". Loving this!