Mantenha tudo organizado com as coleções
Salve e categorize o conteúdo com base nas suas preferências.
O Firebase Studio oferece algumas maneiras diferentes de depurar seu aplicativo diretamente pelo espaço de trabalho. Para apps da Web e do Flutter, um console da Web e o Lighthouse são integrados diretamente ao espaço de trabalho. Os aplicativos do Flutter exibem prévias do Android e da Web para verificação pontual e teste do seu aplicativo enquanto você programa.
Uma depuração mais avançada e baseada em pontos de interrupção também está disponível para a maioria das linguagens comuns, pelo console de depuração integrado e extensível com extensões do depurador do OpenVSX. Para a depuração baseada em pontos de interrupção do código da Web do front-end (como JavaScript), é possível continuar usando as ferramentas para desenvolvedores integradas do navegador, como o Chrome DevTools.
Visualizar o app
O Firebase Studio exibe prévias dos aplicativos no espaço de trabalho para apps da Web (Chrome) e do Flutter (Android, Chrome). As prévias do Android e do Chrome permitem atualização e recarga automáticas e oferecem recursos completos de emulador.
Para saber mais sobre as prévias do Firebase Studio, consulte Visualizar o app.
Usar o console da Web integrado para prévias da Web
O console da Web integrado ajuda a diagnosticar problemas no aplicativo diretamente pela prévia da Web. É possível acessar o console da Web no painel da prévia da Web do Firebase Studio expandindo a barra na parte inferior.
Esse recurso é experimental e não está ativado por padrão. Para ativá-lo, siga estas etapas e compartilhe seu feedback depois de testá-lo:
Adicione o console da Web ao seu espaço de trabalho do Firebase Studio:
Abra as Configurações clicando em settings ou pressionando Ctrl + , (no Windows/Linux/ChromeOS) ou Cmd + , (no MacOS).
Localize a configuração Firebase Studio: ferramentas para desenvolvedores da Web e ative-a. Se você for editar diretamente o arquivo settings.json, adicione "IDX.webDevTools": true.
Atualize a janela do navegador para recarregar o espaço de trabalho do Firebase Studio.
Abra a prévia da Web no Firebase Studio: abra a paleta de comandos (Cmd+Shift+P no Mac ou Ctrl+Shift+P no ChromeOS, Windows ou Linux) e selecione Firebase Studio: mostrar prévia da Web.
O painel do console da Web fica minimizado no painel da prévia da Web por padrão.
Clique na barra ou arraste-o para cima para abri-lo.
O painel do console da Web na prévia da Web do Firebase Studio funciona de maneira semelhante a outros consoles, como aquele disponível no Chrome DevTools:
Erros de JavaScript e instruções console.log serão exibidos nele enquanto você usa seu aplicativo.
Para erros e avisos, você também tem a opção de receber assistência do Gemini selecionando o botão Entender este erro à direita da mensagem de erro.
É possível avaliar o JavaScript arbitrário no contexto da sua prévia da Web usando a barra de comandos na parte inferior.
Executar o Lighthouse para prévias da Web
O Lighthouse audita seu aplicativo com base nas categorias de auditoria específicas selecionadas e retorna um relatório com descobertas e sugestões. É possível executar relatórios do Lighthouse diretamente pela prévia da Web no Firebase Studio.
Abra a prévia da Web no Firebase Studio: abra a paleta de comandos (Cmd+Shift+P no Mac ou Ctrl+Shift+P no ChromeOS, Windows ou Linux) e selecione Firebase Studio: mostrar prévia da Web.
Clique no ícone Executar Lighthouse na barra de ferramentas da prévia da Web.
A geração dos relatórios pode levar alguns minutos.
Depois que os relatórios forem exibidos no painel do Lighthouse, analise as descobertas de cada categoria de auditoria ou alterne entre elas clicando na pontuação e no nome da categoria.
Usar o console de depuração
O Firebase Studio tem o console de depuração integrado do Code OSS. Use esse console para depurar seu aplicativo com depuradores prontos para uso na maioria das linguagens de programação mais comuns ou adicione uma extensão de depuração pelo OpenVSX.
Para personalizar a experiência de depuração, adicione um arquivo .vscode/launch.json ao seu espaço de trabalho e especifique configurações de inicialização personalizadas. Saiba mais sobre como usar arquivos de configuração de inicialização para personalizar a depuração em Configuração de depuração do Visual Studio Code.
Depurar com o Gemini
É possível usar o Gemini no Firebase para ajudar a depurar o código pela conversa no seu espaço de trabalho do Code ou no App Prototyping agent.
Embora o Gemini possa escrever código por você, às vezes ele também pode produzir erros. Quando detecta um erro, ele tenta corrigi-lo. Se você achar que não é possível resolver o problema devido à mensagem de erro, tente algumas destas técnicas:
Descreva o problema: na interface da conversa, descreva o problema que está enfrentando da forma mais clara e concisa possível.
Embora o Gemini possa ter acesso ao contexto, como mensagens de erro e registros, ele pode não o entender por completo. Descrever o comportamento com a mensagem de erro pode ajudar o Gemini a corrigir erros mais rapidamente.
Faça perguntas específicas: não tenha medo de fazer perguntas diretas sobre o código ao Gemini. Por exemplo, "O que pode estar causando uma exceção de ponteiro nulo nesta função?" ou "Como posso evitar esta disputa?"
Divida problemas complexos: se você estiver lidando com um problema complexo, divida-o em partes menores e mais fáceis de gerenciar. Peça para o Gemini ajudar a depurar cada parte separadamente e pensar nos problemas passo a passo.
Use delimitadores de código: ao compartilhar snippets de código, use delimitadores de código para garantir que o código seja formatado corretamente. Isso facilita a leitura e a compreensão do código pelo Gemini.
Itere e refine: o Gemini nem sempre sugere a solução perfeita na primeira tentativa. Analise as respostas, faça perguntas para esclarecimento e dê mais informações conforme necessário.
Evite repetições de comandos: se o Gemini ficar preso em uma repetição ou não conseguir responder à pergunta, tente reformular o comando ou dar mais contexto. Às vezes, basta reformular sua pergunta para ajudar o Gemini a entender o que você quer.
Se reformular o comando não resolver a repetição, tente estas técnicas:
Inicie uma nova conversa: se você estiver usando a conversa do Gemini no Firebase no seu espaço de trabalho do Code, inicie uma nova sessão de conversa para redefinir o contexto do Gemini. Isso pode ajudar a evitar equívocos ou suposições que o Gemini tenha produzido na conversa anterior.
Contraponha-se com exemplos: se o Gemini gerar suposições incorretas, contraponha-se com exemplos para ajudá-lo a entender o comportamento correto.
[[["Fácil de entender","easyToUnderstand","thumb-up"],["Meu problema foi resolvido","solvedMyProblem","thumb-up"],["Outro","otherUp","thumb-up"]],[["Não contém as informações de que eu preciso","missingTheInformationINeed","thumb-down"],["Muito complicado / etapas demais","tooComplicatedTooManySteps","thumb-down"],["Desatualizado","outOfDate","thumb-down"],["Problema na tradução","translationIssue","thumb-down"],["Problema com as amostras / o código","samplesCodeIssue","thumb-down"],["Outro","otherDown","thumb-down"]],["Última atualização 2025-08-22 UTC."],[],[],null,["Firebase Studio offers a few different ways to debug your app, directly\nfrom your workspace. For web and Flutter apps, a web console and\n[Lighthouse](https://developer.chrome.com/docs/lighthouse/overview)\nare directly integrated into the workspace. Flutter apps offer Android and web\npreviews to spot-check and test your app while you code.\n\nRicher, breakpoint-based debugging is also available for most common languages,\nthrough the built-in Debug Console, and extensible with [Debugger extensions\nfrom OpenVSX](https://open-vsx.org/?category=Debuggers). For\nbreakpoint-based debugging of your frontend web code (like JavaScript), you can\ncontinue using your browser's built-in developer tools, like\n[Chrome's DevTools](https://developer.chrome.com/docs/devtools).\n\nPreview your app\n\nFirebase Studio includes\n[in-workspace app previews](/docs/studio/preview-apps) for web apps (Chrome)\nand Flutter apps (Android, Chrome). The\nAndroid and Chrome previews support hot reload and hot refresh, and offer full\nemulator capabilities.\n\nTo learn more about Firebase Studio previews, see\n[Preview your app](/docs/studio/preview-apps).\n\nUse the integrated web console for web previews\n\nThe integrated web console helps you diagnose issues in your app directly\nfrom the web preview. You can access the web console in the\nFirebase Studio web preview panel by expanding the bar at the bottom.\n\nNote that this feature is experimental and isn't enabled by default. To\nturn it on, follow these steps, and [share your\nfeedback](/support/troubleshooter/studio) after\nyou've tried it out:\n\n1. Add the web console to your Firebase Studio workspace:\n\n 1. Open **Settings** by clicking settings or pressing `Ctrl + ,` (on Windows/Linux/ChromeOS) or `Cmd + ,` (on MacOS).\n 2. Find the **Firebase Studio: Web Dev Tools** setting and enable it. If you're editing your `settings.json` file directly, you can add `\"IDX.webDevTools\": true`.\n 3. Refresh your browser window to reload your Firebase Studio workspace.\n2. Open the web preview in Firebase Studio: Open the command palette\n (`Cmd+Shift+P` on Mac or `Ctrl+Shift+P` on ChromeOS, Windows, or Linux)\n and select **Firebase Studio: Show Web Preview**.\n\n3. The web console panel is minimized within the web preview panel by default.\n Click the bar or drag it up to expand it.\n\nThe web console panel in the Firebase Studio web preview works\nsimilarly to other consoles, such as the one available in\n[Chrome DevTools](https://developer.chrome.com/docs/devtools):\n\n- JavaScript errors and `console.log` statements will appear there as you use your app.\n - For errors and warnings, you also have the option to get assistance from Gemini by selecting the **Understand this error** button at the right of the error message.\n- You can evaluate arbitrary JavaScript in the context of your web preview by using the prompt bar at the bottom.\n\nRun Lighthouse for web previews\n\n[Lighthouse](https://developer.chrome.com/docs/lighthouse/overview)\naudits your app based on the specific audit categories you select, and returns\na report with findings and suggestions. You can run Lighthouse reports directly\nfrom the web preview in Firebase Studio.\n\n1. Open the web preview in Firebase Studio: Open the command palette\n (`Cmd+Shift+P` on Mac or `Ctrl+Shift+P` on ChromeOS, Windows, or\n Linux) select **Firebase Studio: Show Web Preview**.\n\n2. Click the\n **Run Lighthouse** icon from the web preview toolbar.\n\n3. In\n the Lighthouse panel, select the audit categories you want. You can\n choose from reports auditing [performance](https://developer.chrome.com/docs/lighthouse/performance/performance-scoring), [accessibility](https://developer.chrome.com/docs/lighthouse/accessibility/scoring),\n [conformance with best practices](https://developer.chrome.com/docs/lighthouse/best-practices/doctype), [SEO](https://developer.chrome.com/docs/lighthouse/seo/meta-description), and [Progressive Web\n App performance](https://developer.chrome.com/docs/lighthouse/pwa/load-fast-enough-for-pwa). Click **Analyze page** to generate the reports.\n\n The reports might take a few minutes to generate.\n4. After the reports appear in the Lighthouse panel, you can review the\n findings for each audit category, or switch between audit categories by\n clicking the score and category name.\n\nUse the Debug Console\n\nFirebase Studio includes the built-in Debug Console from Code OSS. Use this\nconsole to debug your app with out-of-the-box debuggers for most common\nprogramming languages, or add a debugging extension from\n[OpenVSX](https://open-vsx.org/?category=Debuggers).\n\nTo customize your debugging experience, you can also add a `.vscode/launch.json`\nfile to your workspace and specify custom launch configurations. Learn more\nabout using launch configuration files to customize debugging at\n[Visual Studio Code debug\nconfiguration](https://github.com/microsoft/vscode-docs/blob/main/docs/debugtest/debugging-configuration.md).\n\nDebug with Gemini\n\nYou can use Gemini in Firebase to help you debug your code with\nchat in your **Code** workspace\nor the App Prototyping agent.\n\nWhile Gemini can write code for you, it might sometimes also\nproduce errors. When it detects an error, it will attempt\nto fix it. If you find that it isn't able to resolve the issue given\nthe error message, you can try some of the following techniques:\n\n- **Describe the issue:** In the chat interface, describe the\n problem you're encountering as clearly and concisely as possible.\n While Gemini might have access to context like error messages\n and logs, it might not understand the full context. Describing the behavior\n along with the error message can help Gemini fix errors\n faster.\n\n- **Ask specific questions:** Don't be afraid to ask Gemini\n direct questions about your code. For example, \"What could be causing a\n null pointer exception in this function?\" or \"How can I prevent\n this race condition?\"\n\n- **Break down complex problems:** If you're dealing with a complex\n issue, break it down into smaller, more manageable parts. Ask\n Gemini to help you debug each part separately and think\n through problems step-by-step.\n\n- **Use code fences:** When sharing code snippets, use code fences\n to ensure that the code is properly formatted. This makes it easier\n for Gemini to read and understand your code.\n\n- **Iterate and refine:** Gemini may not always provide the perfect\n solution on the first try. Review the responses, ask clarifying\n questions, and provide additional information as needed.\n\n- **Avoid prompting loops:** If Gemini gets stuck in a loop or is\n unable to answer your question, try rephrasing your prompt or\n providing additional context. Sometimes, just rewording your\n question can help Gemini understand what you're asking.\n\n If rephrasing your prompt doesn't resolve the loop, try\n the following techniques:\n - **Start a new chat:** If you're using Gemini in Firebase\n chat in your Code\n workspace, start a new chat session to reset\n Gemini's context. This can help break free from any\n misconceptions or assumptions that Gemini may have made\n in the previous conversation.\n\n - **Provide counter-examples:** If Gemini is making incorrect\n assumptions, provide counter-examples to help it understand\n the correct behavior."]]
Executar Lighthouse na barra de ferramentas da prévia da Web.
No painel do Lighthouse, selecione as categorias de auditoria que você quer. Você possível escolher entre relatórios de auditoria de desempenho, acessibilidade, conformidade com práticas recomendadas, SEO e desempenho de App Web Progressivo. Clique em Analisar página para gerar os relatórios.