プロジェクト IDX はベータ版です。ベータ版のプロダクトや機能では、サポートが制限されることがあります。また、ベータ版のプロダクトや機能の変更は、以前のバージョンと互換性がない可能性があります。

このページは Cloud Translation API によって翻訳されました。

アプリをプレビューする

Project IDX では、プロジェクト ID のライブビューをレンダリングして、コードエディタと一緒に確認できますIDX のウェブプレビューではアプリのウェブサーバーのインラインフレーム（iFrame）とクラウドベースの Android デバイスダウンロードします。

プレビュー環境を有効にして構成する

ワークスペースでアプリをプレビューするには、プレビューを構成する必要がありますできます。

.idx/dev.nix 構成ファイルでプレビューを有効にします。IDX 新しいワークスペースを作成すると、このファイルがプレビュー環境が自動的に表示されます。選択します。ファイルが IDX コードリポジトリにない場合は、作成します。セット idx.previews 属性を true に追加し、次のように構成属性を追加します。次の例をご覧ください。

{ pkgs, ... }: {

  # NOTE: This is an excerpt of a complete Nix configuration example.
  # For more information about the dev.nix file in IDX, see
  # https://developers.google.com/idx/guides/customize-idx-env

  # Enable previews and customize configuration
  idx.previews = {
    enable = true;
    previews = {
      # The following object sets web previews
      web = {
        command = [
          "npm"
          "run"
          "start"
          "--"
          "--port"
          "$PORT"
          "--host"
          "0.0.0.0"
          "--disable-host-check"
        ];
        manager = "web";
      };
      # The following object sets Android previews
      # Note that this is supported only on FLutter workspaces
      android = {
        manager = "flutter";
      };
    };
  };
}

IDX の Nix 属性の完全なリストについては、以下をご覧ください。 Nix + IDX。

環境を再構築します。
- コマンドパレットから [Project IDX: Hard restart] コマンドを実行します。（Cmd+Shift+P/Ctrl+Shift+P）。
- [Environment config updated] から [Rebuild environment] をクリックします。通知を受け取ります。
dev.nix ファイルの変更後に環境を再構築すると、ワークスペースに [Android] と [ウェブ] のプレビューパネルが表示されます。有効にしている設定によります。ただし、環境が再構築されるまでしばらく時間がかかる場合があります。試すワークスペースを閉じてから IDX ダッシュボード:

で確認できます。

アプリのプレビューを使用する

IDX が Chrome および Android エミュレータでウェブプレビューを提供（Flutter ワークスペース）アプリがプレビュー環境にインストールされるので、完全にテストできます。ワークスペースから直接管理できます。

ウェブと Android のプレビューを更新

IDX は基盤となるフレームワークのホットリロード機能にフックします。（npm run start、flutter hot-reload など）を使って、開発ループです。このセクションでは、以下に役立つさまざまなタイプの再読み込みについて説明します。 IDX のデフォルトの動作がご使用の環境ではうまく機能しない場合のトラブルシューティングあります。

自動ホットリロード: ホットリロードは、保存します。ホットモジュール交換（HMR）と呼ばれることもあります。 [再読み込み] を選択すると、ページを再読み込みせずにアプリを更新できます（ウェブアプリの場合）。アプリの再起動や再インストール（エミュレータの場合）を行います。このアプローチは、アプリのライブ状態の維持に最適ですが、なります。
手動フル再読み込み: ページの更新（ウェブ用）と同等です。またはアプリの再起動（エミュレータの場合）が発生します。完全な再読み込みを使用して、リファクタリングなど、ソースコードの大幅な変更を分割する方法です。
手動ハードリスタート: このオプションを選択すると、Google Compute Engine の IDX のプレビューシステムは、IDX のプレビューシステムで呼び出します。

すべての再読み込みオプションは、プレビューツールバーまたはコマンドで使用できます。パレット（Mac では Cmd+Shift+P、ChromeOS、Windows では Ctrl+Shift+P、 Linux など）の ID を IDX カテゴリに入力します。

プレビューツールバーを使用する手順は次のとおりです。

再読み込みアイコンをクリックしてページを更新します。これにより、強制的にフル再読み込みが行われます。別の種類の更新を行うには、再読み込みアイコンの横にある矢印をクリックしてメニューを開きます。
メニューから必要な更新オプションを選択します[ホットリロード]、フル再読み込みまたは強制再起動を行います。

自動保存とホットリロードを構成する

デフォルトでは、入力を停止してから 1 秒後に作業内容が自動的に保存されますが、自動ホットリロードがトリガーされます。作業内容を IDX で保存したい場合は、自動保存の設定を変更します。自動保存をオフにすることもできます。

自動保存の設定

Project IDX を開きます。
設定アイコンをクリックします。[設定] ウィンドウが表示されます。
[Files: Auto Save] を検索し、フィールドが [ `afterDelay`。
[Files: Auto Save Delay] を検索します。[自動保存遅延] フィールド表示されます。
新しい自動保存の遅延間隔をミリ秒単位で入力します。作業内容の変更が、新しい自動保存に基づいて自動的に保存されるようになりました表示されます。

自動保存をオフにする

Project IDX を開きます。
設定アイコンをクリックします。[設定] ウィンドウが表示されます。
[Files: Auto Save] を探します。
プルダウンをクリックして [オフ] を選択します。自動保存モードになりました無効です。