Les développeurs Web sont habitués à utiliser le fameux F12 dans leur navigateur favoris pour accéder aux Developper Tools et notamment à la partie network pour observer les différents appels. Les développeurs d’apps quant à eux n’avaient pas directement ces outils intégrés dans leur environnement de travail, c’est pourquoi la plupart du temps ils utilisaient des logiciels tiers comme l’excellent Fiddler.

Microsoft, dans cette nouvelle version de Visual Studio 2015 (version RC), a pensé aux développeurs d’apps et leur propose un nouvel outil directement intégré dans leur environnement de travail pour diagnostiquer les échanges réseaux d’une application. Ces outils font leur apparition dans les Diagnostics and Performance Tools parmi ceux déjà présents (CPU, GPU, …).

Parce que réaliser une bonne application passe aussi par ses performances et son temps de réaction, vous aurez surement besoin d’utiliser ce nouvel outil si vous souhaitez avoir des retours positifs de vos utilisateurs.

Comment utiliser le Network Tool ?

Dans votre solution vous pouvez l’activer en allant dans le menu Debug puis “Start Diagnostic Tools without Debugging” ou bien, pour les fans de raccourcis directement en pressant les touches Alt+F2. Dans la fenêtre, choisissez le projet sur lequel vous souhaitez démarrer les outils puis cochez l’outil Network puis démarrez le diagnostique. Vous pouvez maintenant naviguer dans votre application et voir en temps réel, dans la fenêtre Network, les différents appels que votre application effectue.

La vue “Résumé”

Ces appels réseaux sont par défaut triés par ordre chronologique, mais vous pouvez les trier comme bon vous semble en cliquant sur les entêtes des colonnes, vous pouvez également les filtrer selon les types de contenu (document, css, images, scripts …). Comme tout outil de Network, chaque ligne du tableau représente une requête et quelques métriques sont affichées :

• Url,
• Protocole (Http, Https, …),
• Méthode (Get, Post, …),
• Statut HTTP (200, 304, 500, …)
• Type Mime (application/json, image/png, …)
• le poids du contenu reçu,
• le temps d’exécution de l’appel,
• et enfin un graphique représentant le déroulement de l’appel

En bas du tableau, vous avez un résumé des appels effectués avec le nombre d’erreurs (avec un statut HTTP 4xx ou 5xx), le nombre total de requêtes, le temps total d’exécution, le poids total des requêtes.

Dans le cadre d’un scénario d’analyse de performance en équipe, vous avez la possibilité de sauvegarder (grâce à la disquette au dessus du tableau) le jeu de requêtes que vous venez d’exécuter sous la forme d’un JSON HAR. De nombreux logiciels peuvent lire ce type de fichier (notamment Fiddler) pour ainsi partager vos différents tests réseaux.

La vue “Détails”

Cette vue détaillé permet comme son nom l’indique d’avoir plus de détails sur une requête. Pour l’obtenir cliquez simplement sur la ligne dont vous souhaitez avoir le détails dans le tableau précèdent. Dans cette vue, découpée en 5 sections, vous aurez tous les détails nécessaires pour comprendre la requête :

• l’onglet Headers présente les entêtes de l’appel et de la réponse,
• l’onglet Body présente le contenu de l’appel et de la réponse avec un affichage adapté,
• l’onglet Parameters présente les query string de l’appel dans un affichage adapté,
• l’ongle Cookies présente le contenu des cookies de l’appel et la réponse,
• et enfin l’onglet Timings qui affiche le détails du temps d’acquisition de la réponse.

Cet outil n’est pas une révolution en soit puisque nous avions des outils annexes nous permettant de réaliser ce genre d’analyse. Mais étant directement intégré dans Visual Studio, celui-ci nous permet rapidement de visualiser et de détailler les appels réseaux sans avoir besoin d’installer un autre logiciel. De plus, pour ceux qui utilise Fiddler, vous n’aurez plus la mésaventure du proxy Fiddler qui se détache mal lors de la fermeture de celui-ci !