Tetap teratur dengan koleksi
Simpan dan kategorikan konten berdasarkan preferensi Anda.
Firebase Studio menawarkan beberapa cara untuk melihat pratinjau dan menguji
aplikasi selama pengembangan. Hal ini mencakup penggunaan App Prototyping agent dan pemanfaatan pratinjau web bawaan, serta pratinjau web dan Android yang tersedia dalam ruang kerja Firebase Studio.
Mengaktifkan dan mengonfigurasi lingkungan pratinjau
Jika Anda menggunakan template atau membuat aplikasi
menggunakan App Prototyping agent, pratinjau sering kali sudah dikonfigurasi untuk Anda. Jika pratinjau belum disiapkan di template, Anda dapat mengonfigurasinya di file konfigurasi Nix project.
Dari ruang kerja Anda, buka .idx/dev.nix.
Firebase Studio akan otomatis membuat file ini saat Anda membuat ruang kerja baru dan menyertakan lingkungan pratinjau yang berlaku berdasarkan template yang Anda pilih. Jika file tidak ada di repositori kode Firebase Studio, buat file tersebut, lalu tetapkan atribut idx.previews ke true. Kemudian, tambahkan atribut konfigurasi, seperti yang ditunjukkan contoh berikut:
{ 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";};};};}
Dari palet perintah (Cmd+Shift+P/Ctrl+Shift+P), jalankan perintah Firebase Studio: Hard restart.
Dari notifikasi Environment config updated, klik Rebuild environment.
Saat Anda membangun ulang lingkungan setelah mengubah file dev.nix, panel pratinjau akan muncul di ruang kerja Anda yang menampilkan salah satu atau kedua tab Android dan Web, bergantung pada apa yang telah Anda aktifkan.
Menggunakan pratinjau aplikasi
Firebase Studio menawarkan pratinjau web di Chrome dan emulator Android di ruang kerja Flutter yang menginstal aplikasi Anda di lingkungan pratinjau. Hal ini memungkinkan Anda menguji aplikasi sepenuhnya, secara keseluruhan, langsung dari ruang kerja.
Memuat ulang pratinjau untuk web dan Android
Firebase Studio memiliki hook ke fungsionalitas hot reload framework yang mendasarinya (seperti npm run start dan flutter hot-reload) untuk memberi Anda loop pengembangan dalam yang disederhanakan. Firebase Studio menyediakan jenis pemuatan ulang berikut:
Automatic Hot Reload: Hot reload dilakukan secara otomatis saat Anda menyimpan file. Terkadang dikenal sebagai Hot Module Replacement (atau HMR), hot reload mengupdate aplikasi Anda tanpa memuat ulang halaman (untuk aplikasi web) atau tanpa memulai ulang atau menginstal ulang aplikasi (untuk emulator). Pendekatan ini berguna untuk mempertahankan status aktif aplikasi Anda, tetapi mungkin tidak selalu berfungsi seperti yang diinginkan.
Manual Full Reload: Opsi ini setara dengan pemuatan ulang halaman (untuk aplikasi web) atau mulai ulang aplikasi (untuk emulator). Sebaiknya gunakan full reload untuk menangkap perubahan signifikan pada kode sumber Anda, seperti saat memfaktorkan ulang sebagian besar kode.
Manual Hard Restart: Opsi ini melakukan mulai ulang lengkap di sistem pratinjau Firebase Studio, yang mencakup proses penghentian dan mulai ulang server web aplikasi Anda.
Semua opsi muat ulang tersedia menggunakan toolbar pratinjau atau palet perintah (Cmd+Shift+P di Mac atau Ctrl+Shift+P di ChromeOS, Windows, atau Linux), di bagian kategori Firebase Studio.
Untuk menggunakan toolbar pratinjau, ikuti langkah-langkah berikut:
Klik ikon Reload untuk memuat ulang halaman. Tindakan ini akan memaksa full reload.
Untuk jenis muat ulang yang berbeda, klik panah di samping ikon muat ulang untuk memperluas menu.
Pilih opsi muat ulang yang Anda inginkan dari menu: Hot Reload, Full Reload, atau Hard Restart.
Membagikan pratinjau web kepada orang lain
Anda dapat membagikan pratinjau web aplikasi kepada orang lain untuk mendapatkan masukan dengan mengaktifkan akses, lalu membagikan link langsung ke pratinjau:
Di toolbar pratinjau web, klik ikon Share Preview Link, di sebelah kanan kolom URL untuk membuka menu berbagi.
Izinkan orang lain mengakses ruang kerja Anda, menggunakan salah satu opsi berikut:
Make preview public: Buat pratinjau ruang kerja Anda dapat diakses secara publik. Tindakan ini memungkinkan siapa saja di Internet menjangkau server pratinjau yang berjalan di ruang kerja Anda saat ruang kerja aktif, dan hingga Anda menonaktifkan akses publik.
Manage workspace access. Bagikan ruang kerja Anda hanya kepada orang-orang yang ingin Anda beri akses.
Pilih Copy preview URL untuk menyalin link langsung ke pratinjau ruang kerja, yang kemudian dapat Anda kirim kepada orang yang ingin Anda minta masukannya. Anda juga dapat menggunakan kode QR yang muncul untuk membuka pratinjau di perangkat seluler.
Mengonfigurasi simpan otomatis dan hot reload
Secara default, Firebase Studio otomatis menyimpan pekerjaan Anda satu detik setelah Anda berhenti mengetik, yang memicu hot reload otomatis. Jika Anda ingin Firebase Studio menyimpan pekerjaan pada interval yang berbeda, ubah setelan simpan otomatis. Anda juga dapat menonaktifkan simpan otomatis.
Telusuri Files: Auto Save dan pastikan kolom tersebut disetel ke `afterDelay`.
Telusuri Files: Auto Save Delay.
Masukkan interval delay simpan otomatis baru, yang dinyatakan dalam milidetik. Perubahan pada pekerjaan Anda kini otomatis disimpan berdasarkan setelan delay simpan otomatis yang baru.
[[["Mudah dipahami","easyToUnderstand","thumb-up"],["Memecahkan masalah saya","solvedMyProblem","thumb-up"],["Lainnya","otherUp","thumb-up"]],[["Informasi yang saya butuhkan tidak ada","missingTheInformationINeed","thumb-down"],["Terlalu rumit/langkahnya terlalu banyak","tooComplicatedTooManySteps","thumb-down"],["Sudah usang","outOfDate","thumb-down"],["Masalah terjemahan","translationIssue","thumb-down"],["Masalah kode / contoh","samplesCodeIssue","thumb-down"],["Lainnya","otherDown","thumb-down"]],["Terakhir diperbarui pada 2025-08-29 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)."]]
Share Preview Link, di sebelah kanan kolom URL untuk membuka menu berbagi.