Profiler et déboguer votre application ASP.NET MVC avec GlimpseProfile and debug your ASP.NET MVC app with Glimpse

par Rick Andersonby Rick Anderson

L’aperçu est une famille de packages NuGet Open source prospère et croissante qui fournit des informations détaillées sur les performances, le débogage et le diagnostic pour les applications ASP.NET.Glimpse is a thriving and growing family of open source NuGet packages that provides detailed performance, debugging and diagnostic information for ASP.NET apps. Il est facile d’installer, léger, ultra-rapide et d’afficher des mesures de performances clés en bas de chaque page.It's trivial to install, lightweight, ultra-fast, and displays key performance metrics at the bottom of every page. Elle vous permet d’accéder à votre application lorsque vous avez besoin de savoir ce qui se passe sur le serveur.It allows you to drill down into your app when you need to find out what's going on at the server. L’aperçu fournit des informations précieuses, nous vous recommandons de l’utiliser tout au long de votre cycle de développement, y compris votre environnement de test Azure.Glimpse provides so much valuable information we recommend you use it throughout your development cycle, including your Azure test environment. Bien que Fiddler et les outils de développement F-12 fournissent une vue côté client, l’outil aperçu fournit une vue détaillée du serveur.While Fiddler and the F-12 development tools provide a client side view, Glimpse provides a detailed view from the server. Ce didacticiel se concentre sur l’utilisation des packages ASP.NET MVC et EF, mais de nombreux autres packages sont disponibles.This tutorial will focus on using the Glimpse ASP.NET MVC and EF packages, but many other packages are available. Dans la mesure du possible, je vais créer un lien vers les documents d’aperçu appropriés que je vous aide à entretenir.Where possible I will link to the appropriate Glimpse docs which I help maintain. L’aperçu est un projet open source, vous pouvez également contribuer au code source et aux documents.Glimpse is an open source project, you too can contribute to the source code and the docs.

Installation de l’aperçuInstalling Glimpse

Vous pouvez installer l’aperçu à partir de la console du gestionnaire de package NuGet ou de la console gérer les packages NuGet .You can install Glimpse from the NuGet package manager console or from the Manage NuGet Packages console. Pour cette démonstration, je vais installer les packages Mvc5 et EF6 :For this demo, I'll install the Mvc5 and EF6 packages:

installer l’aperçu à partir de NuGet DLG

Recherche d' aperçu. EFSearch for Glimpse.EF

Aperçu. EF de NuGet install DLG

En sélectionnant packages installés, vous pouvez voir les modules dépendants d’aperçu installés :By selecting Installed packages, you can see the Glimpse dependent modules installed:

Packages d’aperçu installés à partir de la DLg

Les commandes suivantes installent les modules MVC5 et EF6 à partir de la console du gestionnaire de package :The following commands install Glimpse MVC5 and EF6 modules from the package manager console:

PM> Install-Package Glimpse.MVC5
PM> Install-Package Glimpse.EF6

Activer l’Aperçu pour localhostEnable Glimpse for localhost

Accédez à http://localhost:<p Trier #>/Glimpse.axd, puis cliquez sur le bouton activer l’aperçu .Navigate to http://localhost:<port #>/glimpse.axd and click the Turn Glimpse On button.

Page d’aperçu axd

Si votre barre de favoris est affichée, vous pouvez glisser-déplacer les boutons d’aperçu et les ajouter en tant que bookmarklets :If you have your favorites bar displayed, you can drag and drop the Glimpse buttons and add them as bookmarklets:

IE avec les bookmarklets d’aperçu

Vous pouvez maintenant naviguer dans votre application et l' affichage des têtes d’affichage (HUD) s’affiche au bas de la page.You can now navigate your app, and the Heads Up Display (HUD) is shown at the bottom of the page.

Page du gestionnaire de contacts avec HUD

La page Aperçu HUD détaille les informations de minutage indiquées ci-dessus.The Glimpse HUD page details the timing information shown above. Les données de performances discrètes affichées par HUD peuvent vous informer immédiatement d’un problème, avant d’aller au cycle de test.The unobtrusive performance data the HUD displays can notify you of a problem immediately - before you get to the test cycle. En cliquant sur le "g" dans le coin inférieur droit, vous affichez le panneau d’aperçu :Clicking on the "g" in the lower right corner brings up the Glimpse panel:

Panneau d’aperçu

Dans l’image ci-dessus, l' onglet exécution est sélectionné, qui affiche les détails de la minuterie des actions et des filtres dans le pipeline.In the image above, the Execution tab is selected, which shows timing details of the actions and filters in the pipeline. Vous pouvez voir mon minuteur de filtre Stop Watch démarrer à l’étape 6 du pipeline.You can see my Stop Watch filter timer start at stage 6 of the pipeline. Bien que mon minuteur clair puisse fournir des données de profil/minutage utiles, il manque tout le temps passé dans l’autorisation et le rendu de la vue.While my light weight timer can provide useful profile/timing data, it misses all the time spent in authorization and rendering the view. Vous pouvez en savoir plus sur mon minuteur au niveau du profil et l’heure de votre application ASP.NET MVC jusqu’à Azure.You can read about my timer at Profile and Time your ASP.NET MVC app all the way to Azure. La page onglets fournit des liens vers des informations détaillées sur chaque onglet.The Tabs page provides links to detailed information on each tab.

Onglet chronologieThe Timeline tab

J’ai modifié le didacticiel EF 6/MVC 5 en suspens de Tom Dykstra avec la modification de code suivante dans le contrôleur des enseignants :I've modified Tom Dykstra's outstanding EF 6/MVC 5 tutorial with the following code change to the instructors controller:

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 une chaîne de requête (eager) pour contrôler le chargement hâtif ou explicite des données.The code above allows me to pass in query string (eager) to control eager or explicit loading of data. Dans l’image ci-dessous, le chargement explicite est utilisé et la page minutage affiche chaque inscription chargée dans le Index méthode d’action :In the image below, explicit loading is used and the timing page shows each enrollment loaded in the Index action method:

chargement explicite

Dans le code suivant, hâtif est spécifié et chaque inscription est extraite après l’appel de la vue Index :In the following code, eager is specified, and each enrollment is fetched after the Index view is called:

hâtif est spécifié

Vous pouvez pointer sur un segment temporel pour obtenir des informations détaillées sur la temporisation :You can hover over a time segment to get detailed timing information:

pointer pour voir le minutage détaillé

Liaison de modèleModel Binding

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 certains ne sont pas liés comme prévu.The model binding tab provides a wealth of information to help you understand how your form variables are bound and why some are not bound as would expect. L’image ci-dessous montre les ?The image below shows the ? , sur laquelle vous pouvez cliquer pour afficher la page d’aide de l’aperçu de cette fonctionnalité.icon, which you can click on to bring up the glimpse help page for that feature.

vue de liaison du modèle aperçu

RoutesRoutes

L’onglet itinéraires d’aperçu peut vous aider à déboguer et à comprendre le routage.The Glimpse Routes tab will can help you debug and understand routing. Dans l’image ci-dessous, l’itinéraire du produit est sélectionné (et il s’affiche en vert, une convention d’aperçu).In the image below, the product route is selected (and it shows in green, a Glimpse convention). nom de produit sélectionné les contraintes de routage, les zones et les jetons de données sont également affichés.product name selected Route constraints, Areas and data tokens are also displayed. Pour plus d’informations, consultez itinéraires d’aperçu et routage d’attributs dans ASP.NET MVC 5 .See Glimpse Routes and Attribute Routing in ASP.NET MVC 5 for more information.

Utilisation de l’aperçu sur AzureUsing Glimpse on Azure

La stratégie de sécurité aperçu par défaut permet d’afficher uniquement les données d’aperçu à partir de l’hôte local.The Glimpse default security policy only allows Glimpse data to be displayed from local host. 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).You can change this security policy so you can view this data on a remote server (such as a web app on Azure). Pour les environnements de test sur Azure, ajoutez la marque mise en surbrillance au bas du fichier Web. config pour activer l’aperçu :For test environments on Azure, add the highlighted mark up to the bottom of the web.config file to enable Glimpse:

<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.With this change alone, any user can see your Glimpse data on a remote site. Envisagez d’ajouter le balisage ci-dessus à un profil de publication afin qu’il ne soit déployé qu’un appliqué lorsque vous utilisez ce profil de publication (par exemple, votre profil test Azure). Pour limiter les données d’aperçu, nous allons ajouter le rôle canViewGlimpseData et autoriser uniquement les utilisateurs de ce rôle à afficher les données d’aperçu.Consider adding the markup above to a publish profile so it's only deployed an applied when you use that publish profile (for example, your Azure test profile.) To restrict Glimpse data, we will add the canViewGlimpseData role and only allow users in this role to view Glimpse data.

Supprimez les commentaires du fichier GlimpseSecurityPolicy.cs et remplacez l’appel IsInRole Administrator par le rôle canViewGlimpseData :Remove the comments from the GlimpseSecurityPolicy.cs file and change the IsInRole call from Administrator to the canViewGlimpseData role:

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; }
    }
}

Warning

Sécurité : les données enrichies fournies par l’aperçu peuvent exposer la sécurité de votre application.Security - The rich data provided by Glimpse could expose the security of your app. Microsoft n’a pas effectué d’audit de sécurité sur l’Aperçu pour une utilisation sur les applications de production.Microsoft has not performed a security audit of Glimpse for use on productions apps.

Pour plus d’informations sur l’ajout de rôles, consultez le didacticiel mon déploiement d’une application web ASP.NET MVC 5 sécurisée avec appartenance, OAuth et SQL Database dans Azure .For information on adding roles, see my Deploy a Secure ASP.NET MVC 5 web app with Membership, OAuth, and SQL Database to Azure tutorial.

Ressources supplémentairesAdditional Resources