Troubleshoot the common causes of a blank or stuck preview in Firebase Studio, from build errors and dependency issues to browser and network problems.
You make a change, expect the in-browser preview to update, and instead you get a blank screen, an endless spinner, or a stale view. This is one of the most common friction points in cloud IDEs.
The good news is that it is almost always fixable and rarely a sign of lost work. The cause is usually a build failure, a dependency hiccup, or a browser or network issue.
This guide walks through the likely causes in order, from quickest to check to most involved. Work through them methodically.
Before anything else, confirm your work is saved and committed, so you can troubleshoot without fear of losing progress.
A blank preview most often means the app did not compile. The preview cannot render what did not build.
Open the terminal or the problems panel and look for build errors. Syntax errors, missing imports, and type mismatches will halt the build.
If the AI agent recently generated code, that is a prime suspect. Agentic edits sometimes introduce a small mistake that breaks compilation.
Fix the reported errors, save, and let the build run again. Watch the output to confirm it completes cleanly before expecting the preview to recover.
If dependencies are missing or out of sync, the app may fail to start even when your own code is fine. This is common right after adding a new package.
Re-fetch your dependencies from the terminal. For a Flutter project this means pulling packages again so the lockfile and installed versions agree.
Look for version conflicts in the output. Two packages requiring incompatible versions of a shared dependency will block the build.
Resolve conflicts by adjusting version constraints, then rebuild. Clearing and reinstalling dependencies from scratch often clears stubborn issues.
Sometimes the code is fine but the preview process itself is stuck. A restart clears transient state.
Stop the running preview or dev server, then start it again. This forces a fresh serve of your latest build.
If the environment offers a reload or refresh action for the preview pane, use it. A hard refresh of the preview can resolve a stale render.
Give it a moment to rebuild and serve. A stuck server that simply needed restarting is one of the most common and easiest fixes.
Because everything runs in the browser, your browser can be the problem. A cached asset or an aggressive extension can produce a blank preview.
Do a hard refresh of the whole tab to bypass cache. If that helps, the issue was stale cached content.
Try an incognito or private window, which disables most extensions and starts with a clean cache. If the preview works there, an extension is likely interfering.
Ad blockers and privacy extensions are frequent offenders because they can block the preview's connections. Whitelist the environment or disable the extension for it.
Firebase Studio is a hosted environment, so a flaky connection breaks the live preview link. The preview depends on a stable connection to Google's servers.
Check your internet connection and reload. Corporate networks, VPNs, and strict firewalls can block the connections the preview relies on.
If you are on a restricted network, try a different network to isolate the problem. A working preview elsewhere confirms a network policy issue.
Also check whether Google is reporting any service disruption. Occasionally the platform itself has an incident, and the fix is simply to wait.
Sometimes the app builds and serves, but crashes at runtime and shows a blank screen. This is different from a build failure.
Open the browser developer console to look for runtime errors. Uncaught exceptions during startup, such as a failed Firebase initialization, will blank the screen.
Missing or wrong Firebase configuration is a common runtime cause. If initialization throws, the app may never render its first frame.
Fix the runtime error, reload, and confirm the app reaches its first screen. Runtime errors are easy to miss because the build itself reported success.
Occasionally the build and runtime are both fine, but you are simply looking at the wrong thing. Cloud IDEs often expose more than one preview surface, and it is easy to watch a stale one.
Confirm you have the correct preview target selected, especially if your project can serve both a web build and other outputs. Pointing at the wrong target shows nothing useful.
If the environment maps previews to specific ports, make sure the port you are viewing matches the one your dev server is actually serving. A mismatch looks exactly like a blank screen.
When in doubt, close and reopen the preview pane so it re-attaches to the live server. This clears any lingering reference to an old or wrong preview surface.
When the preview goes blank, the temptation is to try everything at once. A disciplined order finds the cause faster and avoids masking one problem with another.
Start with the build output, because a failed compile explains most blank previews and is the quickest thing to confirm. If the build is clean, move to the browser console to catch runtime exceptions the build never reported.
Only after code and runtime look healthy should you suspect the environment itself. Restart the preview server, then rule out the browser with an incognito window, then rule out the network by reloading or switching connections.
Working outside-in like this saves time. You confirm your own code first, then the tooling, then the platform, so you never rotate a credential or file a support ticket for what was really a missing import.
If you have worked through build, dependencies, restart, browser, network, and runtime causes and the preview is still blank, step back.
Try opening the project in a fresh workspace, or duplicate it, to rule out corrupted environment state. Sometimes a new workspace simply behaves.
Search the official Firebase support channels and community forums for the specific error text you see. Others have often hit the same issue.
As a final validation, push to GitHub, clone locally, and run the app outside the browser. If it works locally, the problem is environmental, not in your code.
Almost never. A blank preview usually means a build failure, a stuck preview server, or a browser or network issue. Commit your work and troubleshoot calmly.
You likely have a runtime error. Open the browser developer console and look for exceptions during startup, such as a failed Firebase initialization.
Yes. Ad blockers and privacy extensions can block the preview's connections. Test in an incognito window to confirm, then whitelist the environment.
Check Google's and Firebase's official status and support channels. If the platform has an incident, waiting for resolution is the only fix.