Profiling JavaScript code using MiniProfiler

Question

MiniProfiler can log Ajax calls and display a breakdown of the timings.

Is it also possible to add custom steps to my JavaScript code?

Answer 1

You can time client-side script execution time by using the TimeScript command in a Razor view.

Example from Sample.MVC:

<head>
  @this.InitClientTimings()
  @this.TimeScript("jQuery 2.0.3", @<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js" type="text/javascript"></script>)

  @using (profiler.Step("<head> rendering"))
  {
    <title>@ViewBag.Title - MVC MiniProfiler Demo</title>
    @(this.TimeScript("Our CSS", @<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />))
    @RenderSection("head", required:false)
  }
</head>

Here the time spent loading the jQuery and CSS scripts are being timed. You could of course inject any client-side code using this function.