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.
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 atrybutidx.previews
dotrue
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
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.
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:
- 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.
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
- Otwórz Project IDX.
- Kliknij ikonę Ustawienia. Pojawi się okno Ustawienia.
- Wyszukaj Pliki: automatyczne zapisywanie i upewnij się, że pole jest ustawione na „afterDelay”.
- Wyszukaj Pliki: opóźnienie automatycznego zapisywania. Pole Opóźnienie automatycznego zapisu
- 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
- Otwórz Project IDX.
- Kliknij ikonę Ustawienia. Pojawi się okno Ustawienia.
- Wyszukaj Pliki: automatyczne zapisywanie.
- Kliknij menu i wybierz Wyłącz. Automatyczne zapisywanie jest teraz wyłączono.