Zadbaj o dobrą organizację dzięki kolekcji
Zapisuj i kategoryzuj treści zgodnie ze swoimi preferencjami.
Firebase Studio udostępnia kilka sposobów na wyświetlanie podglądu i testowanie aplikacji podczas jej tworzenia. Obejmuje to korzystanie z App Prototyping agentoraz wbudowanego podglądu w przeglądarce, a także podglądów w przeglądarce i na Androida dostępnych w obszarach roboczych Firebase Studio.
Włączanie i konfigurowanie środowiska podglądu
Jeśli używasz szablonu lub generujesz aplikację za pomocą App Prototyping agent, podglądy są często już skonfigurowane. Jeśli podglądy nie są jeszcze skonfigurowane w szablonie, możesz je skonfigurować w pliku konfiguracyjnym Nix projektu.
W obszarze roboczym otwórz .idx/dev.nix.
Firebase Studio automatycznie generuje ten plik podczas tworzenia nowego obszaru roboczego i zawiera on wszystkie odpowiednie środowiska podglądu na podstawie wybranego szablonu. Jeśli pliku nie ma w Firebase Studiorepozytorium kodu, utwórz go, a potem ustaw atrybut idx.previews na true. Następnie dodaj atrybuty konfiguracji, jak pokazano w tym przykładzie:
{ pkgs,...}:{# NOTE: This is an excerpt of a complete Nix configuration example.# For more information about the dev.nix file in Firebase Studio, see# https://firebase.google.com/docs/studio/customize-workspace# Enable previews and customize configuration
idx.previews={enable=true;previews={# The following object sets web previewsweb={command=["npm""run""start""--""--port""$PORT""--host""0.0.0.0""--disable-host-check"];manager="web";# Optionally, specify a directory that contains your web app# cwd = "app/client";};# The following object sets Android previews# Note that this is supported only on Flutter workspacesandroid={manager="flutter";};};};}
Pełną listę atrybutów Nix w Firebase Studio znajdziesz w artykule Nix +
Firebase Studio.
Odbuduj środowisko:
Na palecie poleceń (Cmd+Shift+P/Ctrl+Shift+P) uruchom polecenie Firebase Studio: Hard restart.
W powiadomieniu Zaktualizowano konfigurację środowiska kliknij Przebuduj środowisko.
Gdy po zmodyfikowaniu pliku dev.nix ponownie utworzysz środowisko, w obszarze roboczym pojawi się panel podglądu z kartami Android i Web lub z jedną z nich, w zależności od tego, co zostało włączone.
Korzystanie z podglądów aplikacji
Firebase Studio oferuje podgląd w internecie w emulatorach Chrome i Androida w przestrzeniach roboczych Fluttera, które instalują aplikację w środowisku podglądu. Dzięki temu możesz w pełni przetestować aplikację od początku do końca bezpośrednio w obszarze roboczym.
Odświeżanie podglądów w przypadku internetu i Androida
Firebase Studio korzysta z funkcji szybkiego przeładowania bazowych frameworków (takich jak npm run start i flutter hot-reload), aby zapewnić Ci usprawniony wewnętrzny cykl programowania. Firebase Studio oferuje następujące typy doładowań:
Automatyczne szybkie przeładowanie: szybkie przeładowanie jest wykonywane automatycznie po zapisaniu pliku. Czasami nazywa się to Hot Module Replacement (HMR). Szybkie przeładowanie aktualizuje aplikację bez ponownego wczytywania strony (w przypadku aplikacji internetowych) lub bez ponownego uruchamiania lub instalowania aplikacji (w przypadku emulatorów). To podejście jest przydatne do zachowania stanu aplikacji, ale nie zawsze działa zgodnie z oczekiwaniami.
Ręczne pełne ponowne wczytanie: ta opcja jest odpowiednikiem odświeżenia strony (w przypadku aplikacji internetowych) lub ponownego uruchomienia aplikacji (w przypadku emulatorów). Zalecamy używanie pełnego ponownego wczytywania, aby rejestrować istotne zmiany w kodzie źródłowym, np. podczas refaktoryzacji dużych fragmentów kodu.
Ręczne twarde ponowne uruchomienie: ta opcja powoduje całkowite ponowne uruchomienie systemu podglądu Firebase Studio, co obejmuje zatrzymanie i ponowne uruchomienie serwera WWW aplikacji.
Wszystkie opcje ponownego wczytywania są dostępne na pasku narzędzi podglądu lub na palecie poleceń (Cmd+Shift+P na Macu lub Ctrl+Shift+P na urządzeniach z ChromeOS, Windows lub Linux) w kategorii Firebase Studio.
Aby użyć paska narzędzi podglądu:
Aby odświeżyć stronę, kliknij ikonę Ponownie załaduj. Spowoduje to pełne ponowne załadowanie.
Aby wybrać inny typ odświeżania, kliknij strzałkę obok ikony ponownego ładowania, aby rozwinąć menu.
Wybierz w menu opcję odświeżania: Hot Reload, Full Reload lub Hard Restart.
Udostępnianie podglądu internetowego innym osobom
Możesz udostępnić podgląd internetowy aplikacji innym osobom, aby uzyskać od nich opinię. W tym celu włącz dostęp, a następnie udostępnij bezpośredni link do podglądu:
Na pasku narzędzi podglądu w przeglądarce kliknij ikonę Udostępnij link do podglądu po prawej stronie paska adresu, aby otworzyć menu udostępniania.
Zezwól innym użytkownikom na dostęp do Twojej przestrzeni roboczej, korzystając z jednej z tych opcji:
Udostępnij podgląd publicznie: udostępnij podgląd obszaru roboczego publicznie. Dzięki temu każdy użytkownik internetu może uzyskać dostęp do serwera podglądu działającego w Twoim obszarze roboczym dopóki obszar roboczy jest aktywny i dopóki nie wyłączysz dostępu publicznego.
Zarządzanie dostępem do obszaru roboczego Udostępniaj obszar roboczy tylko osobom, którym chcesz przyznać dostęp.
Kliknij Skopiuj URL podglądu, aby skopiować bezpośredni link do podglądu przestrzeni roboczej. Możesz go następnie wysłać do osób, od których chcesz uzyskać opinię. Możesz też użyć wyświetlanego kodu QR, aby otworzyć podgląd na urządzeniu mobilnym.
Konfigurowanie automatycznego zapisywania i szybkiego ponownego wczytywania
Domyślnie Firebase Studio automatycznie zapisuje Twoją pracę sekundę po tym, jak przestaniesz pisać, co powoduje automatyczne gorące przeładowania. Jeśli chcesz zapisywać pracę w innych odstępach czasu, zmień ustawienie automatycznego zapisywania.Firebase Studio Możesz też wyłączyć automatyczne zapisywanie.
Wpisz nowy interwał opóźnienia automatycznego zapisywania w milisekundach. Zmiany w Twojej pracy są teraz automatycznie zapisywane na podstawie nowego ustawienia opóźnienia automatycznego zapisywania.
[[["Łatwo zrozumieć","easyToUnderstand","thumb-up"],["Rozwiązało to mój problem","solvedMyProblem","thumb-up"],["Inne","otherUp","thumb-up"]],[["Brak potrzebnych mi informacji","missingTheInformationINeed","thumb-down"],["Zbyt skomplikowane / zbyt wiele czynności do wykonania","tooComplicatedTooManySteps","thumb-down"],["Nieaktualne treści","outOfDate","thumb-down"],["Problem z tłumaczeniem","translationIssue","thumb-down"],["Problem z przykładami/kodem","samplesCodeIssue","thumb-down"],["Inne","otherDown","thumb-down"]],["Ostatnia aktualizacja: 2025-07-25 UTC."],[],[],null,["Firebase Studio offers several ways to preview and test your\napplication during development. This includes using the App Prototyping agent\nand leveraging the built-in web previewer, and the web and Android\npreviewers available within Firebase Studio workspaces.\n\nEnable and configure your preview environment\n\nIf you use a [template](/docs/studio/get-started-template) or generate your app\nusing the App Prototyping agent, previews are\noften already configured for you. If previews aren't already set up in your\ntemplate, you can configure them in the project's Nix configuration file.\n\n1. From your workspace, open `.idx/dev.nix`.\n\n Firebase Studio automatically generates this file when you create a\n new workspace and includes any applicable preview environments based on\n the template you select. If the file isn't in your Firebase Studio\n code repository, create it and then set the `idx.previews` attribute to\n `true`. Then, add configuration attributes, as the following example shows: \n\n { pkgs, ... }: {\n\n # NOTE: This is an excerpt of a complete Nix configuration example.\n # For more information about the dev.nix file in Firebase Studio, see\n # https://firebase.google.com/docs/studio/customize-workspace\n\n # Enable previews and customize configuration\n idx.previews = {\n enable = true;\n previews = {\n # The following object sets web previews\n web = {\n command = [\n \"npm\"\n \"run\"\n \"start\"\n \"--\"\n \"--port\"\n \"$PORT\"\n \"--host\"\n \"0.0.0.0\"\n \"--disable-host-check\"\n ];\n manager = \"web\";\n # Optionally, specify a directory that contains your web app\n # cwd = \"app/client\";\n };\n # The following object sets Android previews\n # Note that this is supported only on Flutter workspaces\n android = {\n manager = \"flutter\";\n };\n };\n };\n }\n\n For a full list of Nix attributes in Firebase Studio, see [Nix +\n Firebase Studio](/docs/studio/customize-workspace#nix+fs).\n2. Rebuild your environment:\n\n - From the command palette (`Cmd+Shift+P`/`Ctrl+Shift+P`), run the **Firebase Studio: Hard restart** command.\n - From the **Environment config updated** notification, click **Rebuild environment**.\n\n When you rebuild the environment after modifying your `dev.nix` file,\n the preview panel appears in your workspace showing either or both of\n **Android** and **Web** tabs, depending on what you've enabled.\n\n| **Key Point:** You can preview your app in a separate browser tab by clicking the **Open in new window** icon in the preview window toolbar. This pop-out link is also useful for demoing your work in progress to a friend or colleague through [workspace sharing](/docs/studio/share-your-workspace). If you close a preview and want to re-open it, open the command palette and search for the appropriate preview command.\n\nUse app previews\n\nFirebase Studio offers web previews on Chrome and Android emulators in\nFlutter workspaces that install your app on the preview environment. This lets\nyou test your app fully, from end to end, directly from your workspace.\n\nRefresh previews for web and Android\n\nFirebase Studio hooks into the hot reload functionalities of the\nunderlying frameworks (like `npm run start` and `flutter hot-reload`) to\ngive you a streamlined inner development loop. Firebase Studio provides\nthe following types of reloads:\n\n- **Automatic Hot Reload** : Hot reloads are automatically performed when you\n save a file. Sometimes known as *Hot Module Replacement* (or HMR), a hot\n reload updates your app without reloading the page (for web apps) or without\n restarting or reinstalling the app (for emulators). This approach is\n useful for preserving your app's live state but might not always work as\n intended.\n\n- **Manual Full Reload**: This option is equivalent to a page refresh (for web\n apps) or an app restart (for emulators). We recommend using a full reload to\n capture significant changes to your source code, such as when refactoring\n large chunks of code.\n\n- **Manual Hard Restart** : This option performs a complete restart of\n Firebase Studio's preview system, which includes stopping and\n restarting your app's web server.\n\nAll reload options are available using either the preview toolbar or the command\npalette (`Cmd+Shift+P` on Mac or `Ctrl+Shift+P` on ChromeOS, Windows, or\nLinux), under the **Firebase Studio** category.\n\nTo use the preview toolbar, follow these steps:\n\n1. Click the **Reload** icon to refresh the page. This forces a full reload.\n For a different type of refresh, click the arrow next to the reload icon to\n expand the menu.\n\n2. Select the refresh option you want from the menu: **Hot Reload** , **Full\n Reload** , or **Hard Restart**.\n\nShare your web preview with others\n\nYou can share your app's web preview with others for feedback by enabling access\nand then sharing the direct link to the preview:\n\n1. In the web preview toolbar, click the\n **Share Preview Link** icon, to the right of the address bar to open\n the sharing menu.\n\n2. Allow others to access your workspace, using one of these options:\n\n - **Make preview public** : Make your workspace preview publicly\n accessible. This lets anyone on the Internet\n reach the preview server running on your workspace *while your workspace\n is active*, and until you turn off public access.\n\n - **Manage workspace access**. Share your workspace with just the people\n to which you want to give access.\n\n | **Warning:** Sharing your workspace lets other users make changes to your code and access other private information like authentication tokens saved on the workspace, so only share with those you trust. Learn more at [Share your workspace](/docs/studio/share-your-workspace).\n3. Select **Copy preview URL** to copy a direct link to the workspace preview,\n which you can then send to those you'd like to get feedback from. You can\n also use the QR code that appears to open your preview on your mobile\n device.\n\nConfigure autosave and hot reload\n\nBy default, Firebase Studio autosaves your work one second after you\nstop typing, triggering automatic hot reloads. If you want\nFirebase Studio to save your work at a different interval, change the\nautosave setting. You can also turn off autosave. \n\nConfigure autosave\n\n1. Open [Firebase Studio](https://studio.firebase.google.com/).\n2. Click the **Settings** icon.\n3. Search for **Files: Auto Save** and verify that the field is set to \\`afterDelay\\`.\n4. Search for **Files: Auto Save\n Delay**.\n5. Enter a new autosave delay interval, expressed in milliseconds. Changes to your work are now automatically saved based on the new autosave delay setting. \n\nTurn off autosave\n\n1. Open [Firebase Studio](/docs/studio/https/studio.firebase.google.com).\n2. Click the **Settings** icon.\n3. Search for **Files: Auto Save**.\n4. Click the drop-down and select **off**.\n\nPreview backend disconnected\n\nYou can safely disregard the \"Preview backend disconnected\" message.\n\nNext steps\n\n- [Publish with Firebase](/docs/studio/deploy-app).\n- [Monitor your app](/docs/studio/monitor)."]]
Udostępnij link do podglądu po prawej stronie paska adresu, aby otworzyć menu udostępniania.