👨‍🚀

Astro Dev Toolbar Appを作った話

2024/03/03に公開

npm

Astro Dev Toolbar Appのastro-page-insightをリリースしました。

上記に詳細書いてありますが、Astro Dev Toolbarは、Astro4.0 で追加され、開発タスクのための機能を提供するために用意されたものです。

また、開発者向けのAPIが用意されており、自らToolbar 向けのアプリを作成することが可能です。

作成した動機

個人のサイトをAstroで作成していたときに、Astro Dev ToolbarのAuditというビルドインのAppを知り、それを使った際にLighthouseの結果も同じようにページ上にハイライト出来れば便利なのでは？と思い作成しました。

機能

現在下記の機能があります。

Lighthouse の結果からページ上の要素に関連するものに関して、要素をハイライトし表示
ハイライトされた要素上にホーバーすることで、詳細の表示
カテゴリでの監査結果の絞り込み
Lighthouse のスコアの表示
ハイライト要素の表示/非表示切り替え
Desktop/Mobileでの監査結果の切り替え

導入方法

Astroには、統合のセットアップを自動化するastro addコマンドがありそれを使って頂ければと思います。

詳しくは下記コマンドでインストールが可能です。(使用しているパッケージマネージャーによって異なります。)

$ pnpm astro add astro-page-insight
$ npx astro add astro-page-insight
$ yarn astro add astro-page-insight

また、下記オプションを設定することが可能です。

プロパティ	タイプ	デフォルト	説明
`lh.weight`	`number`	`0`	`weight`は監査時に使用するしきい値になります。
`lh.breakPoint`	`number`	`767`	`breakPoint`はモバイルかデスクトップかを判断するのに使われます。

オプションを設定した場合はこんな感じです。

astro.config.mts

import pageInsight from "astro-page-insight";

export default defineConfig({
  integrations: [
    pageInsight({
      lh: {
        weight: 0.5,
        breakPoint: 768,
      },
    }),
  ],
});

今後の展望

cache機能の追加
build時への対応
Lighthouseの結果以外にも、必要な情報の表示(OGP等)
fetchタイミングのoption化

良ければGitHubでスターやアイディア等々お願いします！

Astro Dev Toolbar とは？

作成した動機

機能

導入方法

今後の展望

Discussion