Prévisualiser votre application

Project IDX vous permet de prévisualiser votre travail en affichant une vue en direct de à côté de votre éditeur de code. Les aperçus Web IDX affichent Cadre intégré (iFrame) du serveur Web de l'application et d'une application dans le cloud émulateur d'application.

Activer et configurer votre environnement d'aperçu

Pour prévisualiser votre application dans votre espace de travail, vous devez configurer votre aperçu environnement.

  1. Activez les aperçus dans votre fichier de configuration .idx/dev.nix. IDX génère automatiquement ce fichier lorsque vous créez un espace de travail inclut tous les environnements d'aperçu applicables en fonction du modèle que vous sélectionner. Si le fichier ne se trouve pas dans votre dépôt de code IDX, créez-le. Définir l'attribut idx.previews à true et ajoutez des attributs de configuration, comme l'exemple suivant montre:

    { 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";
      };
    };
  };
}

    Pour obtenir la liste complète des attributs Nix dans IDX, voir Nix + IDX

  2. Recréez votre environnement:

    • Exécutez la commande Project IDX : Hard restart (Projet IDX : redémarrage matériel) à partir de la palette de commandes. (Cmd+Maj+P/Ctrl+Maj+P).
    • Cliquez sur Recompiler l'environnement dans la section Configuration de l'environnement mise à jour. .

    Lorsque vous recréez l'environnement après avoir modifié votre fichier dev.nix, un panneau d'aperçu Android et Web s'affiche dans votre espace de travail. en fonction des options activées. Cependant, vous devrez peut-être attendre un certain temps pour que l'environnement se recompile. Essayer en fermant l'espace de travail, puis en le rouvrant Tableau de bord IDX

Utiliser les aperçus d'application

IDX propose des aperçus Web sur les émulateurs Chrome et Android (sur les espaces de travail Flutter) qui installent votre application dans l'environnement d'aperçu, afin de pouvoir la tester complètement, de bout en bout, directement depuis votre espace de travail.

Actualiser les aperçus pour le Web et Android

IDX se connecte aux fonctionnalités de hot reload des frameworks sous-jacents (comme npm run start et flutter hot-reload) pour vous donner dans la boucle de développement. Cette section présente les différents types d'actualisations résoudre les problèmes si le comportement par défaut sur IDX ne convient pas à votre utilisation .

  • Actualisation à chaud automatique: un hot reload est automatique enregistrer un fichier. Parfois appelé Hot Module Replace (ou HMR), un système de chauffage actualiser met à jour votre application sans recharger la page (pour les applications Web) ou sans redémarrer ou réinstaller l'application (pour les émulateurs). Cette approche est Elles sont idéales pour conserver l'état actuel de votre application, mais elles peuvent parfois ne pas fonctionner prévu.

  • Actualisation complète manuelle: cette option équivaut à actualiser la page (dans le cas du applications) ou le redémarrage de l'application (pour les émulateurs). Nous vous recommandons d'effectuer une actualisation complète Capturez les modifications importantes apportées au code source, par exemple lors de la refactorisation de grands blocs de code.

  • Manual Hard Restart (Redémarrage manuel) : cette option permet de redémarrer complètement le le système de prévisualisation d'IDX, qui implique d'arrêter et de redémarrer le serveur Web de votre application.

Toutes les options d'actualisation sont disponibles à l'aide de la barre d'outils d'aperçu ou de la commande (Cmd+Maj+P sur Mac ou Ctrl+Maj+P sur ChromeOS, Windows ou Linux), dans la catégorie IDX.

Pour utiliser la barre d'outils d'aperçu, procédez comme suit:

  1. Cliquez sur l'icône Actualiser pour actualiser la page. Cela force une actualisation complète. Pour un autre type d'actualisation, cliquez sur la flèche située à côté de l'icône d'actualisation pour développer le menu.

  2. Sélectionnez l'option d'actualisation souhaitée dans le menu: Actualisation à chaud, Complet Actualisez ou Redémarrez.

    La barre d'outils d'aperçu se trouve en haut du panneau d'aperçu

Configurer l'enregistrement automatique et le hot reload

Par défaut, IDX enregistre automatiquement votre travail une seconde après avoir arrêté de saisir du texte, pour déclencher des actualisations à chaud automatiques. Si vous voulez que IDX enregistre votre travail à un un intervalle différent, modifiez le paramètre d'enregistrement automatique. Vous pouvez également désactiver l'enregistrement automatique.

Configurer l'enregistrement automatique

  1. Ouvrez Project IDX.
  2. Cliquez sur l'icône Paramètres. La fenêtre "Paramètres" s'affiche.
  3. Recherchez Files: Auto Save (Fichiers : enregistrement automatique) et vérifiez que le champ est défini sur "afterDelay".
  4. Recherchez Files: Auto Save Delay (Fichiers : délai d'enregistrement automatique). Le champ "Délai d'enregistrement automatique" s'affiche.
  5. Saisissez un nouvel intervalle de délai d'enregistrement automatique, exprimé en millisecondes. Les modifications apportées à votre travail sont désormais automatiquement enregistrées selon le nouvel enregistrement automatique le paramètre de délai.

Désactiver l'enregistrement automatique

  1. Ouvrez Project IDX.
  2. Cliquez sur l'icône Paramètres. La fenêtre "Paramètres" s'affiche.
  3. Recherchez Files: Auto Save (Fichiers : enregistrement automatique).
  4. Cliquez sur le menu déroulant, puis sélectionnez Désactiver. L'enregistrement automatique est désormais est désactivé.