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ébogage d'OpenVSX. Pour le débogage basé sur des points d'arrêt de votre code Web frontend (comme JavaScript), vous pouvez continuer à utiliser les outils de développement intégrés de 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 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 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 Firebase Studio panneau d'aperçu Web 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 partagez vos commentaires après l'avoir essayée :
Ajoutez la console Web à votre Firebase Studio espace de travail :
- Ouvrez Settings (Paramètres) en cliquant sur
ou en appuyant sur
Ctrl + ,(sous Windows/Linux/ChromeOS) ouCmd + ,(sous macOS). - 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. - Actualisez la fenêtre de votre navigateur pour recharger votre Firebase Studio espace de travail.
- Ouvrez Settings (Paramètres) en cliquant sur
ou en appuyant sur
Ouvrez l'aperçu Web dans Firebase Studio : ouvrez la palette de commandes (
Cmd+Shift+Psous Mac ouCtrl+Shift+Psous ChromeOS, Windows ou Linux) et sélectionnez Firebase Studio : Show Web Preview.Le panneau de la console Web est réduit dans le panneau d'aperçu Web par défaut. 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.logs'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 Understand this error (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 et renvoie un rapport contenant des résultats et des suggestions. Vous pouvez exécuter des rapports Lighthouse directement à partir de l'aperçu Web dans Firebase Studio.
Ouvrez l'aperçu Web dans Firebase Studio : ouvrez la palette de commandes (
Cmd+Shift+Psous Mac ouCtrl+Shift+Psous ChromeOS, Windows ou Linux) et sélectionnez Firebase Studio : Show Web Preview (Firebase Studio : afficher l'aperçu Web).Cliquez sur l'icône
Run Lighthouse dans la barre d'outils de l'aperçu Web.
Dans
le panneau Lighthouse, sélectionnez les catégories d'audit souhaitées. Vous pouvez
choisir parmi des rapports d'audit des performances, de l'accessibilité,
de la conformité aux bonnes pratiques, du SEO, et des performances des applications Web
progressives. Cliquez sur Analyze page (Analyser la page) pour générer les rapports.La génération des rapports peut prendre quelques minutes.
Une fois les rapports affichés dans le panneau Lighthouse, vous pouvez examiner les résultats de chaque catégorie d'audit ou passer d'une catégorie d'audit à une 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 des fichiers de configuration de lancement pour personnaliser le débogage, consultez
Configuration du débogage dans Visual Studio Code.
Déboguer avec Gemini
Vous pouvez utiliser Gemini pour vous aider à déboguer votre code avec le chat dans votre Code espace de travail ou l'App Prototyping agent.
Bien que Gemini puisse écrire du code pour vous, il peut parfois aussi générer des erreurs. Lorsqu'il détecte une erreur, il tente de la corriger. Si vous constatez qu'il n'est pas en mesure de 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 la manière la plus claire et concise possible. Bien que Gemini puisse avoir accès à des informations contextuelles telles que les messages d'erreur et les journaux, il peut ne pas comprendre l'intégralité du contexte. Décrire le comportement avec le message d'erreur peut aider Gemini à corriger les erreurs plus rapidement.
Posez des questions spécifiques : n'hésitez pas à poser des questions Gemini directes à Gemini sur votre code. Par exemple, "Qu'est-ce qui pourrait être à l'origine d'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 rencontrez 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é. Cela permet à Gemini de lire et de comprendre plus facilement votre code.Gemini
Itérez et affinez : Gemini ne fournit pas toujours la solution idéale du premier coup. Examinez les réponses, posez des questions pour obtenir des éclaircissements et fournissez des informations supplémentaires si nécessaire.
Évitez les boucles d'invite : si Gemini est bloqué dans une boucle ou ne parvient pas à répondre à votre question, essayez de reformuler votre invite ou de fournir un contexte supplémentaire. Parfois, il suffit de reformuler votre question pour aider Gemini à comprendre ce que vous demandez.
Si la reformulation de votre invite 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 vous aider à vous débarrasser des idées fausses ou des hypothèses que Gemini a pu faire 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.