Mit Sammlungen den Überblick behalten
Sie können Inhalte basierend auf Ihren Einstellungen speichern und kategorisieren.
Firebase Studio bietet verschiedene Möglichkeiten, Ihre Anwendung während der Entwicklung in der Vorschau anzusehen und zu testen. Dazu gehört die Verwendung von App Prototyping agent sowie der integrierten Web-Vorschau und der Web- und Android-Vorschau, die in Firebase Studio-Arbeitsbereichen verfügbar sind.
Vorabversion aktivieren und konfigurieren
Wenn Sie eine Vorlage verwenden oder Ihre App mit dem App Prototyping agent generieren, sind Vorschauen oft bereits für Sie konfiguriert. Wenn in Ihrer Vorlage noch keine Vorschauen eingerichtet sind, können Sie sie in der Nix-Konfigurationsdatei des Projekts konfigurieren.
Öffnen Sie in Ihrem Arbeitsbereich .idx/dev.nix.
Firebase Studio generiert diese Datei automatisch, wenn Sie einen neuen Arbeitsbereich erstellen. Sie enthält alle anwendbaren Vorschauumgebungen basierend auf der von Ihnen ausgewählten Vorlage. Wenn sich die Datei nicht in Ihrem Firebase Studio-Code-Repository befindet, erstellen Sie sie und legen Sie das Attribut idx.previews auf true fest. Fügen Sie dann Konfigurationsattribute hinzu, wie im folgenden Beispiel gezeigt:
{ 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";};};};}
Eine vollständige Liste der Nix-Attribute in Firebase Studio finden Sie unter Nix + Firebase Studio.
Umgebung neu erstellen:
Führen Sie in der Befehlspalette (Cmd+Shift+P/Ctrl+Shift+P) den Befehl Firebase Studio: Hard restart aus.
Klicken Sie in der Benachrichtigung Umgebungskonfiguration aktualisiert auf Umgebung neu erstellen.
Wenn Sie die Umgebung nach dem Ändern der Datei dev.nix neu erstellen, wird im Arbeitsbereich der Vorschaubereich mit den Tabs Android und/oder Web angezeigt, je nachdem, was Sie aktiviert haben.
App-Vorschauen verwenden
Firebase Studio bietet Webvorschauen in Chrome- und Android-Emulatoren in Flutter-Arbeitsbereichen, in denen Ihre App in der Vorschauumgebung installiert wird. So können Sie Ihre App direkt in Ihrem Arbeitsbereich vollständig testen.
Vorschauen für Web und Android aktualisieren
Firebase Studio nutzt die Hot-Reload-Funktionen der zugrunde liegenden Frameworks (wie npm run start und flutter hot-reload), um Ihnen einen optimierten inneren Entwicklungszyklus zu ermöglichen. Firebase Studio bietet die folgenden Arten von Reloads:
Automatisches Hot Reload: Hot Reloads werden automatisch ausgeführt, wenn Sie eine Datei speichern. Ein Hot-Reload, manchmal auch Hot Module Replacement (HMR) genannt, aktualisiert Ihre App, ohne dass die Seite neu geladen (bei Web-Apps) oder die App neu gestartet oder neu installiert (bei Emulatoren) werden muss. Dieser Ansatz ist nützlich, um den Live-Status Ihrer App beizubehalten, funktioniert aber möglicherweise nicht immer wie vorgesehen.
Manual Full Reload (Manuelles vollständiges Neuladen): Diese Option entspricht dem Aktualisieren einer Seite (für Web-Apps) oder dem Neustarten einer App (für Emulatoren). Wir empfehlen, einen vollständigen Reload zu verwenden, um wichtige Änderungen an Ihrem Quellcode zu erfassen, z. B. wenn Sie große Teile des Codes refaktorieren.
Manueller Kaltstart: Bei dieser Option wird das Vorschausystem von Firebase Studio vollständig neu gestartet. Dazu gehört auch das Beenden und Neustarten des Webservers Ihrer App.
Alle Optionen zum Neuladen sind entweder über die Vorschau-Symbolleiste oder über die Befehlspalette (Cmd+Shift+P auf dem Mac oder Ctrl+Shift+P unter ChromeOS, Windows oder Linux) in der Kategorie Firebase Studio verfügbar.
So verwenden Sie die Vorschau-Symbolleiste:
Klicken Sie auf das Symbol Neu laden, um die Seite zu aktualisieren. Dadurch wird ein vollständiges Neuladen erzwungen.
Wenn Sie eine andere Art der Aktualisierung wünschen, klicken Sie auf den Pfeil neben dem Aktualisierungssymbol, um das Menü zu maximieren.
Wählen Sie im Menü die gewünschte Aktualisierungsoption aus: Hot Reload, Full Reload oder Hard Restart.
Webvorschau mit anderen teilen
Sie können die Webvorschau Ihrer App für andere Nutzer freigeben, damit diese Feedback geben können. Aktivieren Sie dazu den Zugriff und teilen Sie dann den direkten Link zur Vorschau:
Klicken Sie in der Symbolleiste der Webvorschau rechts neben der Adressleiste auf das Symbol Vorschau-Link teilen, um das Freigabemenü zu öffnen.
Sie haben folgende Möglichkeiten, anderen den Zugriff auf Ihren Arbeitsbereich zu erlauben:
Vorschau öffentlich machen: Machen Sie die Vorschau Ihres Arbeitsbereichs öffentlich zugänglich. So kann jeder im Internet auf den Vorschauserver zugreifen, der in Ihrem Arbeitsbereich ausgeführt wird, solange Ihr Arbeitsbereich aktiv ist und bis Sie den öffentlichen Zugriff deaktivieren.
Zugriff auf Arbeitsbereich verwalten Geben Sie Ihren Arbeitsbereich nur für die Personen frei, denen Sie Zugriff gewähren möchten.
Wählen Sie Vorschau-URL kopieren aus, um einen direkten Link zur Arbeitsbereichsvorschau zu kopieren. Diesen können Sie dann an Personen senden, von denen Sie Feedback erhalten möchten. Sie können auch den angezeigten QR‑Code verwenden, um die Vorschau auf Ihrem Mobilgerät zu öffnen.
Automatisches Speichern und Hot Reload konfigurieren
Standardmäßig wird Ihre Arbeit in Firebase Studio eine Sekunde nach dem Beenden der Eingabe automatisch gespeichert, wodurch automatische Hot-Reloads ausgelöst werden. Wenn Sie möchten, dass Firebase Studio Ihre Arbeit in einem anderen Intervall speichert, ändern Sie die Einstellung für das automatische Speichern. Sie können das automatische Speichern auch deaktivieren.
Suchen Sie nach Files: Auto Save und prüfen Sie, ob das Feld auf „afterDelay“ gesetzt ist.
Suchen Sie nach Dateien: Automatisches Speichern – Verzögerung.
Geben Sie ein neues Intervall für die automatische Speicherung in Millisekunden ein. Änderungen an Ihrer Arbeit werden jetzt automatisch auf Grundlage der neuen Einstellung für die automatische Speicherung gespeichert.
[[["Leicht verständlich","easyToUnderstand","thumb-up"],["Mein Problem wurde gelöst","solvedMyProblem","thumb-up"],["Sonstiges","otherUp","thumb-up"]],[["Benötigte Informationen nicht gefunden","missingTheInformationINeed","thumb-down"],["Zu umständlich/zu viele Schritte","tooComplicatedTooManySteps","thumb-down"],["Nicht mehr aktuell","outOfDate","thumb-down"],["Problem mit der Übersetzung","translationIssue","thumb-down"],["Problem mit Beispielen/Code","samplesCodeIssue","thumb-down"],["Sonstiges","otherDown","thumb-down"]],["Zuletzt aktualisiert: 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)."]]
Vorschau-Link teilen, um das Freigabemenü zu öffnen.