Déboguer votre application dans Firebase Studio

Firebase Studio propose plusieurs façons de déboguer votre application, directement depuis votre espace de travail. Pour les applications Web et Flutter, une console Web et Lighthouse sont directement intégrées à l'espace de travail. Les applications Flutter proposent des aperçus Android et Web pour vérifier et tester votre application pendant que vous codez.

Un débogage plus riche, basé sur des points d'arrêt, est également disponible pour la plupart des langages courants, via la console de débogage intégrée, et extensible avec les extensions de débogueur d'OpenVSX. Pour déboguer votre code Web frontal (comme JavaScript) à l'aide de points d'arrêt, vous pouvez continuer à utiliser les outils pour les développeurs intégrés à votre navigateur, comme les Outils pour les développeurs Chrome.

Prévisualiser votre application

Firebase Studio inclut des aperçus d'applications dans l'espace de travail pour les applications Web (Chrome) et les applications Flutter (Android, Chrome). Les aperçus Android et Chrome sont compatibles avec le rechargement à chaud et l'actualisation à chaud, et offrent des fonctionnalités d'émulateur complètes.

Pour en savoir plus sur les aperçus Firebase Studio, consultez la section Prévisualiser votre application.

Utiliser la console Web intégrée pour les aperçus Web

Barre de console réduite dans l'aperçu Web de Firebase Studio

La console Web intégrée vous aide à diagnostiquer les problèmes de votre application directement depuis l'aperçu Web. Vous pouvez accéder à la console Web dans le panneau d'aperçu Web Firebase Studio en développant la barre en bas.

Notez que cette fonctionnalité est expérimentale et n'est pas activée par défaut. Pour l'activer, procédez comme suit et faites-nous part de vos commentaires après l'avoir essayé:

  1. Ajoutez la console Web à votre espace de travail Firebase Studio:

    1. Ouvrez les paramètres en cliquant sur  ou en appuyant sur Ctrl + , (sous Windows/Linux/ChromeOS) ou sur Cmd + , (sous macOS).
    2. Recherchez le paramètre Firebase Studio : Web Dev Tools (Firebase Studio : Outils de développement Web) et activez-le. Si vous modifiez directement votre fichier settings.json, vous pouvez ajouter "IDX.webDevTools": true.
    3. Actualisez la fenêtre de votre navigateur pour actualiser votre espace de travail Firebase Studio.

  2. Ouvrez l'aperçu Web dans Firebase Studio: ouvrez la palette de commandes (Cmd+Shift+P sur Mac ou Ctrl+Shift+P sur ChromeOS, Windows ou Linux), puis sélectionnez Firebase Studio: Afficher l'aperçu Web.

  3. Par défaut, le panneau de la console Web est réduit dans le panneau d'aperçu Web. Cliquez sur la barre ou faites-la glisser vers le haut pour la développer.

Le panneau de la console Web dans l'aperçu Web Firebase Studio fonctionne de la même manière que les autres consoles, comme celle disponible dans Chrome DevTools:

  • Les erreurs JavaScript et les instructions console.log s'affichent lorsque vous utilisez votre application.
    • En cas d'erreurs et d'avertissements, vous pouvez également obtenir de l'aide auprès de Gemini en sélectionnant le bouton Comprendre cette erreur à droite du message d'erreur.
  • Vous pouvez évaluer du code JavaScript arbitraire dans le contexte de votre aperçu Web à l'aide de la barre d'invite en bas.

Exécuter Lighthouse pour les aperçus Web

Lighthouse audite votre application en fonction des catégories d'audit spécifiques que vous sélectionnez, puis renvoie un rapport contenant des résultats et des suggestions. Vous pouvez exécuter des rapports Lighthouse directement depuis l'aperçu sur le Web dans Firebase Studio.

  1. Ouvrez l'aperçu Web dans Firebase Studio: ouvrez la palette de commandes (Cmd+Shift+P sur Mac ou Ctrl+Shift+P sur ChromeOS, Windows ou Linux), puis sélectionnez Firebase Studio: Afficher l'aperçu Web.

  2. Cliquez sur l'icône image d'une icône de contrôle de la vitesse Exécuter Lighthouse dans la barre d'outils d'aperçu sur le Web.

  3. image du panneau Lighthouse dans Firebase Studio Dans le panneau Lighthouse, sélectionnez les catégories d'audit souhaitées. Vous pouvez choisir parmi des rapports qui auditent les performances, l'accessibilité, la conformité aux bonnes pratiques, le référencement naturel et les performances des applications Web progressives. Cliquez sur Analyser la page pour générer les rapports.

    La génération des rapports peut prendre quelques minutes.

  4. Une fois les rapports affichés dans le panneau Lighthouse, vous pouvez consulter les résultats de chaque catégorie d'audit ou passer d'une catégorie à l'autre en cliquant sur le score et le nom de la catégorie.

Utiliser la console de débogage

Firebase Studio inclut la console de débogage intégrée de Code OSS. Utilisez cette console pour déboguer votre application avec des débogueurs prêts à l'emploi pour la plupart des langages de programmation courants, ou ajoutez une extension de débogage à partir d'OpenVSX.

Pour personnaliser votre expérience de débogage, vous pouvez également ajouter un fichier .vscode/launch.json à votre espace de travail et spécifier des configurations de lancement personnalisées. Pour en savoir plus sur l'utilisation de fichiers de configuration de lancement pour personnaliser le débogage, consultez la section Configuration de débogage de Visual Studio Code.

Déboguer avec Gemini

Vous pouvez utiliser Gemini dans Firebase pour vous aider à déboguer votre code avec le chat dans votre espace de travail Code ou le App Prototyping agent.

Bien que Gemini puisse écrire du code à votre place, il peut parfois également générer des erreurs. Lorsqu'il détecte une erreur, il tente de la corriger. Si vous constatez qu'il ne parvient pas à résoudre le problème indiqué par le message d'erreur, vous pouvez essayer certaines des techniques suivantes:

  • Décrivez le problème:dans l'interface de chat, décrivez le problème que vous rencontrez aussi clairement et concisement que possible. Bien que Gemini puisse avoir accès au contexte, comme aux messages d'erreur et aux journaux, il est possible qu'il ne comprenne pas le contexte complet. Décrire le comportement avec le message d'erreur peut aider Gemini à résoudre les erreurs plus rapidement.

  • Posez des questions spécifiques:n'hésitez pas à poser des questions directes sur votre code.Gemini Par exemple, "Quelle pourrait être la cause d'une exception de pointeur nul dans cette fonction ?" ou "Comment puis-je éviter cette condition de course ?"

  • Décomposez les problèmes complexes:si vous faites face à un problème complexe, décomposez-le en parties plus petites et plus faciles à gérer. Demandez à Gemini de vous aider à déboguer chaque partie séparément et à réfléchir aux problèmes étape par étape.

  • Utilisez des accolades:lorsque vous partagez des extraits de code, utilisez des accolades pour vous assurer que le code est correctement mis en forme. Cela permet à Gemini de lire et de comprendre plus facilement votre code.

  • Itérer et affiner:Gemini ne fournit pas toujours la solution parfaite du premier coup. Examinez les réponses, posez des questions de clarification et fournissez des informations supplémentaires si nécessaire.

  • Évitez les boucles de requêtes:si Gemini se bloque dans une boucle ou ne parvient pas à répondre à votre question, essayez de reformuler votre requête ou de fournir un contexte supplémentaire. Parfois, reformuler votre question peut aider Gemini à comprendre ce que vous demandez.

    Si reformuler votre requête ne résout pas la boucle, essayez les techniques suivantes:

    • Démarrez une nouvelle discussion:si vous utilisez Gemini dans la discussion Firebase de votre espace de travail Code, démarrez une nouvelle session de chat pour réinitialiser le contexte de Gemini. Cela peut vous aider à vous libérer de toute idée fausse ou hypothèse que Gemini a pu formuler lors de la conversation précédente.

    • Fournissez des contre-exemples:si Gemini émet des hypothèses incorrectes, fournissez des contre-exemples pour l'aider à comprendre le comportement correct.