Podgląd aplikacji

Project IDX umożliwia wyświetlenie podglądu efektów Twojej pracy przez wyrenderowanie widoku na żywo do Twojej aplikacji i edytora kodu. Podglądy stron IDX renderują wbudowana ramka (iFrame) serwera WWW aplikacji i Androida w chmurze za pomocą emulatora.

Włączanie i konfigurowanie środowiska podglądu

Aby wyświetlić podgląd aplikacji w obszarze roboczym, musisz skonfigurować podgląd dla środowiska.

1. Włącz podgląd w pliku konfiguracji .idx/dev.nix. IDX automatycznie generuje ten plik po utworzeniu nowego obszaru roboczego. zawiera odpowiednie środowiska podglądu na podstawie wybranego szablonu wybierz opcję. Jeśli pliku nie ma w repozytorium kodu IDX, utwórz go. Ustaw atrybut idx.previews do true i dodać atrybuty konfiguracji takie jak Oto przykład:

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

   Pełną listę atrybutów Nix w IDX znajdziesz tutaj Nix + IDX

2. Odbuduj środowisko:

   • Uruchom polecenie Project IDX: Hard restart (Projekt IDX: twardy restart) z palety poleceń. (Cmd+Shift+P/Ctrl+Shift+P).
   • W sekcji Zaktualizowana konfiguracja środowiska kliknij Odbuduj środowisko. powiadomienia.

   Gdy ponownie kompilujesz środowisko po wprowadzeniu zmian w pliku dev.nix, w obszarze roboczym pojawi się panel podglądu z Androidem i Internetem. w zależności od tego, co zostało włączone. Odbudowanie środowiska może jednak trochę potrwać. Wypróbuj zamknięcie obszaru roboczego i ponowne otwarcie go Panel IDX.

.

Ważne: możesz zobaczyć podgląd aplikacji na osobnej karcie przeglądarki, klikając ikonę Otwórz w nowym oknie na pasku narzędzi w oknie podglądu. Ten link w wyskakującym okienku to mogą być również przydatne do zaprezentowania pracy znajomym lub współpracownikom przez udostępnianie obszaru roboczego.

Korzystanie z podglądów aplikacji

IDX oferuje podglądy internetowe w emulatorach Chrome i Androida (w obszarach roboczych Flutter) które instalują aplikację w środowisku podglądu, dzięki czemu można ją w pełni przetestować od początku do końca, bezpośrednio w obszarze roboczym.

Odświeżaj podgląd w przeglądarce i na urządzeniach z Androidem

IDX łączy w sobie funkcje ponownego wczytywania z pamięci podręcznej na podstawie bazowych platform. (np. npm run start i flutter hot-reload), które zapewnią Ci wewnętrzny w pętli programistycznej. W tej sekcji omawiamy różne typy doładowań, rozwiąż problemy, jeśli domyślne zachowanie w IDX nie będzie dla Ciebie odpowiednie tych kwestii.

• Automatyczne odświeżanie z pamięci: ponowne załadowanie z pamięci jest wykonywane automatycznie, gdy zapisać plik. Czasami nazywany też Hot Module Replacement (HMR). odświeża aplikację bez ponownego wczytywania strony (w przypadku aplikacji internetowych) lub bez ponowne uruchomienie lub ponowne zainstalowanie aplikacji (w przypadku emulatorów). To podejście doskonale nadaje się do zachowania aktywnej aplikacji, ale czasem może zamierzone.

• Ręczne pełne ponowne wczytanie: ta opcja jest odpowiednikiem odświeżania strony (w przypadku witryn aplikacje) lub ponowne uruchomienie aplikacji (w przypadku emulatorów). Zalecamy ponowne załadowanie strony, przechwytywać istotne zmiany w kodzie źródłowym, np. podczas refaktoryzacji; z dużymi fragmentami kodu.

• Ręczne trwałe ponowne uruchomienie: ta opcja powoduje całkowite ponowne uruchomienie urządzenia system podglądu IDX, który obejmuje zatrzymanie i ponowne uruchomienie serwera WWW.

Wszystkie opcje ponownego ładowania są dostępne za pomocą paska narzędzi podglądu lub polecenia paleta (Cmd+Shift+P na Macu lub Ctrl+Shift+P w ChromeOS, Windows lub Linux) w kategorii IDX.

Aby użyć paska narzędzi podglądu, wykonaj te czynności:

1. Kliknij ikonę załaduj ponownie, aby odświeżyć stronę. Wymusza to ponowne załadowanie strony. W przypadku innego typu odświeżania kliknij strzałkę obok ikony ponownego ładowania, aby rozwiń menu.

2. Wybierz w menu opcję odświeżania, którą chcesz odświeżać: Gorące ponowne załadowanie, Pełne. Załaduj ponownie lub Wyłącz i ponownie uruchom.

   

Skonfiguruj automatyczne zapisywanie i ponowne wczytywanie „na gorąco”

Domyślnie IDX automatycznie zapisuje efekty Twojej pracy po 1 sekundzie po tym, jak przestaniesz pisać. uruchamiając automatyczne wczytywanie z pamięci. Jeśli chcesz, aby system IDX zapisywał Twoją pracę w zmienić ustawienie automatycznego zapisywania. Możesz też wyłączyć automatyczne zapisywanie.

Skonfiguruj automatyczne zapisywanie

1. Otwórz Project IDX.
2. Kliknij ikonę Ustawienia. Pojawi się okno Ustawienia.
3. Wyszukaj Pliki: automatyczne zapisywanie i upewnij się, że pole jest ustawione na „afterDelay”.
4. Wyszukaj Pliki: opóźnienie automatycznego zapisywania. Pole Opóźnienie automatycznego zapisu
5. Wpisz nowy interwał opóźnienia automatycznego zapisywania wyrażony w milisekundach. Zmiany w Twojej pracy są teraz zapisywane automatycznie w ramach nowego automatycznego zapisywania ustawienia opóźnienia.

Wyłącz automatyczne zapisywanie

1. Otwórz Project IDX.
2. Kliknij ikonę Ustawienia. Pojawi się okno Ustawienia.
3. Wyszukaj Pliki: automatyczne zapisywanie.
4. Kliknij menu i wybierz Wyłącz. Automatyczne zapisywanie jest teraz wyłączono.