Bagikan melalui

Profil dan debug aplikasi MVC ASP.NET Anda dengan Glimpse

oleh Rick Anderson

Glimpse adalah keluarga paket NuGet sumber terbuka yang berkembang dan berkembang yang memberikan informasi performa, penelusuran kesalahan, dan diagnostik terperinci untuk aplikasi ASP.NET. Sangat mudah untuk menginstal, ringan, sangat cepat, dan menampilkan metrik performa utama di bagian bawah setiap halaman. Ini memungkinkan Anda untuk menelusuri paling detail aplikasi Anda saat Anda perlu mengetahui apa yang terjadi di server. Glimpse memberikan begitu banyak informasi berharga, kami sarankan Anda menggunakannya sepanjang siklus pengembangan Anda, termasuk lingkungan pengujian Azure Anda. Sementara Fiddler dan alat pengembangan F-12 memberikan tampilan sisi klien, Glimpse memberikan tampilan terperinci dari server. Tutorial ini akan berfokus pada penggunaan paket Glimpse ASP.NET MVC dan EF, tetapi banyak paket lain yang tersedia. Jika memungkinkan, saya akan menautkan ke dokumen Sekilas yang sesuai yang saya bantu pertahankan. Glimpse adalah proyek sumber terbuka, Anda juga dapat berkontribusi pada kode sumber dan dokumen.

Menginstal Glimpse

Anda dapat menginstal Glimpse dari konsol manajer paket NuGet atau dari konsol Kelola Paket NuGet . Untuk demo ini, saya akan menginstal paket Mvc5 dan EF6:

instal Glimpse dari NuGet Dlg

Cari Glimpse.EF

Glimpse.EF dari NuGet install dlg

Dengan memilih Paket terinstal, Anda dapat melihat modul dependen Sekilas terinstal:

Paket Glimpse terinstal dari DLg

Perintah berikut menginstal modul Glimpse MVC5 dan EF6 dari konsol manajer paket:

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

Aktifkan Glimpse untuk localhost

Navigasi ke http://localhost:<port #>/glimpse.axd dan klik tombol Aktifkan Sekilas .

Halaman glimpse axd

Jika bilah favorit Anda ditampilkan, Anda dapat menyeret dan meletakkan tombol Sekilas dan menambahkannya sebagai bookmarklet:

IE dengan bookmarklet Glimpse

Sekarang Anda dapat menavigasi aplikasi, dan Heads Up Display (HUD) ditampilkan di bagian bawah halaman.

Halaman Contact Manager dengan HUD

Halaman Glimpse HUD merinci informasi waktu yang ditunjukkan di atas. Data performa yang tidak mengganggu yang ditampilkan HUD dapat segera memberi tahu Anda tentang masalah - sebelum Anda sampai ke siklus pengujian. Mengklik "g" di sudut kanan bawah memunculkan panel Sekilas:

Panel sekilas

Pada gambar di atas, tab Eksekusi dipilih, yang menunjukkan detail waktu tindakan dan filter dalam alur. Anda dapat melihat timer filter Stop Watch saya mulai pada tahap 6 alur. Meskipun timer ringan saya dapat memberikan data profil/waktu yang berguna, itu melewatkan semua waktu yang dihabiskan dalam otorisasi dan merender tampilan. Anda dapat membaca tentang timer saya di Profil dan Waktu aplikasi MVC ASP.NET Anda sampai ke Azure.

Tab Garis Waktu

Saya telah memodifikasi tutorial EF 6/MVC 5 Tom Dykstra yang luar biasa dengan perubahan kode berikut ke pengontrol instruktur:

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

Kode di atas memungkinkan saya untuk meneruskan string kueri (eager) untuk mengontrol pemuatan data yang bersemangat atau eksplisit. Pada gambar di bawah ini, pemuatan eksplisit digunakan dan halaman pengaturan waktu menunjukkan setiap pendaftaran yang Index dimuat dalam metode tindakan:

pemuatan eksplisit

Dalam kode berikut, bersemangat ditentukan, dan setiap pendaftaran diambil setelah Index tampilan dipanggil:

eager ditentukan

Anda dapat mengarahkan mouse ke segmen waktu untuk mendapatkan informasi pengaturan waktu terperinci:

arahkan mouse ke melihat waktu terperinci

Pengikatan Model

Tab pengikatan model memberikan banyak informasi untuk membantu Anda memahami bagaimana variabel formulir Anda terikat dan mengapa beberapa tidak terikat seperti yang diharapkan. Gambar di bawah ini menunjukkan ikon ? , yang dapat Anda klik untuk memunculkan halaman bantuan sekilas untuk fitur tersebut.

tampilan pengikatan model sekilas

Rute

Tab Rute Sekilas akan membantu Anda men-debug dan memahami perutean. Pada gambar di bawah ini, rute produk dipilih (dan menunjukkan berwarna hijau, konvensi Sekilas). nama produk dipilih Batasan rute, Area, dan token data juga ditampilkan. Lihat Rute Sekilas dan Perutean Atribut di ASP.NET MVC 5 untuk informasi selengkapnya.

Menggunakan Glimpse di Azure

Kebijakan keamanan default Glimpse hanya memungkinkan data Glimpse ditampilkan dari host lokal. Anda dapat mengubah kebijakan keamanan ini sehingga Anda dapat melihat data ini di server jarak jauh (seperti aplikasi web di Azure). Untuk lingkungan pengujian di Azure, tambahkan tanda yang disorot ke bagian bawah file web.config untuk mengaktifkan Glimpse:

<glimpse defaultRuntimePolicy="On" endpointBaseUri="~/Glimpse.axd">
    <runtimePolicies>
      <ignoredTypes>
        <add type="Glimpse.AspNet.Policy.LocalPolicy, Glimpse.AspNet"/>
      </ignoredTypes>
    </runtimePolicies>
  </glimpse>
</configuration>

Dengan perubahan ini saja, setiap pengguna dapat melihat data Sekilas Anda di situs jarak jauh. Pertimbangkan untuk menambahkan markup di atas ke profil penerbitan sehingga hanya diterapkan saat Anda menggunakan profil penerbitan tersebut (misalnya, profil pengujian Azure Anda.) Untuk membatasi data Glimpse, kami akan menambahkan canViewGlimpseData peran dan hanya mengizinkan pengguna dalam peran ini untuk melihat data Sekilas.

Hapus komentar dari file GlimpseSecurityPolicy.cs dan ubah panggilan IsInRole dari Administrator ke canViewGlimpseData peran:

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

Peringatan

Keamanan - Data kaya yang disediakan oleh Glimpse dapat mengekspos keamanan aplikasi Anda. Microsoft belum melakukan audit keamanan Glimpse untuk digunakan pada aplikasi produksi.

Untuk informasi tentang menambahkan peran, lihat tutorial Menyebarkan aplikasi web Secure ASP.NET MVC 5 dengan Keanggotaan, OAuth, dan SQL Database ke Azure.

Sumber Daya Tambahan