Internet Explorer 9 Les outils de développement en détails - Partie 3 : Débogage Javascript
Ce billet fait partie d'une série sur les Developer Tools inclus avec Internet Explorer (et ce depuis la version 8) visant à vous aider à améliorer vos sites Web grâce à des outils d'examen de contenu, à diagnostiquer des problèmes, à améliorer les performances, et bien plus encore:
- Partie 1 - Introduction
- Partie 2 - Travailler avec HTML et CSS
- Partie 3 - Débogage de script JavaScript
- Partie 4 - Profilage de script JavaScript
- Partie 5 – Performance et analyse des échanges réseaux
Si vous ne connaissez pas les outils de développement (encore appelés F12 Tools ou encore Developer Tools), je vous recommande commencer par lire le billet d'introduction.
Débogage JavaScript avec Internet Explorer
Parce que l'utilisation de scripts JavaScript pour créer des applications web n'est pas sans son lot de ... complications, les outils de développement peuvent être très utiles.
Dans cet article, vous verrez comment les fonctionnalités telles que les points d'arrêt et le débogage du code, mais aussi l'inspection des variables et le formatage des scripts peuvent faciliter les choses.
Utilisation du débogueur
Pour commencer le débogage de scripts, ouvrez les outils de développement (appuyez sur F12 ou choisissez Outils -> Outils de développement F12) puis sélectionnez l'onglet Script et mettez un point d'arrêt (F9 ou clic droit et choisissez "Insérer un point d'arrêt»), puis appuyez sur "Démarrer le débogage".
Utilisez la liste déroulante pour sélectionner le script à déboger parmi l'ensemble des scripts de la page :
- Astuce: Utilisez la combinaison CTRL + G pour aller à une ligne spécifique :
Démarrer le débogage, et si le point d'arrêt (ou une erreur comme nous allons le voir) est atteinte, le débogueur s'arrêtera sur cette ligne :
Utilisez les boutons de la barre d'outils ou les touches de raccourcis pour naviguer dans le code :
Les options sont (de gauche à droite):
- F5 - Continuer - Poursuivre l'exécution
- CTRL + MAJ + B - Interrompre tout - Pause sur toutes les commandes suivantes
- F11 - Pas à pas détaillé - Continuer, y compris dans les appels de fonctions
- F10 - Pas à pas principal - Continuer, sans entrer dans les fonctions appelées
- MAJ + F11 - Pas à pas sortant - Continuer, mais hors de la fonction en cours
Faites un clic droit sur le code pour plus d'options:
- Définir la prochaine instruction - fait de la ligne sélectionnée la prochaine exécution, en sautant tout le code entre elle et l'instruction en cours.
- Exécuter jusqu'au curseur - Exécute le code jusqu'à ce que la ligne sélectionnée soit atteinte, en exécutant tout le code entre elle et l'instruction en cours.
- Ajouter un espion - Voir Travailler avec des Variables - Espions et variables locales ci-après
Astuce: Si Internet Explorer affiche "not responding", vérifier pour voir si les outils de développement ne sont pas en débogage sur une ligne de code. La fenêtre principale des outils de développement se détache en mode débogage et peut se glisser sous la fenêtre principale d'IE .
Erreurs
Si vous exécutez un script contenant une erreur (et que les outils de développement sont lancés), vous verrez l'erreur mise en avant dans l'onglet Script:
La console (sur le volet droit) va afficher la liste des messages et des erreurs. Vous pouvez cliquer sur les hyperliens pour naviguer directement vers la ligne incriminée quand elle est disponible. Le site MSDN a une liste des codes d'erreur (et des corrections suggérées) pour des problèmes communs (allant de la sécurité aux nouveautés du HTML5). Nous verrons la console plus en détail dans un instant.
Notez qu'avant de voir l'écran ci-dessus, vous pouvez être invités à lancer le débogueur. Cliquez sur Oui pour lancer le débogueur (et cocher "Ne plus afficher ce message" pour ne plus afficher la demande à l'avenir).
Notez que vous pouvez activer / désactiver l'arrêt sur chaque erreur via le "Interrompre tout" dans les options (Ctrl + Maj + E).
Formatage du JavaScript
A de nombreuses reprises, vous utiliserez des versions "minified" des fichiers JavaScript et ce afin de réduire la taille de téléchargement et donc d'améliorer les performances. C'est super pour l'optimisation ... mais pas génial pour la lisibilité.
Heureusement, le menu configuration 
Les outils de développement affichent alors le même code source, mais formaté pour être facile à lire (remarquez que même les numéros de ligne sont conservés). Ajoutez des points d'arrêts comme vous le souhaitez et profitez-en.
Travailler avec la console
La Console dispose de son propre onglet dans IE9, mais comme vous l'avez vu ci-dessus, est également disponible en tant que volet de l'onglet Script (dans IE8 et ultérieur).
La Console affiche les messages d'erreur et affiche également des informations de diagnostic via l'objet window.console. Vous pouvez utiliser ces fonctions pour instrumenter vos scripts et ainsi vous aider à détecter et suivre les problèmes (au lieu des détonants appels à la méthode alert()) :
- console. log – Message générique
- console. info – Message d'information
- console. warn – Message d'avertissement
- console. error – Message d'erreur
- console. assert – Emet un message uniquement si une condition échoue
Et aussi :
- console. clear – Efface la fenêtre de console
- console. dir – Affiche les détails d'un objet
- console. profile/profileEnd – Démarre / arrête une session de profilage script (couvert dans la partie 4 de cette série)
Vous pouvez vérifier l'existence de l'objet window.console si vous avez un script que vous ne voulez exécuter que lorsque les outils de développement sont lancés. Par exemple :
- Astuce: Vous n'avez pas besoin d'être en débogage pour que ces messages de diagnostic s'affichent.
Il y a trop de messages, ou vous ne voulez voir que certains types de message en particulier? Faites un clic droit dans la console et choisissez l'option "Filtre" :
Exécution d'un script
La zone de texte au bas de la console supporte l'exécution directe de scripts (ou de commandes). Entrez des noms des variables pour voir les détails (via window.console.dir)des expressions ou des déclarations.
Vous verrez le résultat dans la console, et le rendu de la page dans la fenêtre du navigateur reflétera les effets / changements.
- Astuce: C'est une excellente façon d'apprendre / tester les commandes de bibliothèques JavaScript comme jQuery.
- Astuce: Si vous exécutez un script qui modifie le DOM (par exemple en ajoutant des éléments), le contenu de l'onglet HTML ne sera pas mis à jour (et ne vous permettra pas non plus de sélectionner le nouvel élément via "Sélectionner l'élément pas clic") jusqu'à ce que vous cliquiez sur le bouton Actualiser
(celui dans les outils de développement, pas le bouton de rafraîchissement de la page IE).
Vous pouvez saisir une seule ligne, ou cliquer sur le bouton multiligne 
Travailler avec des Variables - Espions et variables locales
Parce que visualiser le code n'est qu'une partie de la bataille, vous aurez besoin d'inspecter des variables. Lors du débogage, l'onglet Script vous permet de survoler des variables pour en voir les détails.
Cela va de simples propriétés à des valeurs scalaires:
Pour l'inspection complète d'un objet :
Les sections variables locales et Espions vous aident à suivre les valeurs des variables et des objets. La section Variables locales est constamment mise à jour pour vous montrer les valeurs des variables à portées :
Les valeurs modifiées depuis la dernière instruction exécutée sont indiquées en rouge.
Le volet Espion ne vous affiche que les variables et expressions que vous avez indiquées. Vous pouvez également ajouter un espion directement dans le volet Espion, à partir d'une entrée dans le volet Variables locales, ou par un clic droit sur un nom de variable en mode débogage:
Notez également que pendant que vous exécutez un script via la console, les variables, les résultats jQuery, vous proposent d' "Ajouter un espion».
Contrairement au volet Variables locales, Espion conserve la même liste d'éléments pendant que vous exécutez le code. Les variables listées dans le volet Espion auront leur valeur affichée quand elles seront dans le scope de l'exécution, hors scope elle seront représentées comme "undefined":
Les volets Espion et Variables locales vous permettent de modifier les variables. Double-cliquez sur la ligne ou clic droit et choisissez "Modifier la valeur":
La Pile d'appels
Vous vous trouverez sûrement, pendant de débogage de script, à vous demander quelle série d'appels de fonctions vous a conduit là où vous vous trouvez. Utilisez le volet Pile d'appels pour voir le chemin d'appel des fonctions:
Vous pouvez naviguer entre les éléments de la pile d'appel en double-cliquant sur chaque élément. La ligne choisie dans la pile sera surligné en vert (et comme toujours la ligne courante / en cours d'exécution sera surlignée en jaune) :
Gérer les points d'arrêt
Enfin, vous pouvez directement indiquer aux outils de développement d'arrêter l'exécution de script sur certaines lignes en mettant des points d'arrêt. Il suffit de sélectionner la ligne dans l'onglet Script et appuyez sur la touche F9 ou avec un clic droit et choisissez l'option "Insérer un point d'arrêt»:
Vous pouvez aussi contrôler les conditions d'arrêt en configurant les options «Erreur de point d'arrêt" et "Continuer après exception» :
Sur l'onglet Script, le volet Points d'arrêt vous permet de visualiser et de gérer (activer / désactiver et supprimer) tous les points d'arrêt de façon centralisée:
Des points d'arrêt conditionnels peuvent être réglés via le volet Points d'arrêt (ci-dessus), ou par un clic droit sur l'indicateur de point d'arrêt et en choisissant "Condition ...":
Saisissez l'expression JavaScript pour la condition à vérifier (vous avez accès à toutes les variables dans le scope d'exécution) :
Les points d'arrêt conditionnels sont affichées avec un plus 
A suivre : Partie 4 - Profilage
J'espère que vous avez apprécié ce coup d'œil sur la façon de travailler sur du Javascript avec les outils de développement.
Dans le prochain article, nous allons jeter un œil au profilage et à l'optimisation du JavaScript en utilisant l'onglet Profileur des outils de développement pour analyser les performances du script.
Ce billet est une adaptation du post de Chris Bowen (Principal Developer Evangelist for Microsoft) : Internet Explorer 9 Developer Tools Deep Dive – Part 3: Debugging Javascript