How do I use MiniProfiler with a single page web app / REST backend?

Question

I have a single page javascript application (done with JavascriptMvc) and a backend with REST services built on top of ASP.NET MVC3 (done with NServiceMVC).

The REST services have MiniProfiler installed and running, and the X-MiniProfiler-Ids headers come back with each AJAX request. I do actually have miniprofiler running and working, but I could not find any info on this, and so I am not sure if I'm doing it the right way.

Is this a supported scenario, and is there a specific way to do this now?

---

What I am currently doing is this:

In the HTML app (which is all static code, no dynamic stuff), I have:

<script type="text/javascript" src="/api/profiler"></script>

In my MVC app, I have:

    public ActionResult Profiler()
    {
        if (!ControllerContext.HttpContext.IsDebuggingEnabled)
        {
            return new EmptyResult();
        }
        return new ContentResult() { 
            Content = StackExchange.Profiling.MiniProfiler.RenderIncludes(
                        position: RenderPosition.Right,
                        showControls: true
                      )
                      .ToString()
                      .Replace("<script type=\"text/javascript\">", "")
                      .Replace("</script>", "") 
        };
    }

Clearly, there is a hack in here to strip out the hardcoded <script> tags.

Other than this, from the rest of the MVC side of things, profiler is used exactly the same as usual. When you do an action in the app that causes a REST call to happen, miniprofiler shows it up in the corner. Using the showControls:true parameter is pretty helpful here too so the clear button shows up, because otherwise you just get a constant list of actions since the entire page essentially never refreshes.

Is this the "correct" way to do this, or is there a better way?

Answer 1

There is an assumption in your code that @MiniProfiler.RenderIncludes() generates all of it's content using javascript. While that may be a valid assumption at the current time, this could change.

Why not simply avoid the hacks altogether and use an ajax request to load the profiler? In either scenario, whether ajax or embedded script, the act of inserting the profiler via a callback will affect the outcome of profiling somewhat.

<div id="profiler"></div>
<script type="text/javascript">
  $.load("#profiler","api/profiler");
</script>