【Astroの開発ツールバー】機能と非表示にする方法

もし使うなら…便利だと感じた機能

私がこのツールバーをもし使うとしたら、特に便利だろうと感じたのは以下の機能です。

• Astro メニュー: プロジェクトの情報やドキュメントへのリンクがまとまっています。特に「デバッグ情報をコピーする」ボタンは、エラー報告時に環境情報を簡単に共有できて非常に役立ちそうです。
• Inspect（検査）: ページ上のコンポーネント（アイランド）に渡されているプロパティなどを確認できます。コンポーネントが期待通りに動作しないときの原因調査で重宝しそうです。
• Audit（監査）: アクセシビリティやパフォーマンスに関する基本的な問題を自動でチェックしてくれます。本格的な監査ツールの代わりにはなりませんが、開発の初期段階で簡単な見落としに気づけるのは良い点だと感じました。

開発ツールバーを無効化する手順（私の設定）

このように便利な機能がある一方で、やはり開発中はエディタに集中したいものです。ここでは、私が実際に行っている開発ツールバーを無効化する手順を紹介します。

1. 自分だけ無効化する方法（おすすめ）

他の開発者に影響を与えず、自分のローカル環境だけで無効化できるので、まずはこちらの方法が良いと思います。ターミナルで以下のコマンドを実行するだけです。

特定のプロジェクトだけで無効化する場合：

astro preferences disable devToolbar

もし、今後作成するすべてのAstroプロジェクトで無効化したい場合は、--global フラグを追加します。私はこちらを設定しています。

astro preferences disable --global devToolbar

2. プロジェクト全体で無効化する方法

チーム開発などで、プロジェクトに関わる全員の開発環境でツールバーを非表示にしたい場合は、設定ファイル astro.config.mjs を編集します。

import { defineConfig } from 'astro/config';

export default defineConfig({
  // 開発ツールバーを無効化
  devToolbar: {
    enabled: false,
  },
});

これで、プロジェクトメンバー全員の環境でツールバーが非表示になります。

まとめ

Astroの開発ツールバーは、デバッグや情報確認に役立つ機能が詰まったツールです。私は普段非表示にしていますが、特定の課題を解決したいときには、一時的に有効化コマンド (astro preferences enable devToolbar) を使ってその便利さを享受するのも良い使い方だと感じています。

開発ツールバーは開発環境でのみ表示され、本番環境に影響はありません。ご自身の開発スタイルに合わせて、表示・非表示をうまく使い分けるのが良いと思います。

私のように普段は非表示にしたい、でもどんな機能があるのか気になっていた、という方の参考になれば幸いです。