Ce tutoriel vous présente le workflow de base pour déboguer tout problème JavaScript dans DevTools. Lisez la suite ou regardez la version vidéo de ce tutoriel.
Reproduisez le bug.
Trouver une série d'actions qui reproduit systématiquement un bug est toujours la première étape du débogage.
- Ouvrez cette démonstration dans un nouvel onglet.
- Saisissez
5dans la zone Numéro 1. - Saisissez
1dans la zone Numéro 2. - Cliquez sur Ajouter le numéro 1 et le numéro 2. Le libellé sous le bouton indique
5 + 1 = 51. Le résultat devrait être6. C'est le bug que vous allez corriger.
Dans cet exemple, le résultat de 5 + 1 est 51. Il devrait être de 6.
Familiarisez-vous avec l'interface utilisateur du panneau "Sources"
Les outils de développement fournissent de nombreux outils différents pour différentes tâches, comme modifier le CSS, profiler les performances de chargement de la page et surveiller les requêtes réseau. Le panneau Sources vous permet de déboguer JavaScript.
Ouvrez les outils de développement, puis accédez au panneau Sources.
Le panneau Sources comporte trois sections :
- Onglet Page avec l'arborescence des fichiers. Tous les fichiers que la page demande sont listés ici.
- Section Éditeur de code. Une fois que vous avez sélectionné un fichier dans l'onglet Page, son contenu s'affiche ici.
Section Debugger. Divers outils permettant d'inspecter le code JavaScript de la page.
Si la fenêtre des outils pour les développeurs est large, le débogueur se trouve par défaut à droite de l'éditeur de code. Dans ce cas, les onglets Champ d'application et Surveiller rejoignent les sections Points d'arrêt, Pile d'appels et d'autres en tant que sections réductibles.
Mettre le code en pause avec un point d'arrêt
Une méthode courante pour déboguer un problème de ce type consiste à insérer de nombreuses instructions console.log() dans le code afin d'inspecter les valeurs pendant l'exécution du script. Exemple :
function updateLabel() {
var addend1 =