Déboguer votre application dans Project IDX

Project IDX propose plusieurs façons de déboguer votre application, directement depuis votre espace de travail. Les applications Web et Flutter proposent Lighthouse et Chrome DevTools dans l'aperçu sur le Web de Chrome dans votre espace de travail. Les applications Flutter proposent des aperçus iOS, Android et Web pour vérifier et tester votre application pendant que vous codez. La console de débogage intégrée est compatible avec le débogage automatique pour les langages les plus courants. Vous pouvez également définir le débogage personnalisé dans un fichier launch.json de votre espace de travail.

Prévisualiser votre application

IDX inclut des aperçus d'applications dans l'espace de travail pour les applications Web (Chrome et Safari mobile) et les applications Flutter (iOS, Android, Chrome). Les aperçus Android et Chrome permettent l'actualisation à chaud et l'actualisation à chaud, et offrent des fonctionnalités complètes de l'émulateur. Les simulateurs Safari et iOS offrent des aperçus visuels et interactifs sur divers appareils iOS, et simulent l'expérience iOS pour les applications mobiles et Web.

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

Utiliser les outils pour les développeurs Chrome pour les aperçus Web (expérimental)

Les outils pour les développeurs Chrome vous permettent de diagnostiquer les problèmes de votre application directement à partir de la version preview sur le Web. Vous pouvez accéder aux outils pour les développeurs Chrome dans le panneau d'aperçu sur le Web d'IDX de la même manière que vous ouvrez les outils de développement dans votre navigateur Chrome.

Cette fonctionnalité est expérimentale pendant que nous travaillons à la création d'une expérience utilisateur idéale. Envoyez-nous vos commentaires pour nous aider à l'améliorer.

1. Ajoutez les outils pour les développeurs Chrome à votre espace de travail IDX:

   1. Ouvrez la fenêtre Paramètres en cliquant sur l'icône en forme de roue dentée ou en appuyant sur Ctrl + , (sous Windows/Linux/ChromeOS) ou Cmd + , (sous MacOS).
   2. Recherchez le paramètre IDX: outils de développement Web et sélectionnez Activer les outils pour les développeurs Chrome pour l'aperçu sur le Web (actualisation du navigateur requise). Si vous utilisez un fichier settings.json, vous pouvez également définir "IDX.webDevTools": true.
   3. Actualisez la fenêtre de votre navigateur et actualisez votre espace de travail IDX.

2. Ouvrez l'aperçu sur le Web dans Project IDX: ouvrez la palette de commandes (Cmd+Maj+P sur Mac ou Ctrl+Maj+P sous ChromeOS, Windows ou Linux), puis sélectionnez Project IDX: Show Web Preview (Afficher l'aperçu sur le Web).

3. Le panneau "Outils de développement" est réduit dans le panneau d'aperçu sur le Web. Cliquez sur la barre DevTools pour développer le panneau, puis utilisez les outils de développement dans le panneau d'aperçu sur le Web.

Utilisez le panneau "DevTools" dans l'aperçu sur le Web d'IDX de la même manière que pour déboguer votre application dans le navigateur Chrome.

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 à partir de la version preview sur le Web dans le projet IDX.

1. Ouvrez l'aperçu sur le Web dans Project IDX: ouvrez la palette de commandes (Cmd+Maj+P sur Mac ou Ctrl+Maj+P sous ChromeOS, Windows ou Linux), puis sélectionnez Project IDX: Show Web Preview (Afficher l'aperçu sur le Web).

2. Cliquez sur l'icône de vérification des performances dans la barre d'outils d'aperçu sur le Web.

3. Dans le panneau Lighthouse, sélectionnez les catégories d'audit de votre choix. Vous avez le choix entre des rapports d'audit sur les performances, l'accessibilité, la conformité aux 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 apparaissent 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

Project IDX 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 VSCode Marketplace.

Si vous souhaitez écrire un débogage personnalisé, ajoutez un fichier launch.json à votre espace de travail.