Profiler et déboguer votre application ASP.NET MVC avec Glimpse
par Rick Anderson
Aperçu est une famille prospère et croissante de open source packages NuGet qui fournit des informations détaillées sur les performances, le débogage et les informations de diagnostic pour les applications ASP.NET. Il est trivial d’installer, léger, ultra-rapide et d’afficher les métriques de performances clés en bas de chaque page. Il vous permet d’explorer votre application lorsque vous avez besoin de savoir ce qui se passe sur le serveur. Aperçu fournit des informations précieuses que nous vous recommandons d’utiliser tout au long de votre cycle de développement, y compris votre environnement de test Azure. Alors que Fiddler et les outils de développement F-12 fournissent une vue côté client, Aperçu fournit une vue détaillée du serveur. Ce tutoriel se concentrera sur l’utilisation des packages MVC et EF d’Aperçu ASP.NET, mais de nombreux autres packages sont disponibles. Dans la mesure du possible, je vais lier à la documentation d’aperçu appropriée que j’aide à maintenir. Aperçu est un projet open source, vous pouvez également contribuer au code source et à la documentation.
- Installation d’Aperçu
- Activer l’aperçu pour localhost
- Onglet Chronologie
- Liaison de modèle
- Itinéraires
- Utilisation d’Aperçu sur Azure
- Ressources supplémentaires
Installation d’Aperçu
Vous pouvez installer Glimpse à partir de la console du gestionnaire de package NuGet ou de la console Gérer les packages NuGet . Pour cette démonstration, j’installerai les packages Mvc5 et EF6 :
Rechercher Glimpse.EF
En sélectionnant Packages installés, vous pouvez voir les modules dépendants d’Aperçu installés :
Les commandes suivantes installent les modules Glimpse MVC5 et EF6 à partir de la console du gestionnaire de package :
PM> Install-Package Glimpse.MVC5
PM> Install-Package Glimpse.EF6
Activer l’aperçu pour localhost
Accédez au http://localhost:<port #>/aperçu.axd, puis cliquez sur le bouton Activer l’aperçu .
Si votre barre de favoris s’affiche, vous pouvez glisser-déplacer les boutons Aperçu et les ajouter en tant que signets :
Vous pouvez maintenant naviguer dans votre application, et l’affichage tête vers le haut (HUD) s’affiche en bas de la page.
La page Aperçu HUD détaille les informations de minutage indiquées ci-dessus. Les données de performances discrètes affichées par l’HUD peuvent vous avertir d’un problème immédiatement avant d’accéder au cycle de test. Le fait de cliquer sur le « g » dans le coin inférieur droit affiche le panneau Aperçu :
Dans l’image ci-dessus, l’onglet Exécution est sélectionné, qui affiche les détails de minutage des actions et des filtres dans le pipeline. Vous pouvez voir mon minuteur de filtre Stop Watch démarrer à l’étape 6 du pipeline. Bien que mon minuteur léger puisse fournir des données de profil/minutage utiles, il manque tout le temps passé dans l’autorisation et le rendu de la vue. Vous pouvez en savoir plus sur mon minuteur au moment du profil et de l’heure de votre application MVC ASP.NET jusqu’à Azure.
Onglet Chronologie
J’ai modifié le didacticiel EF 6/MVC 5 exceptionnel de Tom Dykstra avec le changement de code suivant sur le contrôleur des instructeurs :
public ActionResult Index(int? id, int? courseID, int ? eager)
{
var viewModel = new InstructorIndexData();
viewModel.Instructors = db.Instructors
.Include(i => i.OfficeAssignment)
.Include(i => i.Courses.Select(c => c.Department))
.OrderBy(i => i.LastName);
if (id != null)
{
ViewBag.InstructorID = id.Value;
viewModel.Courses = viewModel.Instructors.Where(
i => i.ID == id.Value).Single().Courses;
}
if (courseID != null)
{
ViewBag.CourseID = courseID.Value;
// Eager loading
if (eager != null && eager > 0)
{
ViewBag.eagerMsg = "Eager Loading";
viewModel.Enrollments = viewModel.Courses.Where(
x => x.CourseID == courseID).Single().Enrollments;
}
else {
// Explicit loading
ViewBag.eagerMsg = "Explicit Loading";
var selectedCourse = viewModel.Courses.Where(x => x.CourseID == courseID).Single();
db.Entry(selectedCourse).Collection(x => x.Enrollments).Load();
foreach (Enrollment enrollment in selectedCourse.Enrollments)
{
db.Entry(enrollment).Reference(x => x.Student).Load();
}
viewModel.Enrollments = selectedCourse.Enrollments;
}
}
return View(viewModel);
}
Le code ci-dessus me permet de transmettre la chaîne de requête (eager) pour contrôler le chargement hâtif ou explicite des données. Dans l’image ci-dessous, le chargement explicite est utilisé et la page de minutage affiche chaque inscription chargée dans la méthode d’action Index :
Dans le code suivant, hâtif est spécifié et chaque inscription est extraite une fois l’affichage Index appelé :
Vous pouvez pointer sur un segment de temps pour obtenir des informations de minutage détaillées :
Liaison de modèle
L’onglet liaison de modèle fournit une multitude d’informations pour vous aider à comprendre comment vos variables de formulaire sont liées et pourquoi certaines ne sont pas liées comme prévu. L’image ci-dessous montre l’icône ? , sur laquelle vous pouvez cliquer pour afficher la page d’aide d’aperçu de cette fonctionnalité.
Itinéraires
L’onglet Itinéraires d’aperçu peut vous aider à déboguer et à comprendre le routage. Dans l’image ci-dessous, l’itinéraire du produit est sélectionné (et il s’affiche en vert, convention Aperçu). 
Les contraintes de routage, les zones et les jetons de données sont également affichés. Pour plus d’informations, consultez Les itinéraires d’aperçu et le routage des attributs dans ASP.NET MVC 5 .
Utilisation d’Aperçu sur Azure
La stratégie de sécurité par défaut d’Aperçu autorise uniquement l’affichage des données d’Aperçu à partir de l’hôte local. Vous pouvez modifier cette stratégie de sécurité afin de pouvoir afficher ces données sur un serveur distant (par exemple, une application web sur Azure). Pour les environnements de test sur Azure, ajoutez la marque mise en surbrillance jusqu’au bas du fichier web.config pour activer Aperçu :
<glimpse defaultRuntimePolicy="On" endpointBaseUri="~/Glimpse.axd">
<runtimePolicies>
<ignoredTypes>
<add type="Glimpse.AspNet.Policy.LocalPolicy, Glimpse.AspNet"/>
</ignoredTypes>
</runtimePolicies>
</glimpse>
</configuration>
Avec cette modification seule, n’importe quel utilisateur peut voir vos données d’aperçu sur un site distant. Envisagez d’ajouter le balisage ci-dessus à un profil de publication afin qu’il soit déployé uniquement quand vous utilisez ce profil de publication (par exemple, votre profil de test Azure).) Pour restreindre les données d’aperçu, nous allons ajouter le canViewGlimpseData rôle et autoriser uniquement les utilisateurs de ce rôle à afficher les données d’aperçu.
Supprimez les commentaires du fichier GlimpseSecurityPolicy.cs et remplacez l’appel IsInRole par Administrator le canViewGlimpseData rôle :
public class GlimpseSecurityPolicy : IRuntimePolicy
{
public RuntimePolicy Execute(IRuntimePolicyContext policyContext)
{
var httpContext = policyContext.GetHttpContext();
if (!httpContext.User.IsInRole("canViewGlimpseData"))
{
return RuntimePolicy.Off;
}
return RuntimePolicy.On;
}
public RuntimeEvent ExecuteOn
{
get { return RuntimeEvent.EndRequest | RuntimeEvent.ExecuteResource; }
}
}
Avertissement
Sécurité : les données enrichies fournies par Aperçu peuvent exposer la sécurité de votre application. Microsoft n’a pas effectué d’audit de sécurité d’Aperçu pour une utilisation sur les applications de production.
Pour plus d’informations sur l’ajout de rôles, consultez mon didacticiel Déployer un ASP.NET web MVC 5 avec appartenance, OAuth et SQL Database à Azure.