Qu'est-ce que sont les outils de développement ?
Tous les navigateurs web modernes possèdent un ensemble d'outils de développement. Ces outils permettent de réaliser différentes actions : inspecter le code HTML, CSS ou JavaScript chargé à la volée dans la page, montrer les fichiers téléchargés et leur temps de chargement, etc. Dans cet article, nous verrons comment utiliser les fonctionnalités basiques des outils de développements d'un navigateur (aussi souvent appelés par l'anglicisme « devtools »).
Note : Avant de poursuivre avec les exemples présentés ci-après, nous vous conseillons d'utiliser l'exemple construit dans la série d'articles Commencer avec le Web et d'ouvrir le site dans votre navigateur pour poursuivre avec les étapes suivantes.
Comment ouvrir les outils de développement d'un navigateur
Les outils de développement, s'affichent généralement dans une sous-fenêtre du navigateur, de la façon suivante (cela peut varier légèrement d'un navigateur à l'autre) :
Comment faire pour que cette sous-fenêtre apparaisse ? Trois méthodes :
-
Au clavier : Ctrl + Shift + I, sauf pour :
- Edge : F12
- macOS : ⌘ + ⌥ + I
-
Via les menus
- Firefox : Menu ➤ Outils supplémentaires ➤ Outils de développement web
- Chrome : Plus d'outils ➤ Outils de développement
- Safari : Développement ➤ Afficher l'inspecteur web. Si vous ne pouvez pas voir le menu Développement, aller sous Safari ➤ Préférences ➤ Avancé et vérifiez que l'option Afficher le menu de développement est bien coché.
- Opera. Développement ➤ Inspecteur web
-
Via un menu contextuel : Cliquez-droit sur un élément de la page web (ou Ctrl+clic sur macOS) et sélectionnez Examiner l'élément dans le menu qui apparait (Bonus : cette méthode ouvrira l'inspecteur et sélectionnera directement l'élément en question !).
L'inspecteur : explorateur du DOM et éditeur de CSS
Les outils de développement s'ouvrent généralement par défaut sur l'inspecteur, qu'on peut voir dans la capture d'écran qui suit. Cet outil montre le code HTML de la page lors de l'exécution ainsi que le CSS appliqué à chaque élément de la page. Il permet également de modifier instantanément le HTML et le CSS et de voir les modifications affichées en direct sur la zone d'affichage du navigateur.
Si vous n'arrivez pas sur l'inspecteur :
- Cliquez ou appuyez l'onglet Inspecteur.
- Sous Edge, ou Opera, cliquez ou appuyez sur Éléments.
- Sous Safari, les contrôles n'apparaissent pas clairement, mais vous devriez voir le code HTML si vous n'avez rien sélectionné d'autre. Pour voir le code CSS, appuyez sur le bouton Style.
Manipuler l'inspecteur du DOM
Pour commencer, cliquez-droit sur un élément HTML dans l'inspecteur du DOM et regardez le menu contextuel qui s'affiche. Les options du menu qui apparaît peuvent varier d'un navigateur à un autre mais les options les plus importantes s'y trouvent toujours :
- Supprimer le nœud (parfois Supprimer l'élément)
-
Supprime l'élément sélectionné du document.
- Modifier comme HTML (parfois Ajouter un attribut/Éditer le texte)
-
Permet de changer le HTML et de voir le résultat obtenu à la volée. Cette option est très utile pour déboguer ou tester.
:hover/:active/:focus(parfois Changer de pseudo-classe)-
Force l'état d'un élément afin de pouvoir voir ce que la mise en forme donne pour cet état.
- Copier/Copier comme HTML
-
Permet de copier l'élément HTML actuellement sélectionné.
Certains navigateurs disposent également d'options comme Copier le chemin CSS et/ou Copier le chemin XPath qui permettent de copier le sélecteur CSS ou l'expression XPath qui permettrait de sélectionner l'élément HTML courant.
Essayez d'éditer le DOM de votre page. Double-cliquez sur un élément ou cliquez-droit puis choisissez « Modifier comme HTML » depuis le menu contextuel. Vous pouvez modifier tout ce que vous voulez, mais vous ne pouvez pas sauvegarder vos modifications.
Manipuler l'éditeur CSS
Par défaut, l'éditeur CSS affiche les règles CSS qui s'appliquent à l'élément qui est sélectionné :
Ces fonctionnalités sont plutôt pratiques :
- Les règles qui s'appliquent à l'élément courant sont affichées en commençant avec les règles les plus spécifiques et en terminant avec les règles les moins spécifiques.
- Il est possible de cocher les boîtes à côté de chaque déclaration pour voir l'effet qui serait obtenu si la déclaration était supprimée.
- Vous pouvez cliquer sur la petite flèche à côté de chaque propriété en notation résumée pour voir les équivalents en notation détaillée.
- Vous pouvez cliquer sur le nom d'une propriété ou d'une valeur pour éditer une valeur en live et immédiatement voir le changement.
- À côté de chaque règle, si celle-ci est « dépliée », vous pouvez voir le nom du fichier et la ligne sur laquelle la règle est définie. En cliquant sur le lien, vous arriverez directement sur le fichier CSS que vous pourrez éditer et sauvegarder.
- Vous pouvez également cliquer sur l'accolade fermant d'une règle donnée pour afficher une nouvelle zone de texte dans laquelle vous pourrez écrire une toute nouvelle déclaration.
Vous aurez remarqué plusieurs onglets en haut du panneau pour le CSS :
- Calculé
-
Cet onglet affiche les styles calculés pour l'élément sélectionné (les valeurs finales, normalisées, appliquées par le navigateur).
- Mise en page
-
Dans Firefox, cette zone contient trois sections :
- Flexbox
-
Si la page inspectée utilise les boîtes flexibles, cette section affichera les paramètres du conteneur et des éléments flexibles.
- Grilles
-
Si la page inspectée utilise les grilles CSS, cette section permet d'en voir les détails.
- Modèle de boîte
-
Cet onglet représente visuellement le modèle de boîte pour l'élément sélectionner afin de visualiser rapidement le remplissage (padding), la bordure et la marge appliquée à l'élément. Il permet aussi de voir la taille du contenu.
- Polices
-
Dans Firefox, cet onglet affiche les polices appliquées à l'élément sélectionné.
En savoir plus
Le débogueur JavaScript
Le débogueur JavaScript (aussi appelé « debugger ») permet d'observer les valeurs de variables et de placer des points d'arrêt afin de suspendre l'exécution pour identifier les problèmes empêchant le code de s'exécuter correctement.
Pour ouvrir le débogueur :
- Firefox
-
Menu ➤ Outils supplémentaires ➤ Outils de développement web puis sélectionnez l'onglet « Débogueur » ou utilisez le raccourci clavier Ctrl+Shift+Z pour ouvrir le débogueur. Si les outils de développement sont déjà ouverts, cliquez sur l'onglet Débogueur.
- Chrome, Edge et Opera
-
Ouvrez les outils de développement puis sélectionnez l'onglet Sources (Opera fonctionne de la même façon).
- Safari
-
Ouvrez les outils de développement puis sélectionnez l'onglet Débogueur.
Parcourir le débogueur
Sur Firefox, le débogueur JavaScript se compose de trois panneaux.
Liste de fichiers
Le premier panneau à gauche contient la liste des fichiers associés à la page en cours de débogage. Sélectionnez le fichier sur lequel vous souhaitez travailler depuis cette liste. Cliquez sur un fichier pour le sélectionner et en voir le contenu dans le panneau central du débogueur.
Code source
Ce panneau permet de placer des points d'arrêt aux endroits où on souhaite suspendre l'exécution. Dans l'image qui suit, on voit un point d'arrêt placé sur la ligne 83.
Observation d'expressions et points d'arrêt
Le panneau le plus à droite contient une liste des expressions espionnes et des points d'arrêts définis.
Dans l'image, la première section, expressions espionnes, indique que la variable cb a été ajoutée. Vous pouvez développer la liste afin de voir les valeurs du tableau.
La section qui suit, points d'arrêt, liste les points d'arrêt placés sur la page. Dans le fichier copybutton.js, on voit un point d'arrêt placé sur l'instruction if (document.readyState != 'loading').
Les deux dernières sections apparaissent uniquement lorsque le code s'exécute.
La section sur la pile d'exécution indique le code exécuté pour parvenir à la ligne actuelle. Dans notre exemple, on peut voir que le code suspendu est dans une fonction qui gère les clics de souris et qu'il est suspendu sur un point d'arrêt.
La dernière section, sur les portées, montre les valeurs visibles aux différents endroits du code. Dans l'exemple de l'image qui suit, on peut voir les objets disponibles depuis le code de la fonction runWhenDOMLoaded().
En savoir plus
La console JavaScript
La console JavaScript est un outil formidable pour déboguer du code JavaScript qui ne fonctionne pas comme on le souhaite. Elle permet d'exécuter des lignes de JavaScript sur la page qui est actuellement chargée dans le navigateur et de rapporter les erreurs rencontrées lorsque le navigateur souhaite exécuter le code.
Pour accéder à la console, quel que soit le navigateur, ouvrez les outils de développement s'ils ne sont pas déjà ouverts, puis cliquez sur l'onglet « Console ».
Firefox permet d'utiliser le raccourci clavier Ctrl+Shift+K.
Vous verrez alors quelque chose comme ceci à l'écran :
Pour voir ce qui se passe, essayez de saisir les fragments de code suivants dans la console, un à un en pressant Entrée entre chaque :
alert("Coucou !");
document.querySelector("html").style.backgroundColor = "purple";
const logoWikipedia = document.createElement("img");
logoWikipedia.setAttribute(
"src",
"https://upload.wikimedia.org/wikipedia/commons/6/63/Wikipedia-logo.png",
);
document.querySelector("h1").appendChild(logoWikipedia);
Désormais, essayez de saisir ces versions incorrectes pour voir le résultat.
alert('Coucou !);
document.cheeseSelector("html").style.backgroundColor = "purple";
const logoWikipedia = document.createElement("img");
myBanana.setAttribute(
"src",
"https://upload.wikimedia.org/wikipedia/commons/6/63/Wikipedia-logo.png",
);
document.querySelector("h1").appendChild(logoWikipedia);
Vous pourrez voir les erreurs que renvoie le navigateur. Il arrive que ces erreurs soient plutôt incompréhensibles, mais comprendre l'origine du problème en relisant le code devrait être jouable !