Découvrir les outils de développement des navigateurs

Comment ouvrir les outils de développement d'un navigateur

Les devtools s'affichent généralement dans une sous-fenêtre du navigateur, de la façon suivante (cela peut varier légèrement) :

Comment faire pour que cette sous-fenêtre apparaisse ? Trois méthodes :

• Au clavier. Ctrl + Shift + I, sauf pour :
  • Internet Explorer. F12
  • Mac OS X. ⌘ + ⌥ + I
• Via les menus.
  • Firefox. Menu ➤ Développement ➤ Outils de développement ou Outils ➤ Développement Web ➤ Outils de développement
  • Chrome. Affichage ➤ Développement ➤ 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 Mac) 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 CSS

Lorsqu'ils s'ouvrent, les outils de développement s'affichent comme illustré dans la capture d'écran ci-après. Cet outil permet de voir le HTML présent sur la page au moment où celle-ci est affiché, de façon dynamique. Il permet aussi de voir quelles règles CSS sont appliquées pour chaque élément de la page. Grâce à cet outil, on peut modifier le HTML et le CSS de façon instantanée et voir les changements appliqués immédiatement à la page affichée dans le navigateur.

Si vous n'arrivez pas sur l'inspecteur :

• Cliquez ou appuyez l'onglet Inspecteur.
• Sous Internet Explorer, cliquez ou appuyez sur Explorateur DOM, ou appuyez sur Ctrl + 1.
• 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 (en live). Cette option est très utile pour déboguer ou tester.
• :hover/:active/:focus : force l'état d'un élément à être actif 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 en cours.

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).
• 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 padding (rembourrage), 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

Pour en apprendre plus sur l'inspecteur présent dans les différents navigateurs, les ressources suivantes pourront vous être particulièrement utiles :

• L'inspecteur Firefox
• L'explorateur de DOM d'Internet Explorer
• L'inspecteur de DOM Chrome (l'inspecteur d'Opera fonctionne de la même façon)
• L'inspecteur de DOM et l'explorateur de styles Safari

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 dans n'importe quel navigateur, il suffit de cliquer/appuyer sur l'onglet Console (sous Internet Explorer, appuyez sur Ctrl + 2.) Cela affichera une fenêtre qui ressemblera à :

Pour voir comment la console se comporte, essayez de saisir les fragments de code suivants dans la console (un par un), en appuyant sur Entrée après chaque :

1. alert('Coucou !');

2. document.querySelector('html').style.backgroundColor = 'purple';

3. var monImage = document.createElement('img');
   monImage.setAttribute('src','https://c1.staticflickr.com/1/572/20463320350_58483f6bed.jpg');
   document.querySelector('h1').appendChild(monImage);

Maintenant, essayez de saisir les fragments de code suivants, qui sont incorrects, pour voir ce qui se passe :

1. alert('coucou !);

2. document.cheeseSelector('html').style.backgroundColor = 'purple';

3. var monImage = document.createElement('img');
   maBanane.setAttribute('src','https://c1.staticflickr.com/1/572/20463320350_58483f6bed.jpg');
   document.querySelector('h1').appendChild(monImage);

Vous devriez voir différentes erreurs fournies par le navigateur. À première vue, ces erreurs semblent un peu étranges et complexes mais elles devraient être simples à résoudre !

En savoir plus

Pour en apprendre plus sur la console JavaScript présente dans les différents navigateurs, les ressources listées ici devraient vous être utiles :

• La console web de Firefox
• La console JavaScript d'Internet Explorer
• La console JavaScript de Chrome (la console pour Opera fonctionnera de la même façon)
• La console de Safari