Déboguer votre application dans Firebase Studio

Firebase Studio propose différentes manières 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és à 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 les langages les plus courants, via la console de débogage intégrée, et extensible avec les extensions de débogueur d'OpenVSX. Pour le débogage basé sur des points d'arrêt de votre code Web d'interface (comme JavaScript), vous pouvez continuer à utiliser les outils pour les développeurs intégrés de votre navigateur, tels que les outils de développement de 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 hot reload et le hot refresh, et offrent des fonctionnalités d'émulateur complètes.

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

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

La console Web intégrée vous aide à diagnostiquer les problèmes de votre application directement à partir de 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, suivez ces étapes, puis partagez 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 Cmd + , (sous macOS).
   2. Recherchez le paramètre 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 recharger 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: Show Web Preview ( : afficher l'aperçu Web).

3. Le panneau de la console Web est réduit par défaut 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 les outils pour les développeurs Chrome :

• Les erreurs JavaScript et les instructions console.log s'y affichent lorsque vous utilisez votre application.
  • Pour les erreurs et les avertissements, vous pouvez également obtenir de l'aide 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 de prompt en bas de l'écran.

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 les résultats et les suggestions. Vous pouvez exécuter des rapports Lighthouse directement depuis l'aperçu 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: Show Web Preview ( : afficher l'aperçu Web).

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

3. Dans le panneau Lighthouse, sélectionnez les catégories d'audit de votre choix. Vous pouvez choisir parmi des rapports d'audit sur les performances, l'accessibilité, la conformité avec les bonnes pratiques, le SEO et les performances des progressive web apps. Cliquez sur Analyser la page pour générer les rapports.

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

4. Une fois que les rapports s'affichent dans le panneau Lighthouse, vous pouvez examiner les résultats pour chaque catégorie d'audit ou passer d'une catégorie d'audit à 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 les langages de programmation les plus courants, ou ajoutez une extension de débogage depuis 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 des fichiers de configuration de lancement pour personnaliser le débogage, consultez Configuration du débogage de Visual Studio Code.

Déboguer avec Gemini

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

Bien que Gemini puisse écrire du code pour vous, il peut parfois produire 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 en fonction du message d'erreur, vous pouvez essayer l'une des techniques suivantes :

• Décrivez le problème : dans l'interface de chat, décrivez le problème que vous rencontrez de manière aussi claire et concise que possible. Bien que Gemini puisse avoir accès à des informations contextuelles telles que des messages d'erreur et des journaux, il se peut qu'il ne comprenne pas l'intégralité du contexte. Décrire le comportement ainsi que le message d'erreur peut aider Gemini à corriger les erreurs plus rapidement.

• Posez des questions spécifiques : n'hésitez pas à poser des questions directes sur votre code à Gemini. Par exemple, "Qu'est-ce qui pourrait provoquer une exception de pointeur nul dans cette fonction ?" ou "Comment puis-je éviter cette condition de concurrence ?"

• Décomposez les problèmes complexes : si vous êtes confronté à 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 blocs de code : lorsque vous partagez des extraits de code, utilisez des blocs de code pour vous assurer que le code est correctement formaté. Il est ainsi plus facile pour Gemini de lire et de comprendre votre code.

• Répétez et affinez : 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 est bloqué 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, il suffit de reformuler votre question pour que Gemini comprenne ce que vous demandez.

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

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

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