קל לארגן דפים בעזרת אוספים
אפשר לשמור ולסווג תוכן על סמך ההעדפות שלך.
Firebase Studio מציע כמה דרכים לצפות בתצוגה מקדימה של האפליקציה ולבדוק אותה במהלך הפיתוח. זה כולל שימוש ב-App Prototyping agent
ובתצוגה המקדימה המובנית לאינטרנט, ובתצוגות המקדימות לאינטרנט ולאנדרואיד
שזמינות בסביבות העבודה של Firebase Studio.
הפעלה והגדרה של סביבת התצוגה המקדימה
אם אתם משתמשים בתבנית או יוצרים את האפליקציה באמצעות App Prototyping agent, לרוב התצוגות המקדימות כבר מוגדרות בשבילכם. אם התצוגות המקדימות עדיין לא הוגדרו בתבנית, אפשר להגדיר אותן בקובץ ההגדרות של Nix בפרויקט.
בסביבת העבודה, פותחים את .idx/dev.nix.
Firebase Studio יוצר אוטומטית את הקובץ הזה כשיוצרים סביבת עבודה חדשה, והוא כולל את כל סביבות התצוגה המקדימה הרלוונטיות על סמך התבנית שנבחרה. אם הקובץ לא נמצא במאגר הקודים Firebase Studio, צריך ליצור אותו ואז להגדיר את מאפיין idx.previews לערך true. לאחר מכן מוסיפים מאפייני הגדרה, כמו בדוגמה הבאה:
{ 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";};};};}
מריצים את הפקודה Firebase Studio: הפעלה מחדש מלאה מלוח הפקודות (Cmd+Shift+P/Ctrl+Shift+P).
בהתראה Environment config updated, לוחצים על Rebuild environment.
כשבונים מחדש את הסביבה אחרי שינוי קובץ dev.nix, חלונית התצוגה המקדימה מופיעה בסביבת העבודה עם הכרטיסיות Android וWeb, או עם אחת מהן, בהתאם למה שהפעלתם.
שימוש בתצוגות מקדימות של אפליקציות
Firebase Studio מציע תצוגות מקדימות של אתרים ב-Chrome ובאמולטורים של Android בסביבות עבודה של Flutter שמתקינות את האפליקציה בסביבת התצוגה המקדימה. כך תוכלו לבדוק את האפליקציה באופן מלא, מקצה לקצה, ישירות מסביבת העבודה.
הפונקציה Firebase Studio מתחברת לפונקציות של טעינה מחדש של המסגרות הבסיסיות (כמו npm run start ו-flutter hot-reload) כדי לספק לכם לולאת פיתוח פנימית יעילה. Firebase Studio מספקת את סוגי הטעינה מחדש הבאים:
טעינה מחדשת אוטומטית (Hot Reload): טעינות מחדשות מתבצעות אוטומטית כששומרים קובץ. טעינה מחדש מהירה, שנקראת לפעמים החלפת מודול בזמן ריצה (או HMR), מעדכנת את האפליקציה בלי לטעון מחדש את הדף (באפליקציות אינטרנט) או בלי להפעיל מחדש או להתקין מחדש את האפליקציה (באמולטורים). הגישה הזו שימושית לשמירה על המצב הפעיל של האפליקציה, אבל יכול להיות שהיא לא תמיד תפעל כמו שרוצים.
טעינה מלאה ידנית: האפשרות הזו שוות ערך לרענון דף (באפליקציות אינטרנט) או להפעלה מחדש של אפליקציה (באמולטורים). מומלץ להשתמש בטעינה מחדש מלאה כדי לתעד שינויים משמעותיים בקוד המקור, למשל כשמבצעים רפקטורינג של קטעי קוד גדולים.
הפעלה מחדש ידנית של המערכת: האפשרות הזו מבצעת הפעלה מחדש מלאה של מערכת התצוגה המקדימה של Firebase Studio, כולל עצירה והפעלה מחדש של שרת האינטרנט של האפליקציה.
כל אפשרויות הטעינה מחדש זמינות באמצעות סרגל הכלים של התצוגה המקדימה או לוח הפקודות (Cmd+Shift+P ב-Mac או Ctrl+Shift+P ב-ChromeOS, ב-Windows או ב-Linux), בקטגוריה Firebase Studio.
כדי להשתמש בסרגל הכלים של התצוגה המקדימה, פועלים לפי השלבים הבאים:
לוחצים על סמל הטעינה מחדש כדי לרענן את הדף. כך מתבצעת טעינה מלאה מחדש.
כדי לבצע רענון מסוג אחר, לוחצים על החץ לצד סמל הטעינה מחדש כדי להרחיב את התפריט.
בתפריט, בוחרים באפשרות הרענון הרצויה: טעינה מחדש מהירה, טעינה מחדש מלאה או הפעלה מחדש מלאה.
שיתוף התצוגה המקדימה של האתר עם אחרים
אתם יכולים לשתף את התצוגה המקדימה של האפליקציה בדפדפן עם אנשים אחרים כדי לקבל מהם משוב. לשם כך, צריך להפעיל את הגישה ואז לשתף את הקישור הישיר לתצוגה המקדימה:
בסרגל הכלים של התצוגה המקדימה בדפדפן, לוחצים על הסמל שיתוף קישור לתצוגה מקדימה משמאל לסרגל הכתובות כדי לפתוח את תפריט השיתוף.
כדי לאפשר לאחרים לגשת לסביבת העבודה, משתמשים באחת מהאפשרויות הבאות:
הפיכת התצוגה המקדימה לציבורית: הפיכת התצוגה המקדימה של סביבת העבודה לנגישה לציבור. כך כל אחד באינטרנט יכול להגיע לשרת התצוגה המקדימה שפועל ב-Workspace בזמן ש-Workspace פעיל, ועד שתשביתו את הגישה הציבורית.
ניהול הגישה ל-Workspace משתפים את סביבת העבודה רק עם האנשים שרוצים לתת להם גישה.
בוחרים באפשרות העתקת כתובת ה-URL של התצוגה המקדימה כדי להעתיק קישור ישיר לתצוגה המקדימה של סביבת העבודה,
ואז אפשר לשלוח אותו לאנשים שרוצים לקבל מהם משוב. אפשר גם להשתמש בקוד ה-QR שמופיע כדי לפתוח את התצוגה המקדימה במכשיר הנייד.
הגדרת שמירה אוטומטית וטעינה מחדש מהירה
כברירת מחדל, Firebase Studio שומר אוטומטית את העבודה שנייה אחת אחרי שמפסיקים להקליד, וזה מפעיל טעינה מחדש אוטומטית של שינויים. אם רוציםFirebase Studio לשמור את העבודה במרווח זמן אחר, משנים את הגדרת השמירה האוטומטית. אפשר גם להשבית את השמירה האוטומטית.
מחפשים את Files: Auto Save ומוודאים שהשדה מוגדר ל-`afterDelay`.
מחפשים את האפשרות קבצים: השהיית שמירה אוטומטית.
מזינים ערך חדש לפרק הזמן בין שמירה אוטומטית לשמירה אוטומטית, באלפיות שנייה. השינויים בעבודה שלכם נשמרים עכשיו אוטומטית על סמך ההגדרה החדשה של השהיית השמירה האוטומטית.
[[["התוכן קל להבנה","easyToUnderstand","thumb-up"],["התוכן עזר לי לפתור בעיה","solvedMyProblem","thumb-up"],["סיבה אחרת","otherUp","thumb-up"]],[["חסרים לי מידע או פרטים","missingTheInformationINeed","thumb-down"],["התוכן מורכב מדי או עם יותר מדי שלבים","tooComplicatedTooManySteps","thumb-down"],["התוכן לא עדכני","outOfDate","thumb-down"],["בעיה בתרגום","translationIssue","thumb-down"],["בעיה בדוגמאות/בקוד","samplesCodeIssue","thumb-down"],["סיבה אחרת","otherDown","thumb-down"]],["עדכון אחרון: 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)."]]
שיתוף קישור לתצוגה מקדימה משמאל לסרגל הכתובות כדי לפתוח את תפריט השיתוף.