Depurar seu app no Firebase Studio

O Firebase Studio oferece algumas maneiras diferentes de depurar seu app diretamente no 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 apps do Flutter oferecem visualizações do Android e da Web para verificar e testar o app enquanto você programa.

A depuração mais rica 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), você pode continuar usando as ferramentas para desenvolvedores integradas do navegador, como Chrome DevTools.

Visualizar o app

Firebase Studio inclui visualizações de apps no espaço de trabalho para apps da Web (Chrome) e do Flutter (Android, Chrome). As visualizações do Android e do Chrome oferecem suporte a recarga e atualização em tempo real e oferecem recursos completos do emulador.

Para saber mais sobre as prévias de Firebase Studio, consulte Visualizar seu app.

Usar o console da Web integrado para visualizações da Web

Barra do console minimizada na visualização da Web do Firebase Studio

O console da Web integrado ajuda a diagnosticar problemas no seu app diretamente na visualização da Web. É possível acessar o console da Web no painel de visualização da Web Firebase Studio expandindo a barra na parte de baixo.

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:

  1. Adicione o console da Web ao seu espaço de trabalho Firebase Studio:

    1. Abra as Configurações clicando em ou pressionando Ctrl + , (no Windows/Linux/ChromeOS) ou Cmd + , (no MacOS).
    2. Encontre a configuração Firebase Studio: Web Dev Tools e ative-a. Se você estiver editando o arquivo settings.json diretamente, poderá adicionar "IDX.webDevTools": true.
    3. Atualize a janela do navegador para recarregar o espaço de trabalho Firebase Studio.

  2. Abra a visualização da Web em 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: Show Web Preview.

  3. O painel do console da Web fica minimizado no painel de visualização da Web por padrão. Clique na barra ou arraste para cima para abrir.

O painel do console da Web na visualização da Web Firebase Studio funciona de maneira semelhante a outros consoles, como o disponível no Chrome DevTools:

  • Erros de JavaScript e instruções console.log vão aparecer lá conforme você usa o app.
    • Para erros e avisos, você também pode receber assistência do Gemini selecionando o botão Understand this error à direita da mensagem de erro.
  • É possível avaliar JavaScript arbitrário no contexto da sua pré-visualização da Web usando a barra de comando na parte de baixo.

Executar o Lighthouse para visualizações da Web

O Lighthouse faz auditorias no seu app 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 na visualização da Web em Firebase Studio.

  1. Abra a visualização da Web em 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: Show Web Preview.

  2. Clique no ícone imagem de um ícone de verificação de velocidade Run Lighthouse na barra de ferramentas da visualização da Web.

  3. Imagem do painel do Lighthouse no Firebase Studio No painel do Lighthouse, selecione as categorias de auditoria que você quer. É possível escolher entre relatórios de auditoria de performance, acessibilidade, conformidade com as práticas recomendadas, SEO e performance de Progressive Web Apps. Clique em Analisar página para gerar os relatórios.

    A geração dos relatórios pode levar alguns minutos.

  4. Depois que os relatórios aparecem no painel do Lighthouse, você pode analisar as descobertas de cada categoria de auditoria ou alternar entre elas clicando na pontuação e no nome da categoria.

Usar o console de depuração

O Firebase Studio inclui o console de depuração integrado do Code OSS. Use esse console para depurar seu app com depuradores prontos para uso na maioria das linguagens de programação mais comuns ou adicione uma extensão de depuração do OpenVSX.

Para personalizar sua experiência de depuração, você também pode adicionar um arquivo .vscode/launch.json ao seu espaço de trabalho e especificar 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 Gemini

Você pode usar o Gemini no Firebase para ajudar a depurar seu código com chat no espaço de trabalho Code ou no App Prototyping agent.

Embora o Gemini possa escrever código para você, às vezes ele também pode produzir erros. Quando ele detecta um erro, ele tenta corrigi-lo. Se você descobrir que não é possível resolver o problema devido à mensagem de erro, tente algumas destas técnicas:

  • Descreva o problema:na interface de chat, descreva o problema que você está enfrentando da forma mais clara e concisa possível. Embora o Gemini possa ter acesso a contextos, como mensagens de erro e registros, ele pode não entender o contexto 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 Gemini diretas sobre o código. Por exemplo, "O que pode estar causando uma exceção de ponteiro nulo nessa função?" ou "Como posso evitar essa condição de corrida?"

  • Divida problemas complexos:se você estiver lidando com um problema complexo, divida-o em partes menores e mais fáceis de gerenciar. Peça Gemini para ajudar a depurar cada parte separadamente e pensar nos problemas passo a passo.

  • Use cercas de código:ao compartilhar snippets de código, use cercas de código para garantir que o código esteja formatado corretamente. Isso facilita a leitura e a compreensão do código por Gemini.

  • Iterar e refinar:o Gemini nem sempre oferece a solução perfeita na primeira tentativa. Analise as respostas, faça perguntas de esclarecimento e forneça mais informações conforme necessário.

  • Evite loops de solicitação:se o Gemini ficar preso em um loop ou não conseguir responder à pergunta, tente reformular a solicitação ou fornecer mais contexto. Às vezes, apenas reformular sua pergunta pode ajudar o Gemini a entender o que você está perguntando.

    Se reformular a instrução não resolver o loop, tente estas técnicas:

    • Iniciar uma nova conversa:se você estiver usando o Gemini no chat Firebase no seu espaço de trabalho Code, inicie uma nova sessão de chat para redefinir o contexto de Gemini. Isso pode ajudar a se livrar de qualquer equívoco ou suposição que Gemini possa ter feito na conversa anterior.

    • Fornecer contraexemplos:se o Gemini estiver fazendo suposições incorretas, forneça contraexemplos para ajudar a entender o comportamento correto.