試験的なChrome DevToolsワークスペース

Type: boolean
Default: false

追加： astro@5.13.0

Astro開発サーバー向けの試験的なChrome DevToolsワークスペース統合を有効にします。

この機能により、Chrome DevToolsで直接ファイルを編集し、接続されたワークスペースフォルダーを通じてローカルファイルシステムに変更を反映させることができます。ブラウザのタブを離れることなくCSSの値を調整するなどの編集に役立ちます。

この機能を有効にすると、astro devの実行時にプロジェクト用のChrome DevToolsワークスペースが自動的に設定されます。プロジェクトは接続可能なワークスペースソースとして表示されるようになります。その後、「Sources」パネルで行った変更はプロジェクトのソースコードに自動的に保存されます。

この機能を有効にするには、Astroの設定に試験的フラグchromeDevtoolsWorkspaceを追加します。

astro.config.mjs

import { defineConfig } from 'astro/config';

export default defineConfig({
  experimental: {
    chromeDevtoolsWorkspace: true,
  },
});

プロジェクトへの接続

AstroはChrome DevToolsワークスペースをサポートするために必要な設定ファイルを作成します。ただし、ファイルの保存を有効にするには、プロジェクトをソースとして接続する必要があります。

1. パッケージマネージャーに対応したCLIコマンドでAstroのdevサーバーを起動します。

2. Chromeでサイトプレビュー（例：http://localhost:4321/）を開き、DevToolsを起動します。

3. Sources > WorkspacesタブにAstroプロジェクトフォルダーが表示されます。Connectをクリックしてディレクトリをワークスペースとして追加します。

詳細についてはChrome DevToolsワークスペースのドキュメントをご参照ください。