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 :
- Ouvrir les outils de développements sur l’onglet « Inspecteur » (Firefox) ou « Éléments » (Chrome).
- Cliquer droit sur l’élément du DOM à surveiller (ici la balise « input »).
- Sélectionner « Point d’arrêt sur… » (Firefox) ou « Arrêt activé » (Chrome).
- Sélectionner « Une modification d’attribut » (Firefox) ou « modifications d’attribut » (Chrome).
- Recharger la page.