Uygulamanızı önizleyin

Project IDX, projenizin canlı görünümünü oluşturarak çalışmanızı önizlemenizi sağlar uygulamanızı kod düzenleyicinizle birlikte kullanabilirsiniz. IDX web önizlemeleri uygulamanın web sunucusunun satır içi çerçevesi (iFrame) ve bulut tabanlı bir Android emülatörü kullanın.

Önizleme ortamınızı etkinleştirin ve yapılandırın.

Uygulamanızı çalışma alanınızda önizlemek için önizlemenizi yapılandırmanız gerekir bahsedeceğim.

  1. .idx/dev.nix yapılandırma dosyanızda önizlemeleri etkinleştirin. IDX yeni bir çalışma alanı oluşturduğunuzda ve oluşturduğunuz şablona bağlı olarak geçerli tüm önizleme ortamlarını içerir seç. Dosya, IDX kod deponuzda değilse dosyayı oluşturun. Ayarla true öğesine idx.previews özelliğini ekleyin ve yapılandırma özelliklerini ekleyin. aşağıdaki örnek gösterilmektedir:

    { 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'teki Nix özelliklerinin tam listesi için bkz. Nix + IDX

  2. Ortamınızı yeniden derleyin:

    • Komut paletinden Project IDX: Hard restart komutunu çalıştırın (Cmd+Üst Karakter+P/Ctrl+Üst Karakter+P).
    • Ortam yapılandırması güncellendi bölümünde Ortamı yeniden oluştur'u tıklayın bildirimi görürsünüz.

    dev.nix dosyanızı değiştirdikten sonra ortamı yeniden oluşturduğunuzda Önizleme paneli, çalışma alanınızda Android ve Web olarak görünür sekmeleri görürsünüz. Ancak ortamın yeniden oluşturulması için bir süre beklemeniz gerekebilir. Dene çalışma alanını kapatmak ve daha sonra, IDX kontrol paneli.

ziyaret edin.

Uygulama önizlemelerini kullanma

IDX, Chrome ve Android emülatörlerinde (flutter çalışma alanlarında) web önizlemeleri sunar uygulamanızı önizleme ortamına yükleyen kullanıcılardır. Böylece uygulamayı tam olarak test edebilirsiniz. uçtan uca ve doğrudan çalışma alanınızdan aktarabilirsiniz.

Web ve Android için önizlemeleri yenileme

IDX, temel çerçevelerin çalışır durumda yeniden yükleme işlevlerine bağlanır (ör. npm run start ve flutter hot-reload) iç rahatlığınızı gösterin döngüsünden bahsedeceğiz. Bu bölümde size yardımcı olmak için farklı yeniden yükleme türleri ele alınmaktadır IDX'teki varsayılan davranış, kullanımınız için iyi çalışmıyorsa sorunu giderin dava açın.

  • Otomatik Sıcak Yeniden Yükleme: Sıcak yeniden yükleme işlemleri, dosya kaydedebilirsiniz. Bazen Hot Modül Değişimi (veya HMR) olarak da bilinir, sayfayı yeniden yüklemeden uygulamanızı yeniden yükler (web uygulamaları için) Uygulamanın yeniden başlatılması veya yeniden yüklenmesi (emülatörler için). Bu yaklaşım uygulamanızın canlı durumunu korumak için idealdir ancak bazen amaçlanır.

  • Manuel Tam Yeniden Yükle: Bu seçenek, sayfa yenilemeye eşdeğerdir (web için uygulamaları) veya uygulamanın yeniden başlatılması (emülatörler için) için de geçerlidir. Yeniden yükleme işlemini tam olarak yeniden düzenleme gibi önemli değişiklikleri kaynak büyük kod parçalarından oluşur.

  • Manuel Donanım Yeniden Başlatma: Bu seçenek, cihazın tam olarak yeniden başlatılmasını ve yeniden başlatma gibi bazı işlemler için IDX'in uygulamanızın web sunucusu.

Tüm yeniden yükleme seçeneklerine önizleme araç çubuğu veya paleti (Mac'te Cmd+Üst Karakter+P veya ChromeOS, Windows'da Ctrl+Üst Karakter+P ya da) Linux) IDX kategorisinde yer alır.

Önizleme araç çubuğunu kullanmak için aşağıdaki adımları izleyin:

  1. Sayfayı yenilemek için yeniden yükle simgesini tıklayın. Bu durum, sayfayı tamamen yeniden yüklemeyi zorlar. Farklı bir yenileme türü için yeniden yükle simgesinin yanındaki oku tıklayarak menüyü genişletin.

  2. Menüden istediğiniz yenileme seçeneğini belirleyin: Sıkı Yeniden Yükle, Tam Yeniden yükleyin veya Tam Yeniden Başlatma.

    Önizleme araç çubuğu, önizleme panelinin üst kısmındadır

Otomatik kayıt ve çalışır durumda yeniden yüklemeyi yapılandırma

Varsayılan olarak IDX, yazmayı bıraktıktan bir saniye sonra çalışmanızı otomatik olarak kaydeder otomatik olarak çalışır durumda yeniden yüklemeleri tetikler. IDX'in çalışmanızı otomatik kayıt ayarını değiştirin. Otomatik kayıt özelliğini devre dışı da bırakabilirsiniz.

Otomatik kaydı yapılandır

  1. Project IDX'i açın.
  2. Ayarlar simgesini tıklayın. Ayarlar penceresi görünür.
  3. Dosyalar: Otomatik Kaydet'i arayın ve alanın şu şekilde ayarlandığını doğrulayın: "sonrası gecikme".
  4. Dosyalar: Otomatik Kaydetme Gecikmesi'ni arayın. Otomatik Kaydetme Gecikmesi alanı görünür.
  5. Milisaniye cinsinden ifade edilen yeni bir otomatik kayıt gecikmesi aralığı girin. Çalışmanızda yapılan değişiklikler artık yeni otomatik kayda göre otomatik olarak kaydediliyor gecikme ayarı.

Otomatik kaydı kapat

  1. Project IDX'i açın.
  2. Ayarlar simgesini tıklayın. Ayarlar penceresi görünür.
  3. Dosyalar: Otomatik Kaydet'i arayın.
  4. Açılır menüyü tıklayıp kapalı'yı seçin. Otomatik kayıt özelliği şimdi etkin devre dışı bırakıldı.