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

Posté le 16. juillet 2025 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 immédiatement. Elles se comportent au moins de façon très similaire à votre site web sur Chrome pour Android et Safari pour iOS. Donc, si votre site fonctionne correctement sur ces navigateurs, 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 accéder à des pages de test secrètes (non référencées sur le site principal) ou à des environnements de préproduction 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 sur son projet GitHub.

Gardez à l'esprit qu'Eruda fonctionne entièrement via JavaScript, ce qui comporte certaines limitations. Par exemple, son inspecteur de cookies ne peut afficher que les cookies accessibles via JavaScript (c'est-à-dire non marqués comme HttpOnly).
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 suis Jan ! J'ai créé webtoapp.design en 2019 pendant 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 gère webtoapp.design. Nous sommes devenus une équipe mondiale, entièrement à distance et avons acquis beaucoup d'expérience dans le développement et 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 millions de fois.