Accéder à la console : un guide du dépannage autonome pour les débutants

Introduction

Dans un monde où l’informatique cloud est omniprésente, il est de plus en plus nécessaire de savoir examiner le code HTML, les communications réseau et le CSS depuis votre navigateur web. Cet article a pour but de vous expliquer les bases pour ouvrir la console développeur de votre navigateur web moderne, en vous donnant de simples descriptions de ses onglets principaux. Comprendre ces notions de base peut vous aider à obtenir des informations cruciales, ce qui permet d’accélérer le délai de résolution de vos tickets d’assistance et vous offre une plus grande autonomie.

Accéder à la console développeur

Tout d’abord : comment accéder à la console développeur de votre navigateur web ? Le tableau ci-dessous indique les raccourcis clavier que vous pouvez utiliser :

De plus, faire un clic droit sur une page de votre navigateur web permet d’afficher un menu contextuel. Dans ce menu, vous verrez s’afficher soit inspecter, soit inspecter l’élément. Sélectionner ces options permet également d’ouvrir la console du navigateur web. Une fois la console développeur ouverte, trois onglets sont particulièrement importants : Console, Éléments et Réseau. Consultez les sections correspondantes ci-dessous pour en savoir plus sur chaque onglet.

Onglet Console

Cet onglet est considéré comme la base des outils de développement de votre navigateur web. Depuis cet espace, vous pouvez visualiser des données utiles pour déboguer les problèmes liés aux API, aux iFrames, aux erreurs HTTPS, aux variables SCORM CMI et aux paramètres XAPI/TinCan.

Astuce : les erreurs s’affichent en rouge. Si vous pensez rencontrer un problème concernant un aspect spécifique de la plateforme, examiner cette zone et récupérer le code d’erreur pour l’indiquer dans un ticket d’assistance est un excellent point de départ pour obtenir l’aide du centre d’assistance de Docebo.

Onglet Éléments

Cet onglet affiche le Document Object Model (DOM) dans son état actuel. Si vous utilisez Microsoft Edge, il se peut que vous deviez actualiser la page pour voir le DOM. Cet onglet vous permet de modifier et de copier temporairement des éléments, ainsi que d’altérer momentanément le HTML, d’ajouter des attributs, et plus encore. Si vous essayez de modifier les feuilles de style en cascade (CSS) sur la plateforme, l’onglet Éléments vous donnera un aperçu clair de vos modifications du DOM avant d’appliquer un CSS personnalisé sur la plateforme.

À noter : cet onglet est appelé l’onglet HTML dans Firefox.

Onglet Réseau

L’onglet Réseau est conçu pour montrer les ressources et les fichiers initialisés pour charger la page que vous essayez de consulter. En général, les outils de développement doivent déjà être ouverts pour que l’onglet Réseau puisse fournir des informations. Si l’onglet n’était pas ouvert, vous pouvez simplement actualiser la page après avoir accédé à l’onglet Réseau.

À noter : cet onglet s’appelle Net dans Firefox.

Maintenant que vous connaissez la console de votre navigateur web, vous disposez d’un outil supplémentaire pour vous aider à personnaliser, améliorer et dépanner la plateforme.