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

Aperçu est plein essor et en constante évolution de la famille de packages NuGet d’open source qui fournit les données de performances détaillées, débogage et des informations de 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 très facile à installer, léger et ultra rapide et affiche les 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. Il vous permet d’approfondir votre application lorsque vous avez besoin savoir ce qui se passait au niveau du serveur.It allows you to drill down into your app when you need to find out what's going on at the server. Aperçu fournit des informations précieuses tellement que nous vous recommandons de qu'utiliser cela dans 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. Tandis que Fiddler et les outils de développement F-12 fournissent un côté client vue Aperçu fournit une vue détaillée à partir 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 aborde l’utilisation de l’aperçu ASP.NET MVC et les packages d’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. Lorsque cela est possible de lier sera à approprié apercevoir docs dont j’ai aider à maintenir.Where possible I will link to the appropriate Glimpse docs which I help maintain. Aperçu est un projet open source, vous pouvez trop contribuer au code source et la documentation.Glimpse is an open source project, you too can contribute to the source code and the docs.

L’installation d’aperçuInstalling Glimpse

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

installer l’aperçu à partir de NuGet Dlg

Recherchez Glimpse.EFSearch for Glimpse.EF

Glimpse.EF à partir de NuGet install dlg

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

Packages de Glimpse installés à partir de DLg

Les commandes suivantes installent les modules de Glimpse 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:< port #>/glimpse.axd et cliquez sur le activer un aperçu sur bouton.Navigate to http://localhost:<port #>/glimpse.axd and click the Turn Glimpse On button.

Page d’aperçu axd

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

Internet Explorer avec Glimpse bookmarklets

Vous pouvez désormais parcourir votre application et le têtes d’affichage (HUD) s’affiche en 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 Gestionnaire de contacts avec HUD

Le page d’aperçu HUD décrit en détail les informations de minutage indiquées ci-dessus.The Glimpse HUD page details the timing information shown above. Les affichages de données le HUD performances discrète peuvent vous avertir d’un problème immédiatement - avant de commencer le 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 permet d’afficher le volet d’aperçu :Clicking on the "g" in the lower right corner brings up the Glimpse panel:

Volet d’aperçu

Dans l’image ci-dessus, le onglet exécution est sélectionnée, qui affiche les détails de minutage 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 d’arrêter un espion commencent à l’étape 6 du pipeline.You can see my Stop Watch filter timer start at stage 6 of the pipeline. Mon minuteur léger peut contribuer utile profil/synchronisation de données, il n’arrive pas tout le temps passé en matière d’autorisation et de rendu de l’affichage.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 lire sur mon minuterie à Profiler 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. Le onglets page fournit des liens vers des informations détaillées sur chaque onglet.The Tabs page provides links to detailed information on each tab.

L’onglet de la chronologieThe Timeline tab

J’ai modifié de Tom Dykstra en suspens didacticiel sur EF 6/MVC 5 par le code suivant, remplacez par le contrôleur instructors :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 passer dans la chaîne de requête (eager) au contrôle hâtif ou explicite le chargement de 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 de 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 extrait après le Index vue est appelée :In the following code, eager is specified, and each enrollment is fetched after the Index view is called:

Eager est spécifié.

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

pointage pour voir de temporisation détaillées

Liaison de modèleModel Binding

Le onglet de liaison de modèle fournit une mine d’informations pour vous aider à comprendre comment vos variables de formulaire sont liés et pourquoi certaines ne sont pas liés comme peut l’attendre.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 le ?The image below shows the ? icône, vous pouvez cliquer sur pour afficher la page d’aide Aperçu pour cette fonctionnalité.icon, which you can click on to bring up the glimpse help page for that feature.

visualiser la vue de liaison de modèle

RoutesRoutes

L’onglet Aperçu itinéraires sera peuvent 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 de produit est sélectionné (et elle est affichée 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 du produit sélectionné jetons contraintes, les zones et les données d’itinéraire sont également affichés.product name selected Route constraints, Areas and data tokens are also displayed. Consultez Glimpse itinéraires et routage par attributs dans ASP.NET MVC 5 pour plus d’informations.See Glimpse Routes and Attribute Routing in ASP.NET MVC 5 for more information.

À l’aide de Glimpse sur AzureUsing Glimpse on Azure

La stratégie de sécurité d’aperçu par défaut autorise uniquement les données d’aperçu à afficher à 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é pour 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, ajouter la marque en surbrillance jusqu'à la partie inférieure de la web.config fichier 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 uniquement, 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 a déployé uniquement un appliqués lorsque 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 d’autoriser uniquement les utilisateurs à ce rôle pour 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 de la GlimpseSecurityPolicy.cs du fichier et changer la IsInRole appeler à partir de Administrator à la canViewGlimpseData rôle :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é - données riches fournies par l’aperçu peut 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é un audit de sécurité de 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 mon déployer une application web de Secure ASP.NET MVC 5 avec appartenance, OAuth et base de données SQL dans Azure didacticiel.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