(cas spécifique de la fonctionnalité : “Blackbox script” ou “Ajouter un script à la liste des éléments à ignorer”)

Comprendre la structure de code d’un site web, corriger un bug de présentation (CSS) ou un un code d’affichage (HTML) voir même tester un bout de script JS …. On utilise souvent l’inspecteur de code des navigateurs Web.

Une des fonctionnalités souvent utilisées de l’inspecteur de code, c’est le parcours étape par étape du code JS d’un site pour comprendre l’exécution des scripts et inspecter les valeurs des variables.  Durant ce parcours le débogueur ouvre plusieurs fichiers js sur son parcours avant d’atteindre le fichier cible qui nous intéresse. Et parfois même, le parcours d’inspection dure 3 à 4 minutes sur des fichiers js de grande taille, et qui ne correspondent pas à notre cible. C’est là qu’intervient la fonctionnalité “Blackbox script” ou “Ajouter un script à la liste des éléments à ignorer” qui nous permet d’ignorer certains fichiers javascripts lors de notre parcours d’inspection. Le principe c’est d’aller droit au but 🙂

Ci dessous des captures d’écran de l’activation de cette fonctionnalité.

Une fois l’inspecteur en action.

1. Se position sur l’onglet sources
2. Choisir le fichier javascript cible de notre inspection
3. Sélectionner le code cible de notre inspection et positionner un breakpoint.
4. Actionner l’exécution du script à travers un événement (Click, Hover, recharge de page …..)
5. L’exécution du script va s’arrêter au point de blocage “breakpoint”. 
6. Après l’étape 5, on peut entamer l’exécution pas à pas
7. Pour éviter le passage du code dans certains fichiers javascripts (fichiers de bibliothèque) c’est souvent le cas du fichier jquery.js (qu’on ne modifiera certainement pas), nous allons utiliser la fonctionnalité “Blackbox script” ou “Ajouter un script à la liste des éléments à ignorer”

La fonctionnalité “Blackbox script” ou “Ajouter un script à la liste des éléments à ignorer”

Suspension du débogueur :

Débogage étape par étape :

Avec cette fonctionnalité, vous devenez de plus en plus productif et c’est bon pour la planète 🙂