AstroSpect

Overview:

AstroSpect (Astro Inspection) is a Chrome Developer Tool Extension designed to enhance the process of inspecting and debugging Astro websites. It offers a tree diagram view of all elements on a page, including static HTML files and Astro Islands. Developers can efficiently navigate through elements, view component information, and debug their projects with ease.

Features:

• Tree Diagram View: Display all elements on a page in a tree diagram format.
• Islands Only Tab: View only Astro Islands, including information about components.
• Expand and Collapse: Options to easily open and close tree nodes.
• Search Function: Quickly navigate through elements using the search feature.
• Compatibility: Works with Astro, React, Sass, TypeScript, and Webpack.

Installation:

To install AstroSpect:

1. Option 1 - Download as a Chrome Extension:
   • Visit the Chrome Web Store and search for AstroSpect to download.
2. Option 2 - Manual Installation:
   • Clone or fork the repository and add it as a Chrome extension manually.

Summary:

AstroSpect is a valuable tool for developers working on Astro websites, offering a streamlined approach to inspecting and debugging their projects. With features like tree diagram view, component details display, and search functionality, developers can enhance their workflow efficiency. By integrating with other frameworks like React, Preact, Svelte, Vue, Solid, and Lit, AstroSpect provides insightful insights into the architecture of Astro websites. Through easy installation and user-friendly interface, AstroSpect aims to simplify the development process for web developers.