آموزش MVC – (تحلیل کارایی برنامه و جمع آوری آمار و اطلاعات مربوطه) Profiling و اشکال زدایی اپلیکیشن تحت وب ASP.NET MVC با استفاده از Glimpse

آموزش MVC – مقایسه ی View های با نوع مشخص شده (Strongly-typed views) و View هایی با نوع نامشخص در زمان اجرا (dynamic views) در اپلیکیشن MVC

آموزش MVC – (تحلیل کارایی برنامه و جمع آوری آمار و اطلاعات مربوطه) Profiling و اشکال زدایی اپلیکیشن تحت وب ASP.NET MVC با استفاده از Glimpse

Glimpse یک خانواده ی بزرگ و در حال گسترش از پکیج های متن باز و رایگان (open source) NuGet است که اطلاعات دقیق و جزئی درباره ی میزان کارایی اپلیکیشن، اشکال زدایی، تشخیص خطاها را برای اپلیکیشن های تحت وب مبتنی بر ASP.NET فراهم می کند. نصب این پکیج ساده بوده، حجمی که در حافظه اشغال می کند ناچیز است و علاوه بر بسیار سریع بودن، معیارهای اصلی سنجش کارایی و آماره ی مربوطه را در پایین تمامی صفحات سایت به نمایش می گذارد. با بهره گیری از ابزار نام برده توسعه دهنده می تواند در صورت نیاز به آگاهی از بخش های سمت سرور اپلیکیشن، وارد جزئیات داخلی و زیرساخت اپلیکیشن شده و اطلاعات لازم را مشاهده نماید. در واقع تا حدی Glimpse در جهت ارائه اطلاعات مفید کاربردی می باشد که ما توصیه می کنیم از آن در طول دوره ی توسعه ی نرم افزار خود، حتی تست نرم افزار در محیط Azure، استفاده نمایید.

به عبارت دیگر، Glimpse یک ابزار قدرتمند و کارا برای مشاهده ی زمان اجرا و runtime کدها، تنظیمات سرویس دهنده، web request ، خطایابی، سنجش کارایی اپلیکیشن های تحت وب می باشد. برخلاف ابزار Fiddler و F12 در مرورگر که تنها اطلاعات مربوط به کارایی را در سمت کلاینت به نمایش می گذارند، Glimpse به توسعه دهنده این امکان را می دهد تا اطلاعات دقیق و جزئی سمت سرویس دهنده را مشاهده نماید.

اگرچه پکیج و کتابخانه های کارامد دیگری برای سنجش، گردآوری و نمایش اطلاعات مربوطه به کارایی اپلیکیشن وجود دارد، با این حال آموزش حاضر منحصرا تمرکز خود را بر روی استفاده از پکیج های EF و Glimpse ASP.NET MVC قرار می دهد.

نصب Glimpse

برای این منظور کافی است به کنسول package manager مراجعه کرده یا آن را از طریق کنسول Manage NuGet Packages در محیط کاری Visual Studio نصب نمایید. در این آموزش پکیج های Mvc5 و EF6 را نصب می کنیم:

واژه ی Glimpse.EFرا در کادر جستجو وارد نمایید.

با کلیک بر روی Installed packages، می توانید ماژول های وابسته به Glimpse که بر روی سیستم نصب شده اند را مشاهده نمایید:

دستورات زیر ماژول های MVC5 و EF6 را از کنسول package manager نصب می کنند:

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

فعال سازی Glimpse برای localhost یا سرویس دهنده ی محلی

پنجره ی مرورگر را باز کرده و پس درج آدرس http://localhost:< port # >/glimpse.axd در address bar، به صفحه ی مربوطه پیمایش نمایید. در این صفحه بر روی دکمه ی Turn Glimpse On جهت فعال سازی این ابزار کلیک نمایید.

می توانید جهت دسترسی سریع و آسان، پس از باز کردن نوار Favorites مرورگر، با استفاده از قابلیت drag&drop دکمه های Glimpse را به عنوان bookmarklet ذخیره نمایید:

حال می توانید به صفحه ی index اپلیکیشن خود در مرورگر پیمایش نمایید. می بینید که (نواری که اطلاعات دقیق و جزئی اپلیکیشن را نمایش می دهد) Heads Up Display در پایین صفحه به نمایش گذاشته می شود:

نواری که در پایین صفحه مشاهده می کنید ابزار Glimpse را نمایش می دهد. این نوار از سه بخش تشکیل شده است:

• HTTP: اطلاعات مربوط به Request، زمان پاسخ دهی و اطلاعات سرویس دهنده را شامل می شود.
• Host: اطلاعات صفحه ی بارگذاری و اجرا شده، مقدار زمان لازم برای پاسخ، تعداد کوئری های اجرا شده بر روی دیتابیس و زمان آن را نمایش می دهد.
• AJAX: درخواست های مبتنی بر ajax و تعداد آن نمایش داده می شود.

صفحه ی Glimpse HUD که تحت آدرس http://getglimpse.com/Docs/Heads-up-Display قابل دسترسی است، اطلاعات دقیق زمان سنجی که در بالا به صورت مختصر نمایش داده شده را با جزئیات نمایش می دهد.

اطلاعات تحلیل و سنجش کارایی اپلیکیشن که نوار HUD به صورت unobtrusive و مختصر در پایین صفحات اپلیکیشن به نمایش می گذارد، می تواند به سرعت (بلادرنگ) شما را از رخداد خطا و بروز مشکل (قبل از رسیدن پروژه به مرحله ی تست) مطلع کند. جهت مشاهده ی پنل Glimpse می توانید بر روی آیکون g در پایین، سمت راست صفحه کلیک نمایید:

تب Execution در تصویر بالا، pipeline (توالی) اجرای توابع (action)، action result و نوع/رده ی فیلتر (Authorization, Action, Response, Exception) که برای پاسخ دهی به HTTP Request لازم است را مشخص می نماید (pipeline = زنجیره ای از المان های پردازنده نظیر process ها، توابع و thread ها که طوری مرتب سازی شده اند که خروجی هر المان، ورودی بعدی می باشد).

تب Timeline

تب TimeLine اطلاعات مربوط به زمان شروع، اتمام و طول event ها را از تمامی دیگر تب های پنل Glimspe جمع آوری کرده و آن را به صورت بصری برای شما در یک تب واحد نمایش می دهد.

کد زیر نسخه ی ویرایش شده ی کلاس کنترلر instructors از آموزش EF6/MVC5 (https://docs.microsoft.com/en-us/aspnet/mvc/overview/getting-started/getting-started-with-ef-using-mvc/creating-an-entity-framework-data-model-for-an-asp-net-mvc-application) می باشد:

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

قطعه کد بالا به توسعه دهنده امکان می دهند که متغیر (query string) eager را به تابع index پاس داده و از این طریق مشخص کند که داده ها باید به صورت زودهنگام (eager loading) یا صریح (explicit loading) بارگذاری شوند. همان طور که در تصویر زیر می بینید، داده ها به صورت صریح (با explicit loading) بارگذاری شده اند و صفحه ی timing مقدار زمانی که طول کشیده تا هر Enrollment در متد Index بارگذاری شود را نمایش می دهد:

در تصویر زیر می بینید که مقدار 1 به متغیر (query string) eager ارسال شده و داده ها بایستی به صورت زودهنگام (eager loading) از دیتابیس بارگذاری شوند. همان طور که مشاهده می کنید مقدار هر فیلد enrollment پس از فراخوانی (view) Index از دیتابیس واکشی شده و اطلاعات مربوط به مقدار زمان لازم برای هر بارگذاری نیز به نمایش گذاشته شده است:

برای مشاهده ی اطلاعات دقیق زمان سنجی (مقدار زمانی که طول کشیده تا هر enrollment بارگذاری شود) می توانید مکان نمای موس را بر روی بخش مربوطه در صفحه معلق نگه دارید:

تب model binding

تب model binding اطلاعات فراوانی را در خصوص متغیرهای form و اینکه چرا برخی با موفقیت bind () شده و برخی دیگر برخلاف انتظار bind نمی شوند، در اختیار توسعه دهنده قرار می دهد. در تصویر زیر آیکون ? را مشاهده می کنید که اگر بر روی آن کلیک کنید، صفحه ی help از پنل Glimpse برای امکان مربوطه به نمایش در می آید.

تب Routes

تب Glimpse به شما این امکان را می دهد تا قابلیت آدرس دهی پروژه/routing را اشکال زدایی (debug) کرده و آن را بهتر درک کنید. همان طور که در تصویر زیر می بینید، روت (route) product انتخاب شده است که Glimpse آن را به صورت پیش فرض با رنگ سبز مشخص می کند.

اطلاعات مربوط به (اعمال اعتبارسنجی بر روی route ها) route constraint ها، Area و data token ها نیز نمایش داده شده اند.

استفاده از Glimpse در Azure

قوانین و سیاست های امنیتی Glimpse به این ابزار فقط اجازه ی نمایش اطلاعات از سرور محلی (localhost) را می دهد. با این حال شما می توانید سیاست امنیتی پیش فرض Glimpse را تغییر داده تا داده ها در یک سرور راه دور همچون اپلیکیشنی تحت وبی که بر روی Azure مستقر است، نیز نمایش داده شود. برای تست اپلیکیشن در بستر Azure، کد مشخص شده در زیر را به پایین فایل web.config اضافه نموده تا Glimpse فعال شده و داده های خود را در سرور راه دور نیز به نمایش بگذارد:

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

با اعمال تغییر فوق، هر کاربری می تواند داده های مربوط به کارایی اپلیکیشن که Glimpse جمع آوری کرده را در یک سرور راه دور مشاهده کند. می توانید با اضافه کردن کد مشخص شده ی بالا به یک فایل publish profile، به Glimpse دستور بدید که تنها زمانی که از این فایل publish profile استفاده می کنید، اطلاعاتش را در سرور راه دور نیز به نمایش بگذارد (برای مثال Azure test profile خود). به منظور محدودسازی سطح دسترسی به اطلاعات Glimpse می توانید نقش کاربری (role) canViewGlimpseData را نیز اضافه کرده و بدین وسیله تنها به کاربران خاصی مجوز مشاهده ی داده های Glimpse را دهید.

comment ها را از فایل GlimpseSecurityPolicy.cs حذف کرده و پارامتر ارسالی به تابع IsInRole را از مقدار (نشانگر نقش کاربری و سطح دسترسی) Administrator به canViewGlimpseData تغییر دهید:

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