Mois : février 2023

Points d’arrêt en Javascript

Une application legacy, le code HTML et JavaScript sont tellement mélangés qu’il devient difficile de savoir quand un élément du DOM a changé et pourquoi.
Grace aux outils de développement de Google Chrome ou Mozilla Firefox, il est possible de poser un point d’arrêt conditionnel.

Voici le code suivant, volontairement très simplifié :

<body>
<input type="text" id="name">
<script>
    setTimeout(function () {
        document.getElementById('name').disabled = 'disabled';
    }, 2000);
</script>
</body>

Avec ce code, 2 secondes après l’affichage de la page, le champ « name » va être désactivé.

Pour poser un point d’arrêt lorsque l’attribut « disabled » va changer, il faut :

  1. Ouvrir les outils de développements sur l’onglet « Inspecteur » (Firefox) ou « Éléments » (Chrome).
  2. Cliquer droit sur l’élément du DOM à surveiller (ici la balise « input »).
  3. Sélectionner « Point d’arrêt sur… » (Firefox) ou « Arrêt activé » (Chrome).
  4. Sélectionner « Une modification d’attribut » (Firefox) ou « modifications d’attribut » (Chrome).
  5. Recharger la page.