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] を探します。
- プルダウンをクリックして [オフ] を選択します。自動保存モードになりました 無効です。