Débogage de modèles d’affichage

Article d’origine publié le mardi 24 juillet 2012

Immédiatement après la publication de mon dernier billet sur l’utilisation de modèles d’affichage personnalisés, l’une des premières questions que j’ai obtenues était la suivante : comment les déboguer ? Voici donc quelques méthodes de débogage :

1. Dans votre modèle d’affichage, ajoutez votre propre script javascript après la première balise div et placez une instruction debugger; . Notez que vous DEVEZ désactiver l’option dans Internet Explorer pour désactiver le débogueur de script, puis redémarrer le navigateur. Cela est vraiment pratique car vous pouvez faire appel à Visual Studio et obtenir toutes vos valeurs de variables et de requêtes :

    

2. La deuxième méthode tient plus du codage en dur, ce n’est donc pas ma préférée mais jusqu’ici elle fonctionne bien.Voici comment procéder :

   1. Appuyez sur F12 pour accéder à la fenêtre de développeur IE
   2. Cliquez sur l’onglet Script
   3. Dans la liste déroulante des fichiers de scripts, sélectionnez clientrenderer.js
   4. Cherchez la fonction CoreRenderWorker ; je la trouve normalement en accédant à l’avant-dernière ligne du script et en appuyant sur la touche Fin.
   5. Cliquez et mettez en surbrillance la première ligne de code dans cette fonction ; ce doit être quelque chose comme « var a; »
   6. Cliquez avec le bouton droit sur celle-ci et sélectionnez Insérer un point d’arrêt dans le menu.
   7. Cliquez sur le bouton Démarrer le débogage.
   8. Revenez au navigateur et exécutez votre requête
   9. Lorsque le débogueur apparaît, cliquez sur l’onglet Variables locales du côté droit de la fenêtre, puis cliquez sur le signe plus en regard de la variable « c » pour la développer.
   10. Vous pouvez y voir toutes les variables, mais vous souhaiterez généralement cliquer sur le bouton Lire dans le débogueur et continuer. Chaque fois qu’un nouvel ensemble de code est chargé, la variable « c » est réduite, et vous devez revenir pour la développer de nouveau afin de voir les données qu’elle contient. Je dois généralement cliquer 3 à 5 fois sur le bouton Lire avant qu’un objet nommé « CurrentItem » n’apparaisse sous la variable « c ». Cela représente un résultat de recherche unique et vous permet de lire toutes les valeurs des propriétés gérées que vous avez demandées. Très pratique et ne nécessite pas Visual Studio.

 

Ce billet de blog a été traduit de l’anglais. L’article d’origine est disponible ici : Debugging Display Templates