Débogage et outils en développement web - Apprendre JavaScript

Lorsqu'un script qui travaille avec le DOM se comporte mal, le moyen le plus rapide de comprendre pourquoi est d'observer la page du point de vue du navigateur. Les outils de développement des navigateurs (DevTools) vous permettent de lire l'arbre DOM en direct, de mettre en pause JavaScript en cours d'exécution, et de voir exactement ce que chaque ligne fait à la page.

Ce guide couvre quatre compétences pratiques : ouvrir et utiliser les DevTools, inspecter les éléments, journaliser et parcourir pas à pas le code DOM, et corriger les quelques bugs qui représentent la plupart des problèmes liés au DOM.

Utiliser les outils de développement du navigateur

Inspecter le DOM

Les outils de développement du navigateur sont des utilitaires intégrés aux navigateurs modernes pour inspecter et modifier le DOM en direct, déboguer JavaScript, surveiller les requêtes réseau et mesurer les performances. Les panneaux les plus utiles pour travailler avec le DOM sont :

Elements (Firefox : Inspector) — l'arbre DOM en direct et le CSS appliqué à chaque nœud.
Console — les journaux, les erreurs, et un REPL où vous pouvez exécuter JavaScript sur la page courante.
Sources (Firefox : Debugger) — vos scripts, où vous pouvez définir des points d'arrêt et parcourir le code pas à pas.

Un point clé qui déroute souvent les débutants : le panneau Elements affiche le DOM en direct, et non le HTML que vous avez écrit. Si votre script ajoute, supprime ou réécrit des nœuds, le panneau Elements reflète le résultat après l'exécution du script — ce qui est exactement ce que vous souhaitez lors du débogage de la manipulation du DOM.

Comment ouvrir les outils de développement

Chrome : Faites un clic droit sur la page et sélectionnez « Inspecter », ou appuyez sur Ctrl+Shift+I (Windows/Linux) ou Cmd+Opt+I (Mac).
Firefox : Faites un clic droit sur la page et sélectionnez « Inspecter l'élément », ou appuyez sur Ctrl+Shift+I (Windows/Linux) ou Cmd+Opt+I (Mac).
Safari : Activez le menu Développement dans les Préférences, puis sélectionnez « Afficher l'inspecteur web » dans le menu Développement.

Inspecter les éléments

Le panneau « Elements » vous permet d'inspecter et de modifier le HTML et le CSS d'une page web en temps réel.

<!DOCTYPE html>
<html>
<head>
    <title>Inspecting Elements</title>
    <style>
        .highlight {
            color: red;
        }
    </style>
</head>
<body>
    <div class="content">This is some content.</div>
    <script>
        document.querySelector('.content').classList.add('highlight');
    </script>
</body>
</html>

Essayez vous-même »

Utilisez le panneau Elements (appuyez sur F12 pour ouvrir l'inspecteur, puis naviguez vers l'onglet Elements) pour inspecter l'élément <div class="content"> et vérifier que la classe .highlight est bien appliquée.

Déboguer JavaScript qui manipule le DOM

Utiliser la console

La console est l'outil de débogage le plus rapide : ajoutez une instruction de journalisation, rechargez la page, et lisez la sortie. Au-delà du basique console.log(), plusieurs méthodes rendent le débogage du DOM beaucoup plus clair :

console.log() — sortie générale ; passez plusieurs arguments et ils s'affichent côte à côte.
console.error() / console.warn() — messages stylisés en rouge/jaune faciles à repérer et pouvant être filtrés.
console.dir(node) — affiche un nœud DOM en tant qu'objet JavaScript pour que vous puissiez développer ses propriétés, plutôt qu'en HTML (ce que montre console.log(node)).
console.table(data) — affiche les array et les object sous forme de tableau triable.
console.assert(condition, msg) — journalise uniquement lorsque la condition est false, parfait pour les vérifications de cohérence.
console.count(label) — compte combien de fois une ligne s'exécute, utile pour repérer un gestionnaire d'événements qui se déclenche trop souvent.

const items = [
  { id: 1, name: 'Alpha' },
  { id: 2, name: 'Beta' },
];

console.log('Loaded items:', items.length); // Loaded items: 2
console.table(items);                        // sortable table of both rows
console.assert(items.length > 0, 'No items!'); // silent: condition is true
console.assert(items.length > 5, 'Too few items'); // logs the assertion message

Lorsque vous journalisez un nœud DOM, préférez console.dir(el) pour inspecter ses propriétés (comme el.dataset ou el.classList) et console.log(el) pour inspecter son HTML rendu — ils montrent deux vues différentes du même élément.

Définir des points d'arrêt

Les points d'arrêt vous permettent de mettre en pause l'exécution de JavaScript à des lignes de code spécifiques afin d'inspecter les variables et la pile d'appels.

Comment définir des points d'arrêt

Ouvrez le panneau « Sources » dans Chrome ou le panneau « Debugger » dans Firefox.
Naviguez vers le fichier JavaScript que vous souhaitez déboguer.
Cliquez sur le numéro de ligne où vous souhaitez définir un point d'arrêt.

Lorsque l'exécution est en pause, utilisez les contrôles de pas à pas : Step over (exécuter la ligne courante), Step into (entrer dans une fonction appelée), et Step out (terminer la fonction courante). Le volet Scope affiche les variables locales, et Call Stack montre comment vous êtes arrivé à cette ligne.

L'instruction `debugger`

Vous pouvez également mettre en pause depuis le code lui-même. Lorsque les DevTools sont ouverts, l'instruction debugger; agit comme un point d'arrêt qui réside dans votre source — pratique pour le code généré à l'exécution ou que vous ne pouvez pas facilement cliquer dans le panneau Sources :

function updateTitle(text) {
  debugger; // execution pauses here when DevTools is open
  document.title = text;
}

Si les DevTools sont fermés, debugger ne fait rien, il est donc sans danger de le laisser pendant le développement (mais retirez-le avant de mettre en production).

Points d'arrêt conditionnels et logpoints

Pour un gestionnaire qui s'exécute de nombreuses fois, faites un clic droit sur un numéro de ligne et choisissez Add conditional breakpoint pour ne marquer une pause que lorsqu'une expression est vraie (par exemple count > 100). Un logpoint affiche un message sans jamais marquer de pause — comme un console.log() que vous pouvez ajouter sans modifier le code source.

Exemple de débogage de manipulation du DOM

<!DOCTYPE html>
<html>
<head>
    <title>Debugging Example</title>
</head>
<body>
    <div id="content">Hello, World!</div>
    <button id="change-text">Change Text</button>
    <p id="log"></p>

    <script>
        document.getElementById('change-text').addEventListener('click', function() {
            const content = document.getElementById('content');
            const log = document.getElementById('log');
            log.textContent = 'Current text: ' + content.textContent;
            content.textContent = 'Hello, Developer!';
            log.textContent += ' | Updated text: ' + content.textContent;
        });
    </script>
</body>
</html>

Essayez vous-même »

Cet exemple montre comment déboguer la manipulation du DOM en affichant les modifications apportées au DOM.

Problèmes courants et solutions

Résoudre les problèmes courants de manipulation du DOM

Élément introuvable

L'erreur DOM la plus courante est TypeError: Cannot read properties of null. Cela signifie qu'un sélecteur a retourné null parce que l'élément n'existe pas (une faute de frappe dans l'id, ou un mauvais sélecteur). Vérifiez toujours le résultat avant de l'utiliser. Consultez Searching: getElement, querySelector pour comprendre la différence entre les méthodes de sélection.

const element = document.getElementById('nonexistent');
if (element) {
    element.textContent = 'Found!';
} else {
    document.body.insertAdjacentHTML('beforeend', '<p>Element not found</p>');
}

Mauvais timing

Si un <script> dans le <head> s'exécute avant que le corps soit analysé, les éléments qu'il recherche n'existent pas encore — produisant la même erreur null que ci-dessus. Exécutez le code DOM après l'analyse du document en écoutant l'événement DOMContentLoaded (ou en plaçant le script à la fin de <body>).

document.addEventListener('DOMContentLoaded', function() {
    const element = document.getElementById('content');
    element.textContent = 'DOM fully loaded';
});

CSS non appliqué

Si une modification de style n'a aucun effet visible, confirmez dans le panneau Elements que la classe a bien été ajoutée (element.classList) et qu'aucune règle plus spécifique ne la remplace — les DevTools affichent les règles écrasées avec un texte barré. Voir aussi : Gestion des événements dans le DOM.

<!DOCTYPE html>
<html>
<head>
    <title>CSS Not Applied</title>
    <style>
        .hidden {
            display: none;
        }
    </style>
</head>
<body>
    <div id="content">This is visible</div>
    <button id="hide-content">Hide Content</button>

    <script>
        document.getElementById('hide-content').addEventListener('click', function() {
            const content = document.getElementById('content');
            content.classList.add('hidden');
        });
    </script>
</body>
</html>

Essayez vous-même »

Cet exemple montre comment masquer un élément de contenu en ajoutant la classe .hidden.

Info

Utilisez le panneau « Sources » des outils de développement du navigateur pour définir des points d'arrêt et parcourir votre code JavaScript ligne par ligne. Cela vous permet d'inspecter les variables, la pile d'appels et l'état du DOM à chaque étape, ce qui facilite grandement l'identification et la correction des bugs.

Conclusion

Les outils de développement du navigateur sont indispensables pour inspecter le DOM, déboguer JavaScript et résoudre les problèmes courants. En maîtrisant ces outils et ces techniques, vous pouvez améliorer considérablement votre flux de travail de développement et créer des applications web plus fiables.

Pratique

Lesquelles des affirmations suivantes sur le débogage et les outils pour la manipulation du DOM sont vraies ?

Vous pouvez utiliser le panneau 'Elements' des outils de développement du navigateur pour inspecter et modifier le HTML et le CSS en temps réel.La définition de points d'arrêt vous permet de mettre en pause l'exécution de JavaScript et d'inspecter les variables et la pile d'appels.Utiliser 'console.log()' est la seule façon de déboguer du code JavaScript.Le panneau 'Network' est utilisé pour inspecter et manipuler le DOM.Vous pouvez résoudre les problèmes courants de manipulation du DOM en vous assurant que les éléments existent dans le DOM avant de les manipuler.

Utiliser les outils de développement du navigateur

Inspecter le DOM

Comment ouvrir les outils de développement

Inspecter les éléments

Déboguer JavaScript qui manipule le DOM

Utiliser la console

Définir des points d'arrêt

Comment définir des points d'arrêt

L'instruction debugger

Points d'arrêt conditionnels et logpoints

Exemple de débogage de manipulation du DOM

Problèmes courants et solutions

Résoudre les problèmes courants de manipulation du DOM

Conclusion

Pratique

L'instruction `debugger`