Koleksiyonlar ile düzeninizi koruyun
İçeriği tercihlerinize göre kaydedin ve kategorilere ayırın.
Firebase Studio, geliştirme sırasında uygulamanızı önizlemenin ve test etmenin çeşitli yollarını sunar. Bu kapsamda, App Prototyping agent simgesini kullanmak, yerleşik web önizleme aracından ve Firebase Studio çalışma alanlarında bulunan web ve Android önizleme araçlarından yararlanmak yer alır.
Önizleme ortamınızı etkinleştirme ve yapılandırma
Şablon kullanıyorsanız veya uygulamanızı App Prototyping agent ile oluşturuyorsanız önizlemeler genellikle sizin için önceden yapılandırılır. Önizlemeler şablonunuzda henüz ayarlanmamışsa bunları projenin Nix yapılandırma dosyasında yapılandırabilirsiniz.
Çalışma alanınızda .idx/dev.nix simgesini açın.
Firebase Studio, yeni bir çalışma alanı oluşturduğunuzda bu dosyayı otomatik olarak oluşturur ve seçtiğiniz şablona göre geçerli tüm önizleme ortamlarını içerir. Dosya Firebase Studio
kod deponuzda değilse dosyayı oluşturun ve idx.previews özelliğini true olarak ayarlayın. Ardından, aşağıdaki örnekte gösterildiği gibi yapılandırma özelliklerini ekleyin:
{ 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 içindeki Nix özelliklerinin tam listesi için Nix +
Firebase Studio başlıklı makaleyi inceleyin.
Ortamınızı yeniden oluşturun:
Komut paletinden (Cmd+Shift+P/Ctrl+Shift+P) Firebase Studio: Hard restart (Firebase Studio: Zorunlu yeniden başlatma) komutunu çalıştırın.
Ortam yapılandırması güncellendi bildiriminde Ortamı yeniden oluştur'u tıklayın.
dev.nix dosyanızı değiştirdikten sonra ortamı yeniden oluşturduğunuzda, etkinleştirdiğiniz öğelere bağlı olarak çalışma alanınızda Android ve Web sekmelerini veya bu sekmelerin ikisini de gösteren bir önizleme paneli görünür.
Uygulama önizlemelerini kullanma
Firebase Studio, uygulamanızı önizleme ortamına yükleyen Flutter çalışma alanlarında Chrome ve Android emülatörlerinde web önizlemeleri sunar. Bu sayede, uygulamanızı uçtan uca, doğrudan çalışma alanınızdan tam olarak test edebilirsiniz.
Web ve Android için önizlemeleri yenileme
Firebase Studio, daha akıcı bir iç geliştirme döngüsü sağlamak için temel çerçevelerin (npm run start ve flutter hot-reload gibi) anında yeniden yükleme işlevlerine bağlanır. Firebase Studio aşağıdaki yeniden yükleme türlerini sunar:
Otomatik Hot Reload: Bir dosyayı kaydettiğinizde otomatik olarak hot reload işlemi gerçekleştirilir. Bazen Hot Module Replacement (HMR) olarak da bilinen anında yeniden yükleme, sayfayı yeniden yüklemeden (web uygulamaları için) veya uygulamayı yeniden başlatmadan ya da yeniden yüklemeden (emülatörler için) uygulamanızı günceller. Bu yaklaşım, uygulamanızın canlı durumunu korumak için yararlı olsa da her zaman beklendiği gibi çalışmayabilir.
Manuel Tam Yeniden Yükleme: Bu seçenek, sayfa yenilemeye (web uygulamaları için) veya uygulamayı yeniden başlatmaya (emülatörler için) eşdeğerdir. Kaynak kodunuzdaki önemli değişiklikleri (ör. büyük kod parçalarını yeniden düzenlerken) yakalamak için tam yeniden yükleme kullanmanızı öneririz.
Manuel olarak zorla yeniden başlatma: Bu seçenek, Firebase Studio'ın önizleme sistemini tamamen yeniden başlatır. Bu işlem, uygulamanızın web sunucusunu durdurup yeniden başlatmayı da içerir.
Tüm yeniden yükleme seçenekleri, önizleme araç çubuğu veya komut paleti (Mac'te Cmd+Shift+P ya da ChromeOS, Windows veya Linux'ta Ctrl+Shift+P) kullanılarak Firebase Studio kategorisinde kullanılabilir.
Önizleme araç çubuğunu kullanmak için aşağıdaki adımları uygulayın:
Sayfayı yenilemek için Yeniden yükle simgesini tıklayın. Bu işlem, tam yeniden yüklemeye zorlar.
Farklı bir yenileme türü için menüyü genişletmek üzere yeniden yükleme simgesinin yanındaki oku tıklayın.
Menüden istediğiniz yenileme seçeneğini belirleyin: Hot Reload, Full Reload veya Hard Restart.
Web önizlemenizi başkalarıyla paylaşma
Erişimi etkinleştirip önizlemenin doğrudan bağlantısını paylaşarak uygulamanızın web önizlemesini geri bildirim almak için başkalarıyla paylaşabilirsiniz:
Paylaşım menüsünü açmak için web önizleme araç çubuğunda, adres çubuğunun sağındaki Önizleme Bağlantısını Paylaş simgesini tıklayın.
Aşağıdaki seçeneklerden birini kullanarak başkalarının çalışma alanınıza erişmesine izin verin:
Önizlemeyi herkese açık hale getirme: Çalışma alanı önizlemenizi herkese açık hale getirin. Bu özellik, internetteki herkesin çalışma alanınız etkin durumdayken ve herkese açık erişimi devre dışı bırakana kadar çalışma alanınızda çalışan önizleme sunucusuna ulaşmasına olanak tanır.
Çalışma alanı erişimini yönetin. Çalışma alanınızı yalnızca erişim vermek istediğiniz kişilerle paylaşın.
Çalışma alanı önizlemesine doğrudan bağlantı kopyalamak için Önizleme URL'sini kopyala'yı seçin. Bu bağlantıyı daha sonra geri bildirim almak istediğiniz kişilere gönderebilirsiniz. Önizlemenizi mobil cihazınızda açmak için gösterilen QR kodunu da kullanabilirsiniz.
Otomatik kaydetme ve anında yeniden yükleme özelliklerini yapılandırma
Varsayılan olarak, Firebase Studio yazmayı bıraktıktan bir saniye sonra çalışmanızı otomatik olarak kaydeder ve otomatik sıcak yeniden yüklemeleri tetikler. Çalışmanızı farklı bir aralıkta kaydetmek istiyorsanız Firebase Studio otomatik kaydetme ayarını değiştirin. Otomatik kaydetme özelliğini de devre dışı bırakabilirsiniz.
Files: Auto Save (Dosyalar: Otomatik Kaydetme) seçeneğini arayın ve alanın `afterDelay` olarak ayarlandığını doğrulayın.
Dosyalar: Otomatik Kaydetme
Gecikmesi'ni arayın.
Milisaniye cinsinden ifade edilen yeni bir otomatik kaydetme gecikme aralığı girin. Çalışmanızda yapılan değişiklikler artık yeni otomatik kaydetme gecikmesi ayarına göre otomatik olarak kaydediliyor.
[[["Anlaması kolay","easyToUnderstand","thumb-up"],["Sorunumu çözdü","solvedMyProblem","thumb-up"],["Diğer","otherUp","thumb-up"]],[["İhtiyacım olan bilgiler yok","missingTheInformationINeed","thumb-down"],["Çok karmaşık / çok fazla adım var","tooComplicatedTooManySteps","thumb-down"],["Güncel değil","outOfDate","thumb-down"],["Çeviri sorunu","translationIssue","thumb-down"],["Örnek veya kod sorunu","samplesCodeIssue","thumb-down"],["Diğer","otherDown","thumb-down"]],["Son güncelleme tarihi: 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)."]]
Önizleme Bağlantısını Paylaş simgesini tıklayın.