Maîtriser les onglets DevTools du navigateur pour un développement efficace

Les outils de développement web du navigateur

Nous allons utiliser un outil très utile qui facilite l’identification des erreurs et des problèmes lors du développement d’un site, permettant ainsi de les corriger de manière efficace.

Il est intégré directement dans un navigateur (comme Chrome, Safari, etc.) et se trouve dans les outils de développement web. Dans ce tutoriel, nous allons apprendre à les utiliser pas à pas. 🙂

Où peut-on trouver ces outils ?

Dans votre navigateur, suivez ce chemin.

Menu > Outils supplémentaires > Outil de développement web

Vous pouvez aussi utiliser les raccourcis suivants.

• Windows : Ctrl + Shift + i

• MacOs : Cmd + Alt + i

Nous allons commencer à découvrir comment utiliser cet outil, et à la fin, vous serez en mesure de le maîtriser.

Inspecteur : Vérifier la structure

L’onglet Inspecteur vous permet d’examiner et de modifier la structure HTML ainsi que le style CSS d’une page. Cet onglet est l’un des plus utilisés par les développeurs web.

Sélectionner un élément de la page

À côté de l’onglet Inspecteur, il y a une option qui permet de sélectionner un élément directement sur la page.

Cela vous permet d’accéder directement aux informations de cet élément.

Changer le code HTML et le contenu

Vous pouvez modifier le contenu et les balises.

Vous pouvez également effectuer d’autres actions, comme supprimer un élément, le dupliquer, le copier, et bien plus encore.

Changer le CSS

À droite de l'inspecteur, il y a une partie qui permet de changer les règles CSS.

Le site est modifié en ligne ?

Non ! Les modifications ne s’appliquent qu’à la version de la page téléchargée par votre navigateur.

Console : Afficher les erreurs ‼️

Je pense que c’est l’onglet le plus utilisé. Personnellement, c’est celui que j’utilise le plus fréquemment.

La Console est un terminal interactif qui permet d’afficher des messages de débogage, de tester du code JavaScript ou de surveiller les erreurs.

Par exemple, vous pouvez exécuter des commandes JavaScript et afficher les informations transmises par un console.log en JavaScript.

Débogueur : Pour déboguer ! 🤣

Dans l'onglet Débogueur, il existe trois sous-onglets.

• Sources
• Structure
• Rechercher

Sources

Cette section permet de placer des points d’arrêt pour mieux comprendre le code et exécuter les instructions pas à pas de manière progressive.

Par exemple, cela permet de vérifier la valeur des variables ou d’observer les changements dynamiques de la page grâce au JavaScript.

Structure

La structure répertorie les fonctions JavaScript présentes dans le projet.

Rechercher

Cette partie permet de rechercher des expressions dans n’importe quel fichier que compose le site web. Il peut s’agir de fichiers JavaScript, HTML, CSS ou tout autre fichier fourni par le serveur.

Réseau : nous montrer les requête effectuer entre le navigateur et le serveur

Pour afficher notre site, le navigateur va communiquer avec le serveur.

La section Réseau nous fournit la liste de toutes les requêtes effectuées par le navigateur pour charger le site.

• En-tête : Informations générales sur la requête ou la réponse (type de contenu, méthode, etc.).
• Cookie
• Requête : Les données envoyées au serveur pour une requête spécifique.
• Réponse : Les données renvoyées par le serveur.
• Délai : Temps pris pour chaque étape de la requête (DNS, connexion, transfert).

Stockage

L’onglet Stockage est utilisé pour gérer les ressources côté client comme le stockage et les cookies.

Par exemple, avec du JavaScript, si vous ajoutez le code suivant.

localStorage.setItem('nombre', nombre);

Vous pourrez retrouver la valeur stockée dans le localStorage directement dans cet onglet.

Bonus : limitation de bande passante

Revenons à l’onglet Réseau. En haut à gauche (ou à un autre emplacement selon le navigateur), vous avez la possibilité de simuler une connexion en 2G, 3G ou 4G. Cela permet de tester comment le site se charge sur des appareils plus anciens ou avec une connexion lente, par exemple.

Bon débogage ! 😉

Avec toutes ces informations, vous êtes prêt à déboguer efficacement vos sites web.

Bonne exploration et bon débogage ! 👋