Sử dụng bộ sưu tập để sắp xếp ngăn nắp các trang
Lưu và phân loại nội dung dựa trên lựa chọn ưu tiên của bạn.
Firebase Studio cung cấp một số cách để xem trước và kiểm thử ứng dụng trong quá trình phát triển. Trong đó có việc sử dụng App Prototyping agent và tận dụng trình xem trước web tích hợp, cũng như trình xem trước web và Android có trong không gian làm việc của Firebase Studio.
Bật và định cấu hình môi trường xem trước
Nếu bạn sử dụng mẫu hoặc tạo ứng dụng bằng App Prototyping agent, thì bản xem trước thường đã được định cấu hình cho bạn. Nếu chưa thiết lập bản xem trước trong mẫu, bạn có thể định cấu hình bản xem trước trong tệp cấu hình Nix của dự án.
Trong không gian làm việc, hãy mở .idx/dev.nix.
Firebase Studio tự động tạo tệp này khi bạn tạo một không gian làm việc mới và bao gồm mọi môi trường xem trước có thể áp dụng dựa trên mẫu mà bạn chọn. Nếu tệp này không có trong kho lưu trữ mã Firebase Studio, hãy tạo tệp đó rồi đặt thuộc tính idx.previews thành true. Sau đó, hãy thêm các thuộc tính cấu hình, như trong ví dụ sau:
{ 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";};};};}
Để xem danh sách đầy đủ các thuộc tính Nix trong Firebase Studio, hãy xem Nix + Firebase Studio.
Xây dựng lại môi trường:
Từ bảng lệnh (Cmd+Shift+P/Ctrl+Shift+P), hãy chạy lệnh Firebase Studio: Khởi động lại cứng.
Trong thông báo Đã cập nhật cấu hình môi trường, hãy nhấp vào Tạo lại môi trường.
Khi bạn tạo lại môi trường sau khi sửa đổi tệp dev.nix, bảng điều khiển xem trước sẽ xuất hiện trong không gian làm việc của bạn, cho thấy một hoặc cả hai thẻ Android và Web, tuỳ thuộc vào những gì bạn đã bật.
Sử dụng bản xem trước ứng dụng
Firebase Studio cung cấp bản xem trước trên web trên Chrome và trình mô phỏng Android trong không gian làm việc Flutter. Các không gian này sẽ cài đặt ứng dụng của bạn trong môi trường xem trước. Nhờ đó, bạn có thể kiểm thử ứng dụng của mình một cách toàn diện, từ đầu đến cuối, ngay trong không gian làm việc.
Làm mới bản xem trước cho web và Android
Firebase Studio kết nối với các chức năng tải lại nhanh của các khung cơ bản (như npm run start và flutter hot-reload) để mang đến cho bạn một vòng lặp phát triển nội bộ tinh giản. Firebase Studio cung cấp các loại tải lại sau đây:
Tự động tải lại nóng: Thao tác tải lại nóng sẽ tự động diễn ra khi bạn lưu một tệp. Đôi khi được gọi là Hot Module Replacement (hoặc HMR), tính năng tải lại nóng sẽ cập nhật ứng dụng của bạn mà không cần tải lại trang (đối với ứng dụng web) hoặc không cần khởi động lại hay cài đặt lại ứng dụng (đối với trình mô phỏng). Phương pháp này hữu ích cho việc duy trì trạng thái hoạt động của ứng dụng nhưng không phải lúc nào cũng hoạt động như dự kiến.
Tải lại toàn bộ theo cách thủ công: Lựa chọn này tương đương với việc làm mới trang (đối với ứng dụng web) hoặc khởi động lại ứng dụng (đối với trình mô phỏng). Bạn nên sử dụng tính năng tải lại toàn bộ để ghi lại những thay đổi đáng kể đối với mã nguồn, chẳng hạn như khi tái cấu trúc các đoạn mã lớn.
Khởi động lại cứng theo cách thủ công: Lựa chọn này sẽ khởi động lại hoàn toàn hệ thống xem trước của Firebase Studio, bao gồm cả việc dừng và khởi động lại máy chủ web của ứng dụng.
Bạn có thể dùng tất cả các lựa chọn tải lại bằng thanh công cụ xem trước hoặc bảng lệnh (Cmd+Shift+P trên máy Mac hoặc Ctrl+Shift+P trên ChromeOS, Windows hoặc Linux), trong danh mục Firebase Studio.
Để sử dụng thanh công cụ xem trước, hãy làm theo các bước sau:
Nhấp vào biểu tượng Tải lại để làm mới trang. Thao tác này buộc hệ thống tải lại toàn bộ.
Để làm mới theo một cách khác, hãy nhấp vào mũi tên bên cạnh biểu tượng tải lại để mở rộng trình đơn.
Chọn chế độ làm mới bạn muốn trong trình đơn: Tải lại nhanh, Tải lại toàn bộ hoặc Khởi động lại hoàn toàn.
Chia sẻ bản xem trước trên web với người khác
Bạn có thể chia sẻ bản xem trước ứng dụng trên web với người khác để nhận ý kiến phản hồi bằng cách bật quyền truy cập rồi chia sẻ đường liên kết trực tiếp đến bản xem trước:
Trong thanh công cụ xem trước trên web, hãy nhấp vào biểu tượng Chia sẻ đường liên kết xem trước ở bên phải thanh địa chỉ để mở trình đơn chia sẻ.
Cho phép người khác truy cập vào không gian làm việc của bạn bằng một trong những cách sau:
Công khai bản xem trước: Công khai bản xem trước không gian làm việc của bạn. Việc này cho phép mọi người trên Internet truy cập vào máy chủ xem trước đang chạy trên không gian làm việc của bạn khi không gian làm việc của bạn đang hoạt động và cho đến khi bạn tắt quyền truy cập công khai.
Quản lý quyền truy cập vào không gian làm việc. Chỉ chia sẻ không gian làm việc với những người mà bạn muốn cấp quyền truy cập.
Chọn Sao chép URL xem trước để sao chép một đường liên kết trực tiếp đến bản xem trước không gian làm việc. Sau đó, bạn có thể gửi đường liên kết này cho những người mà bạn muốn nhận ý kiến phản hồi. Bạn cũng có thể dùng mã QR xuất hiện để mở bản xem trước trên thiết bị di động.
Định cấu hình tính năng tự động lưu và tải lại nóng
Theo mặc định, Firebase Studio sẽ tự động lưu công việc của bạn sau một giây kể từ khi bạn ngừng nhập, kích hoạt tính năng tải lại nóng tự động. Nếu bạn muốn Firebase Studio lưu công việc của mình theo một khoảng thời gian khác, hãy thay đổi chế độ cài đặt tự động lưu. Bạn cũng có thể tắt tính năng lưu tự động.
Tìm Files: Auto Save (Tệp: Tự động lưu) và xác minh rằng trường này được đặt thành `afterDelay`.
Tìm Files: Auto Save Delay (Tệp: Độ trễ khi lưu tự động).
Nhập khoảng thời gian trễ lưu tự động mới, tính bằng mili giây. Giờ đây, những thay đổi đối với công việc của bạn sẽ được tự động lưu dựa trên chế độ cài đặt mới về độ trễ khi lưu tự động.
[[["Dễ hiểu","easyToUnderstand","thumb-up"],["Giúp tôi giải quyết được vấn đề","solvedMyProblem","thumb-up"],["Khác","otherUp","thumb-up"]],[["Thiếu thông tin tôi cần","missingTheInformationINeed","thumb-down"],["Quá phức tạp/quá nhiều bước","tooComplicatedTooManySteps","thumb-down"],["Đã lỗi thời","outOfDate","thumb-down"],["Vấn đề về bản dịch","translationIssue","thumb-down"],["Vấn đề về mẫu/mã","samplesCodeIssue","thumb-down"],["Khác","otherDown","thumb-down"]],["Cập nhật lần gần đây nhất: 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)."]]
Chia sẻ đường liên kết xem trước ở bên phải thanh địa chỉ để mở trình đơn chia sẻ.