It wasn't long after I started using EPiServer that I notices Page Output for ASP.NET Trace doesn't work with the CMS (I even took the time to file a bug with EPiServer but I can't find it now to link to :( ). After some messing around I discovered the only way to show Trace page output is by ending the response prematurely, for example sticking a Response.End() in the PreRender, but that's not a good idea, right... The other alternative is to use trace.axd which isn't a disaster but it's not entirely convenient.
MvcMiniProfiler is a new tool by the good folks over at Stack Exchange which gives a really easy and clean API for tracing within your page requests, it works for the main request and any AJAX calls. Many EPiServer projects require some bespoke data access beyond that usual EPiServer Pages and Properties model, to this end, MiniProfiler has a custom SqlConnection which provides profiling info for your queries that can be used with all of your favourite data access technologies.
In this post, I'm going to walk you through the basics of getting MvcMiniProfiler up and running with EPiServer.
NuGet
First of all, you'll need to install NuGet from NuGet.org or the Visual Studio Extension Manager. We'll need this for two things, installing MvcMiniProfiler but before that we'll need to upgrade our EPiServer project to .NET 4.0.
You could upgrade from .NET 3.5 to 4.0 manually but luckily for you, there's a package on the EPiServer NuGet gallery that will do it for you in a couple of seconds. Once you've got NuGet installed, edit the Package Manager Settings and add the EPiServer feed (http://nuget.episerver.com/feed/packages.svc) as a source.
Next select All in the Package Source menu 
then type the following at the Package Manager prompt:
PM> Install-Package EPiServerCMS6ToNetFour
Hit return and a couple of seconds later, your app will be upgraded to .NET 4.
Now that we're running on the right platform, we can install MvcMiniProfiler. This package is on the official NuGet feed (but if your Package Source is still set to All you're golden) so install it with the following:
PM> Install-Package MiniProfiler
Basic Setup
Now that NuGet has taken care of downloading the required DLLs and added a reference to your project we're ready to start profiling. Note that the new DLLs are in a packages folder in the directory above your web application. There is also a packages.config in the root of your application; you might want to add these to source control.
Getting MvcMiniProfiler up and running is really easy, all we need to do is four simple things; first, start the profiler when a request starts, then stop it when a request ends. The Application class (Global.asax) has the perfect events for this. I personally like to add a CodeBehind to my Global.asax, so here's my code:
Global.asax
<%@ Application Language="C#" Inherits="EPiServer_MiniProfiler.Global"
CodeBehind="Global.asax.cs" %>
Global.asax.cs
using System;
using System.Web;
using MvcMiniProfiler;
namespace EPiServer_MiniProfiler
{
public class Global : EPiServer.Global
{
void Application_BeginRequest(object sender, EventArgs e)
{
MiniProfiler.Start();
}
void Application_EndRequest(object sender, EventArgs e)
{
MiniProfiler.Stop();
}
}
}
Thirdly, we need to profile some code. This is done in a really clever way, making use of IDisposable and the using statement. Create a new EPiServer template and in the OnLoad event, add the following code:
protected override void OnLoad(EventArgs e)
{
base.OnLoad(e);
using (MiniProfiler.StepStatic("Some long running step"))
{
// Do some work here
Thread.Sleep(123);
}
}
Last but not least we need to render the generated JavaScript to the page. This is made super easy, simply add the following to the <head> of your page:
<%= MvcMiniProfiler.MiniProfiler.RenderIncludes().ToHtmlString() %>
Usage
Now build your project and visit your template. In the top left hand corner you should see a little tab like this:
and clicking the tab will show the non-trivial events that were profiled, like so:
AJAX Tracing
As I mentioned earlier, AJAX requests are profiled as well, to demonstrate this lets add a WebMethod to our template and a little bit of JavaScript to call it.
I've added the following WebMethod to the CodeBehind of my template, which incidentally is Default.aspx in the root of the application.
[WebMethod]
public static string Hello()
{
using (MvcMiniProfiler.MiniProfiler.StepStatic("WebMethod Hello"))
{
Thread.Sleep(321);
return DataFactory.Instance.GetPage(PageReference.StartPage).PageName;
}
}
Then we need to call this from our browser, to do this I'm using jQuery (from the Google CDN) and a simple ajax call. Add the following to the <head> of your template:
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$.ajax({
type: "POST",
url: "Default.aspx/Hello",
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (msg) {
// Replace the div's content with the page method's return value.
$("#Result").text("AJAX: " + msg.d);
}
});
});
</script>
and then add a div to the <body> of the page to receive the result of the AJAX call:
<div id="Result">
</div>
Build the project and refresh the page and you should see an extra trace notification stack up in the top left corner like so:
You can inspect the profile of this AJAX request by clicking on it just like the main page request.
Next time
We haven't really touched on anything EPiServer specific here but I hope you like what you've seen. MvcMiniProfiler is a quick and easy way to add profiling to your pages and has a really nice API in the form of IDisposable steps which you use to denote sections of your page.
You can find out more about MvcMiniProfiler on the Google Code page, on Marc Gravell's blog, and on Stack Overflow.
Next time I'm going to introduce a few EPiServer-specific bits and pieces that will help you get from zero to profiled pages much quicker.
Subscribe