با مجموعهها، منظم بمانید
ذخیره و طبقهبندی محتوا براساس اولویتهای شما.
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";};};};}
از پالت فرمان ( Cmd+Shift+P / Ctrl+Shift+P )، دستور Firebase Studio : Hard restart را اجرا کنید.
از اعلان به روز شده تنظیمات محیط ، روی بازسازی محیط کلیک کنید.
هنگامی که پس از اصلاح فایل dev.nix خود، محیط را بازسازی می کنید، پانل پیش نمایش در فضای کاری شما ظاهر می شود که بسته به آنچه فعال کرده اید، یکی یا هر دو تب اندروید و وب را نشان می دهد.
از پیش نمایش برنامه ها استفاده کنید
Firebase Studio پیشنمایشهای وب را روی شبیهسازهای Chrome و Android در فضاهای کاری Flutter ارائه میدهد که برنامه شما را در محیط پیشنمایش نصب میکنند. این به شما امکان می دهد برنامه خود را به طور کامل، از انتهای تا انتها، مستقیماً از فضای کاری خود آزمایش کنید.
بازخوانی پیش نمایش ها برای وب و اندروید
Firebase Studio به قابلیتهای بارگذاری مجدد داغ چارچوبهای زیرین (مانند npm run start و flutter hot-reload ) قلاب میکند تا یک حلقه توسعه داخلی سادهتر را به شما ارائه دهد. Firebase Studio انواع زیر را بارگذاری مجدد می کند:
بارگذاری مجدد خودکار : بارگذاری مجدد داغ به طور خودکار هنگامی که یک فایل را ذخیره می کنید انجام می شود. گاهی اوقات به عنوان Hot Module Replacement (یا HMR) شناخته می شود، یک بارگذاری مجدد داغ برنامه شما را بدون بارگیری مجدد صفحه (برای برنامه های وب) یا بدون راه اندازی مجدد یا نصب مجدد برنامه (برای شبیه سازها) به روز می کند. این رویکرد برای حفظ حالت زنده برنامه شما مفید است اما ممکن است همیشه آنطور که در نظر گرفته شده کار نکند.
بارگذاری مجدد دستی کامل : این گزینه معادل به روز رسانی صفحه (برای برنامه های وب) یا راه اندازی مجدد برنامه (برای شبیه سازها) است. توصیه می کنیم از یک بارگذاری مجدد کامل برای ثبت تغییرات قابل توجه در کد منبع خود استفاده کنید، مانند زمانی که تکه های بزرگی از کد را دوباره فاکتور می کنید.
راه اندازی مجدد دستی سخت : این گزینه یک راه اندازی مجدد کامل سیستم پیش نمایش Firebase Studio را انجام می دهد که شامل توقف و راه اندازی مجدد وب سرور برنامه شما می شود.
همه گزینههای بارگیری مجدد با استفاده از نوار ابزار پیشنمایش یا پالت فرمان ( Cmd+Shift+P در Mac یا Ctrl+Shift+P در ChromeOS، Windows، یا Linux)، در دسته Firebase Studio در دسترس هستند.
برای استفاده از نوار ابزار پیش نمایش، مراحل زیر را دنبال کنید:
برای بازخوانی صفحه، روی نماد Reload کلیک کنید. این باعث بارگذاری مجدد کامل می شود. برای نوع دیگری از تازهسازی، روی فلش کنار نماد بارگیری مجدد کلیک کنید تا منو بزرگ شود.
گزینه refresh مورد نظر خود را از منو انتخاب کنید: Hot Reload ، Full Reload یا Hard Restart .
پیش نمایش وب خود را با دیگران به اشتراک بگذارید
میتوانید با فعال کردن دسترسی و سپس اشتراکگذاری پیوند مستقیم به پیشنمایش، پیشنمایش وب برنامهتان را برای بازخورد با دیگران به اشتراک بگذارید:
در نوار ابزار پیش نمایش وب، روی نماد پیوند پیشنمایش را به اشتراک بگذارید ، در سمت راست نوار آدرس برای باز کردن منوی اشتراکگذاری.
با استفاده از یکی از این گزینهها به دیگران اجازه دسترسی به فضای کاری شما را بدهید:
عمومی کردن پیشنمایش : پیشنمایش فضای کاری خود را در دسترس عموم قرار دهید. این به هر کسی در اینترنت اجازه میدهد تا زمانی که فضای کاری شما فعال است و تا زمانی که دسترسی عمومی را خاموش نکنید، به سرور پیشنمایش در حال اجرا در فضای کاری شما دسترسی پیدا کند.
دسترسی به فضای کاری را مدیریت کنید فضای کاری خود را فقط با افرادی که می خواهید به آنها دسترسی داشته باشید به اشتراک بگذارید.
برای کپی کردن پیوند مستقیم به پیشنمایش فضای کاری، کپی URL پیشنمایش را انتخاب کنید، سپس میتوانید آن را برای کسانی که میخواهید بازخورد دریافت کنید ارسال کنید. همچنین می توانید از کد QR که به نظر می رسد برای باز کردن پیش نمایش خود در دستگاه تلفن همراه خود استفاده کنید.
ذخیره خودکار و بارگذاری مجدد داغ را پیکربندی کنید
بهطور پیشفرض، Firebase Studio یک ثانیه پس از توقف تایپ، کار شما را بهطور خودکار ذخیره میکند و بارگیری مجدد خودکار را آغاز میکند. اگر میخواهید Firebase Studio کار شما را در فاصله زمانی متفاوت ذخیره کند، تنظیمات ذخیره خودکار را تغییر دهید. همچنین می توانید ذخیره خودکار را خاموش کنید.
جستجوی فایلها: ذخیره خودکار و بررسی اینکه فیلد روی «afterDelay» تنظیم شده است.
جستجوی فایلها: تأخیر ذخیره خودکار
یک بازه تأخیر ذخیره خودکار جدید، که بر حسب میلی ثانیه بیان می شود، وارد کنید. تغییرات کار شما اکنون به طور خودکار بر اساس تنظیم تأخیر ذخیره خودکار جدید ذخیره می شود.
تاریخ آخرین بهروزرسانی 2025-07-25 بهوقت ساعت هماهنگ جهانی.
[null,null,["تاریخ آخرین بهروزرسانی 2025-07-25 بهوقت ساعت هماهنگ جهانی."],[],[],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)."]]