Votre slide est en panne ? Le widget calendrier de votre site répond bizarrement ? Vous voudriez faire apparaître des pop-up en cas d'actions ciblées ?
Vous devez comprendre l'exécution des scripts javascripts s'éxécutant de votre page. L'article vous donne les clés-en-main à cette fin avec l'outil développeur de votre navigateur (exemple avec Chrome).
Qu'est-ce qu'un script javascript ?
Les scripts sont des morceaux de code comprenant des instructions exécutant des actions prédéfinies.
Les scripts javascript sont des scripts contenus dans le code html de la page lue par votre navigateur ou des fichiers .js . Ils s'exécutent sur votre navigateur et permettent de dynamiser la navigation en fonction des actions utilisateurs.
Le processus est le suivant :
- Vous cliquez sur un lien ou entrer une url pour accéder à une page.
- Votre navigateur envoit une requête au serveur qui renvoie les fichiers sources de la page : fichiers html, css et javascript.
- Votre navigateur reçoit ces fichiers et lit le code html en y exécutant les scripts javascripts écrits en dur dans le code ou mis en référence.
- Même après le chargement initial de la page, certains scripts, sous certaines conditions, s'exécutent (à nouveau). Par exemple, le clic sur un widget calendrier fait apparaître un calendrier miniature pour sélectionner une date.
- Dans ce cas particulier, le script modifie le code html et le css de la page pour y faire appraître des éléments sans demander au navigateur de recharger l'ensemble de la page. On parle d'exécution asynchrome.
Widgets calendrier du framework Jquery
Apparition du calendrier pour sélectionner une date : widget 'datepicker'
Déboguer avec l'outil développeur
La suite de l'article décrit la manière de procéder pour déboguer un script javascript avec l'outil développeur. La méthode vous permettra de comprendre l'exécution des scripts pour modifier le code selon vos besoins.
1) Identifier le script chargé et exécuté par votre navigateur
Vous trouvez les scripts dans le header du fichier html chargé par votre page. Les scripts peuvent être soit écrits dans le code html soit chargés depuis des fichiers .js retournés par le serveur. Ouvrez l'outil développeur et afficher les fichiers sources, puis ouvrez le code de la page html et rechercher les scripts chargés dans les balises <script>.
Une fois le script identifié, naviguez dans les fichiers sources pour accéder au script chargé (s'il est écrit en dur, vous pouvez rester dans le fichier html).
Si vous n'êtes pas sûr, continuez quand même : vous comprendrez rapidement que le script que vous étudiez ne correspond à ce que vous recherchez.
Il peut arriver que le script que vous trouvez est minifié : il n'est alors plus identé et doit être "déminifié" :
Vous pouvez facilement réaliser l'opération de déminification en ligne, par exemple sur unminify.com.
Le nouveau code est nettement plus lisible:
Dans cet exemple particulier, le code est aussi compacté : les noms des variables et les arguments des fonctions sont remplacés par des noms. Il devient difficile de comprendre le code. Il n'est pas possible d'inverser le processus.
Pour travailler avec ce nouveau code, il ne reste plus qu'à ré-insérer ce contenu dans le fichier .js et à recharger la page (en modifiant le fichier directement par accès ftp ou en télécharger les fichiers sources avec le navigateur si vous souhaitez travailler en local).
2) Poser des breakpoints dans le script
Le navigateur exécute le code javascript en lisant le code de début à la fin. Quand une fonction est appelée, il lit alors le code de la fonction de la même manière. Certaines actions de l'utilisateur (clic, défilement) déclenchent des actions. On les apelle des 'événements' déclenchés par des 'event listeners'. Ces évenements peuvent déclencher l'exécution de fonctions dont l'exécution peut être intérrompue par des points d'arrêts, ou 'breakpoints'.
Poser des points d'arrêts au niveau des opérations de déclaration ou de modificaiton de variables stope le script à cet endroid. Pour poser des points d'arrêts dans Chrome, il suffit de cliquer sur la bonne ligne :
3) Mettre à profit les breakpoints
Les breakpoints vous permettent de comprendre dans quel ordre sont appelées les fonctions en fonction de l'action utilisateur faite. Ils permettent donc de comprendre le fonctionnement du code beaucoup plus rapidement qu'une lecture attentive ne le permettrait. La liste des fonctions appelées dans l'ordre peut être consultée dans 'Call Stack', et la liste des variables dans "Call Scope"; on y affiche aussi leur valeur.
Pour passer au breakpoint suivant, on peut simplement actionner le bouton 'play'.
Avec un peu de pratique, vous devriez être capable d'analyser et déboguer vos codes javascript plus rapidement avec votre navigateur.
Bon courage et merci de votre lecture !