Comment utiliser la console de débogage de l'application

Posté le 12. décembre 2023 par Jan Bunk


Si vous êtes un développeur web, vous connaissez probablement les outils de développement du navigateur :

Une capture d'écran des outils de développement d'un navigateur.

C'est probablement l'outil le plus important pour déboguer les erreurs sur votre site web.

Les applications créées avec webtoapp.design fonctionnent généralement sans problème, du moins elles se comportent de manière presque identique à la façon dont votre site web se comporte dans Chrome sur Android et Safari sur iOS. Par conséquent, si votre site web fonctionne correctement, vous ne devriez pas rencontrer trop de problèmes.

Cependant, il se peut que vous ressentiez parfois le besoin d'enquêter sur un comportement inattendu de votre application. Dans ce cas, vous pouvez ouvrir la console intégrée dans votre application.

Comment ouvrir la console

L'ouverture de la console est intentionnellement masquée, afin que les utilisateurs réguliers de l'application ne l'ouvrent pas accidentellement et ne s'y perdent pas. Toutefois, même s'ils tombent dessus par hasard, il leur suffit de fermer et de rouvrir leur application pour s'en débarrasser.

Ouverture de la console à partir de l'écran des paramètres

  1. Commencez par ouvrir les paramètres de votre application.
  2. Cliquez sur la carte "About (À propos de)". Une capture d'écran de l'écran des paramètres d'une application.
  3. Double-cliquez sur la petite image dans la boîte de dialogue pour ouvrir la console de développement. Une capture d'écran de la boîte de dialogue "À propos" d'une application.
  4. Vous pouvez maintenant fermer la boîte de dialogue et les paramètres et utiliser la console tout en naviguant dans votre application. Une capture d'écran de la console du navigateur ouverte.

Ouverture de la console à partir de la boîte de dialogue Rapport d'erreurs

Si votre application ne permet pas d'accéder aux paramètres, vous pouvez également ouvrir la console par le biais de la boîte de dialogue contenant les informations de diagnostic :

  1. Ouvrez la boîte de dialogue Rapport d’erreurs en secouant votre appareil.
  2. Double-cliquez sur le titre de la boîte de dialogue. Une capture d'écran de la boîte de dialogue Rapport d'erreurs avec le titre mis en évidence.
  3. Vous pouvez maintenant fermer la boîte de dialogue et utiliser la console tout en naviguant dans votre application.

Fonctionnalités de la console de l'application

Ouvrir l'URL

Ouvrez n'importe quel site web en saisissant l'URL dans la boîte de dialogue. Cela peut être utile pour naviguer vers des pages de test secrètes (aucun lien ne mène à ces pages sur le site web principal) ou vers des environnements d'essai que vous pourriez avoir.

Exécuter JS

Cette fonction exécute tout code JavaScript que vous saisissez et imprime le résultat dans la console.

Ajouter Eruda

Ceci ajoute un petit bouton qui ouvre la console JavaScript d'Eruda pour la page en cours de visualisation. Elle fournit presque toutes les fonctionnalités que vous connaissez de la console du navigateur sur votre ordinateur, par exemple, l'explorateur d'éléments de l'arbre DOM. Vous pouvez en savoir plus sur Eruda dans son projet GitHub.

Une capture d'écran de la console Eruda.

Copier le journal

Puisque les messages enregistrés peuvent être un peu difficiles à lire et à analyser, vous pouvez utiliser ce bouton pour copier tout le texte enregistré afin de le coller où vous voulez. Par exemple, vous pouvez l'envoyer sur votre ordinateur où vous disposerez peut-être d'un meilleur éditeur de texte.

Auteur Jan Bunk
Écrit par
Jan Bunk

Bonjour, je m'appelle Jan ! J'ai créé webtoapp.design en 2019 alors que j'étudiais l'informatique à l'université. Beaucoup de choses ont changé depuis - non seulement j'ai obtenu mon diplôme, mais ce n'est plus seulement moi qui dirige webtoapp.design. Nous sommes devenus une équipe mondiale, entièrement à distance, et nous avons accumulé beaucoup d'expérience autour du développement et de la publication d'applications. Nous avons créé et publié des centaines d'applications dans les magasins d'applications, où elles ont été téléchargées des centaines de milliers de fois.