AstroSpect

Why developers love Astro

In 2022, Astro was voted the most-loved rendering framework by Javascript developers.

What makes Astro so lovable is that it uses an "islands" architecture, in which reactive UI components ("Astro Islands") exist within an otherwise static HTML page.

This means that Astro ships less JS to the browser, resulting in faster page loads than rival rendering frameworks like Next.js or Gatsby.

It also means that developers can use the front-end framework(s) of their choice (like React, Svelte, or Vue) to build their Astro Islands, giving developers the ability to draw on more established libraries to build their Astro website while still enjoying the speed of Astro's server-side rendering.

However, because Astro's islands architecture is so revolutionary, existing developer tools are unable to give Astro developers the information they want to build great websites.

In other words, what makes Astro so lovable — the fact that it ships only the necessary JS within a sea of static HTML — is the same thing that makes it incompatible with existing developer tools.

We built AstroSpect to solve this problem.

A lack of developer tools

Currently, there is no Chrome developer tool designed specifically for Astro. Worse yet, existing developer tools either obscure or leave out the information that developers need most.

Here's an example — let's say we're building an Astro website that has two Astro Islands: one containing a React component, the other, a Svelte component.

Now, suppose we want to know the props for each Astro Island as well as its client directive (i.e., when or how the component is rendered client-side).

How would we get this information in the browser?

We could inspect the page using Chrome DevTools' own Elements panel. Here's what that would look like:

Although this shows that there are Astro Island elements, there are two problems here.

First, there is no clear distinction between static HTML elements and Astro Islands. If we want to find the Astro Islands, we have to open the DOM tree or search for the 'astro-island' HTML tag.

Second, the information we want — like the props or client directive — is obscured within an unprocessed string within the element's attributes.

Next, since we're using React and Svelte to build our Astro Islands, we might try to use the React or Svelte developer tools. Here's what that would look like with React developer tools:

Notice that we get some information about the Astro Island built with React, like its props, but we get no information about its client directive. And we can't see this component within the context of the whole site.

So, Astro developers are forced to choose between two unsatisfying options: either hunt through the DOM tree and decipher unprocessed strings, or miss out on the context of their hydrated components within their application.

Enter AstroSpect

AstroSpect is a Chrome DevTools extension that enables developers to inspect websites built with Astro, giving you the information you need to build even faster.

It's easy to start using AstroSpect: download the extension from the Chrome Store, right-click and “inspect” the website, and navigate to the “AstroSpect” panel in Chrome DevTools.

Here are a few reasons why developers will love AstroSpect:

All Elements view

Click the "All Elements" tab to view the full DOM tree, with Astro Islands and their children visually distinguished:

Islands Only view

Click the "Islands Only" tab to isolate Astro Islands for inspection:

Side Pane

Click on an element in either view to display its details in the side pane:

• Type: States whether the element clicked is static HTML or an Astro Island
• Client Directive: Displays the client directive (e.g., 'load', 'idle', 'visible') for Astro Islands
• Props: Displays props for astro islands only. Nested props are displayed in a drop-down

Search function

Use the search bar to find what you need in either view:

You can also expand and collapse the full tree in either viewing mode.

AstroSpect is compatible with all Chromium browsers.

For more information, check out our GitHub or visit our website.