تنظيم صفحاتك في مجموعات
يمكنك حفظ المحتوى وتصنيفه حسب إعداداتك المفضّلة.
توفّر Firebase Studio عدة طرق لمعاينة تطبيقك واختباره أثناء عملية التطوير. ويشمل ذلك استخدام App Prototyping agent والاستفادة من أداة معاينة الويب المضمّنة، وأدوات معاينة الويب وAndroid المتوفّرة ضمن مساحات عمل 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";};};};}
للاطّلاع على القائمة الكاملة لسمات Nix في Firebase Studio، يُرجى الانتقال إلى Nix +
Firebase Studio.
أعِد إنشاء بيئتك:
من لوحة الأوامر (Cmd+Shift+P/Ctrl+Shift+P)، شغِّل الأمر
Firebase Studio: إعادة التشغيل الإجباري.
من الإشعار تم تعديل إعدادات البيئة، انقر على إعادة إنشاء البيئة.
عند إعادة إنشاء البيئة بعد تعديل ملف dev.nix، ستظهر لوحة المعاينة في مساحة العمل مع عرض علامة التبويب Android أو الويب أو كلتيهما، وذلك حسب ما فعّلته.
استخدام معاينات التطبيقات
توفّر Firebase Studio معاينات على الويب في Chrome ومحاكيات Android في مساحات عمل Flutter التي تثبّت تطبيقك في بيئة المعاينة. يتيح لك ذلك اختبار تطبيقك بالكامل، من البداية إلى النهاية، مباشرةً من مساحة عملك.
إعادة تحميل معاينات الويب وAndroid
تتكامل Firebase Studio مع وظائف إعادة التحميل السريع في الأُطر الأساسية (مثل npm run start وflutter hot-reload) لتوفير حلقة تطوير داخلية مبسطة. توفّر شركة Firebase Studio الأنواع التالية من عمليات إعادة الشحن:
إعادة التحميل السريع التلقائي: يتم إجراء عمليات إعادة التحميل السريع تلقائيًا عند حفظ ملف. يُعرف هذا الإجراء أحيانًا باسم استبدال الوحدات النمطية النشطة (أو HMR)، وهو يعيد تحميل تطبيقك بدون إعادة تحميل الصفحة (بالنسبة إلى تطبيقات الويب) أو بدون إعادة تشغيل التطبيق أو إعادة تثبيته (بالنسبة إلى المحاكيات). هذه الطريقة مفيدة للحفاظ على حالة تطبيقك النشطة، ولكنها قد لا تعمل دائمًا على النحو المنشود.
إعادة التحميل الكامل يدويًا: يعادل هذا الخيار إعادة تحميل الصفحة (لتطبيقات الويب) أو إعادة تشغيل التطبيق (للمحاكيات). ننصحك باستخدام إعادة تحميل كاملة لتسجيل التغييرات المهمة في الرمز المصدر، مثلاً عند إعادة تصميم أجزاء كبيرة من الرمز.
إعادة التشغيل الإجباري اليدوي: ينفّذ هذا الخيار إعادة تشغيل كاملة لنظام المعاينة في Firebase Studio، بما في ذلك إيقاف خادم الويب الخاص بتطبيقك وإعادة تشغيله.
تتوفّر جميع خيارات إعادة التحميل باستخدام شريط أدوات المعاينة أو لوحة الأوامر (Cmd+Shift+P على أجهزة Mac أو Ctrl+Shift+P على أجهزة ChromeOS أو Windows أو Linux)، ضمن فئة Firebase Studio.
انقر على رمز إعادة التحميل لإعادة تحميل الصفحة. يؤدي ذلك إلى إعادة تحميل الصفحة بالكامل.
لإجراء نوع مختلف من إعادة التحميل، انقر على السهم بجانب رمز إعادة التحميل لتوسيع القائمة.
اختَر خيار إعادة التحميل الذي تريده من القائمة: إعادة التحميل السريع أو إعادة التحميل الكامل أو إعادة التشغيل الإجباري.
مشاركة معاينة الويب مع الآخرين
يمكنك مشاركة معاينة تطبيقك على الويب مع الآخرين للحصول على ملاحظات من خلال تفعيل إذن الوصول
ثم مشاركة الرابط المباشر للمعاينة:
في شريط أدوات معاينة الويب، انقر على الرمز مشاركة رابط المعاينة على يسار شريط العناوين لفتح
قائمة المشاركة.
يمكنك السماح للمستخدمين الآخرين بالوصول إلى مساحة عملك باستخدام أحد الخيارات التالية:
إتاحة المعاينة للجميع: يمكنك إتاحة معاينة مساحة العمل للجميع. يتيح ذلك لأي مستخدم على الإنترنت الوصول إلى خادم المعاينة الذي يعمل على مساحة عملك طالما أنّ مساحة عملك نشطة، وإلى أن توقف إمكانية الوصول العام.
إدارة إذن الوصول إلى مساحة العمل شارك مساحة عملك مع المستخدمين الذين تريد منحهم إذن الوصول فقط.
انقر على نسخ عنوان URL الخاص بالمعاينة لنسخ رابط مباشر إلى معاينة مساحة العمل،
ويمكنك بعد ذلك إرساله إلى الأشخاص الذين تريد الحصول على ملاحظات منهم. يمكنك أيضًا استخدام رمز الاستجابة السريعة الذي يظهر لفتح المعاينة على جهازك الجوّال.
ضبط الحفظ التلقائي وإعادة التحميل السريع
يحفظ 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)."]]
مشاركة رابط المعاينة على يسار شريط العناوين لفتح
قائمة المشاركة.