import RecipeLinks from "~/components/RecipeLinks.astro";

開発サーバーが実行されている間、Astroは各ページの下部付近にデベロッパーツールバーを表示します。

ツールバーには数々のデバッグや開発中のサイトを検査するツールが含まれています。また、これらのツールは拡張したり、Dev Toolbar APIを使用して自分のツールバーアプリを作成することも可能です。

このツールバーは標準で有効化され、かつページ下部にホバーした時に表示されます。開発者ツールは開発環境のみ有効化され、本番環境では表示されません。

標準搭載アプリ

Astro メニュー

Astroメニューアプリは現在のプロジェクトの様々な情報やリンクに簡単なアクセスを提供します。また、AstroメニューアプリはAstroのドキュメントやAstroのGithubのレポジトリー、そしてAstroのDiscordサーバーへのアクセスも提供します。 このアプリには、クリック時にastro infoコマンドを実行し、クリップボードに結果をコピーする「デバッグ情報をコピーする」ボタンもあります。この機能は問題を報告する場合などに役に立ちます。

Inspect（検査）

Inspectアプリはページ上のアイランドに関する情報を提供します。これらは各アイランドに渡されたプロパティやレンダーに使用されているクライアントディレクティブを表示することができます。

Audit（監査）

監査アプリは一般的なアクセシビリティやパフォーマンスの問題を確認し自動的に監査を実行します。問題が発見された場合は、ツールバーに赤い点が現れます。アプリをクリックすることで、監査の結果のリストを表示し、関連するページ上の要素をハイライトします。

:::note 基本的なパーフォーマンスやアクセシビリティの監査機能は人間やPa11y、そしてLighthouseの代替手段ではありません。

開発ツールバーは、異なるツールに切り替える必要なく、開発中の一般的な問題を迅速に発見する事を目的としています。 :::

設定

設定アプリは、ツールバーの位置や詳細ログの表示、通知の無効化などのデベロッパーツールバーの設定を変更します。

開発ツールバーを拡張する

Astroインテグレーションは、開発ツールバーにプロジェクトに特化した新しいアプリを追加することができます。Astroメニューを使用するか、インテグレーションディレクトリから追加することができます。

開発ツールバーのアプリは他のAstro インテグレーションと同様に、そのインストール手順に従ってインストールしてください。

<RecipeLinks slugs={["ja/recipes/making-toolbar-apps"]} />

開発ツールバーを無効化する

開発ツールバーは標準で全てのサイトで有効になっています。必要であればプロジェクト・ユーザーごとに無効化することもできます。

プロジェクトごとの無効化

開発ツールバーをプロジェクトで作業している全員のために無効化するには、Astro 設定ファイルにdevToolbar: falseを追加してください。

import { defineConfig } from "astro/config";export default defineConfig({  devToolbar: {    enabled: false  }})

開発ツールバーをもう一度有効化する場合は、これらの行を削除するか、 enabled:trueに設定を変更してください。

ユーザーごとの無効化

開発ツールバーを特定のプロジェクトで自分のみ無効化したい場合、astro preferencesコマンドを実行してください。

astro preferences disable devToolbar

開発ツールバーを全てのプロジェクトで自分のみ無効化したい場合、astro-preferencesコマンドに--globalフラグを追加してください。

astro preferences disable --global devToolbar

開発ツールバーは以下のコマンドで再び有効化できます。

astro preferences enable devToolbar