Firebase Studio offers a few different ways to debug your app, directlyfrom your workspace. For web and Flutter apps, a web console andLighthouse are directly integrated into the workspace. Flutter apps offer Android and webpreviews to spot-check and test your app while you code.

Richer, breakpoint-based debugging is also available for most common languages,through the built-in Debug Console, and extensible withDebugger extensionsfrom OpenVSX. Forbreakpoint-based debugging of your frontend web code (like JavaScript), you cancontinue using your browser's built-in developer tools, likeChrome's DevTools.

Preview your app

Firebase Studio includesin-workspace app previews for web apps (Chrome)and Flutter apps (Android, Chrome). TheAndroid and Chrome previews support hot reload and hot refresh, and offer fullemulator capabilities.

To learn more aboutFirebase Studio previews, seePreview your app.

Use the integrated web console for web previews

The integrated web console helps you diagnose issues in your app directlyfrom the web preview. You can access the web console in theFirebase Studio web preview panel by expanding the bar at the bottom.

Note that this feature is experimental and isn't enabled by default. Toturn it on, follow these steps, andshare yourfeedback afteryou've tried it out:

1. Add the web console to yourFirebase Studio workspace:

   1. OpenSettings by clickingsettings or pressingCtrl + , (on Windows/Linux/ChromeOS) orCmd + , (on MacOS).
   2. Find theFirebase Studio: Web Dev Tools setting and enableit. If you're editing yoursettings.json file directly, you canadd"IDX.webDevTools": true.
   3. Refresh your browser window to reload yourFirebase Studioworkspace.

2. Open the web preview inFirebase Studio: Open the command palette(Cmd+Shift+P on Mac orCtrl+Shift+P on ChromeOS, Windows, or Linux)and selectFirebase Studio: Show Web Preview.

3. The web console panel is minimized within the web preview panel by default.Click the bar or drag it up to expand it.

The web console panel in theFirebase Studio web preview workssimilarly to other consoles, such as the one available inChrome DevTools:

• JavaScript errors andconsole.log statements will appear there as you useyour app.
  • For errors and warnings, you also have the option to getassistance fromGemini byselecting theUnderstand this error button at the right of theerror message.
• You can evaluate arbitrary JavaScript in the context of your webpreview by using the prompt bar at the bottom.

Run Lighthouse for web previews

Lighthouse audits your app based on the specific audit categories you select, and returnsa report with findings and suggestions. You can run Lighthouse reports directlyfrom the web preview inFirebase Studio.

1. Open the web preview inFirebase Studio: Open the command palette(Cmd+Shift+P on Mac orCtrl+Shift+P on ChromeOS, Windows, orLinux) selectFirebase Studio: Show Web Preview.

2. Click theRun Lighthouse icon from the web preview toolbar.

3. Inthe Lighthouse panel, select the audit categories you want. You canchoose from reports auditingperformance,accessibility,conformance with best practices,SEO, andProgressive WebApp performance. ClickAnalyze page to generate the reports.

   The reports might take a few minutes to generate.

4. After the reports appear in the Lighthouse panel, you can review thefindings for each audit category, or switch between audit categories byclicking the score and category name.

Use the Debug Console

Firebase Studio includes the built-in Debug Console from Code OSS. Use thisconsole to debug your app with out-of-the-box debuggers for most commonprogramming languages, or add a debugging extension fromOpenVSX.

To customize your debugging experience, you can also add a.vscode/launch.jsonfile to your workspace and specify custom launch configurations. Learn moreabout using launch configuration files to customize debugging atVisual Studio Code debugconfiguration.

Debug withGemini

You can use Gemini inFirebase to help you debug your code withchat in yourCode workspaceor theApp Prototyping agent.

WhileGemini can write code for you, it might sometimes alsoproduce errors. When it detects an error, it will attemptto fix it. If you find that it isn't able to resolve the issue giventhe error message, you can try some of the following techniques:

• Describe the issue: In the chat interface, describe theproblem you're encountering as clearly and concisely as possible.WhileGemini might have access to context like error messagesand logs, it might not understand the full context. Describing the behavioralong with the error message can helpGemini fix errorsfaster.

• Ask specific questions: Don't be afraid to askGeminidirect questions about your code. For example, "What could be causing anull pointer exception in this function?" or "How can I preventthis race condition?"

• Break down complex problems: If you're dealing with a complexissue, break it down into smaller, more manageable parts. AskGemini to help you debug each part separately and thinkthrough problems step-by-step.

• Use code fences: When sharing code snippets, use code fencesto ensure that the code is properly formatted. This makes it easierforGemini to read and understand your code.

• Iterate and refine:Gemini may not always provide the perfectsolution on the first try. Review the responses, ask clarifyingquestions, and provide additional information as needed.

• Avoid prompting loops: IfGemini gets stuck in a loop or is unable to answer your question, try rephrasing your prompt or providing additional context. Sometimes, just rewording your question can helpGemini understand what you're asking.

  If rephrasing your prompt doesn't resolve the loop, try the following techniques:

  • Start a new chat: If you're using Gemini inFirebase chat in yourCode workspace, start a new chat session to resetGemini's context. This can help break free from any misconceptions or assumptions thatGemini may have made in the previous conversation.

  • Provide counter-examples: IfGemini is making incorrect assumptions, provide counter-examples to help it understand the correct behavior.