Stack Exchange MiniProfiler doesn't show the profile box?

Question

I've installed the Stack Exchange MiniProfiler, and View Source shows that it is rendering the expected HTML. However it does not show the little profile detail box in the corner - what could be wrong?

<script src="/v2/Scripts/jquery-1.6.1.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="/v2/mini-profiler-includes.css?v=1.7.0.0">
<script type="text/javascript" src="/v2/mini-profiler-yepnope.1.0.1.js"></script>
<script type="text/javascript">
    yepnope([
        { test: window.jQuery, nope: '/v2/mini-profiler-jquery.1.6.1.js' },
        { test: window.jQuery && window.jQuery.tmpl, nope: '/v2/mini-profiler-jquery.tmpl.beta1.js' },
        { load: '/v2/mini-profiler-includes.js?v=1.7.0.0',
           complete: function() {
               jQuery(function() {
                   MiniProfiler.init({
                       ids: ["025bbb91-9605-44b7-b33d-d8b196326dbc","2c74ce3e-8de6-4f8d-920a-e8708b22231b"],
                       path: '/v2/',
                       version: '1.7.0.0',
                       renderPosition: 'left',
                       showTrivial: false,
                       showChildrenTime: false,
                       maxTracesToShow: 15
                   });
               });
         }
    }]);
</script>

And in my Global.asax.cs:

    protected void Application_BeginRequest()
    {
        if (Request.IsLocal)
        {
            MiniProfiler.Start();
        }
    }

    protected void Application_EndRequest()
    {
        MiniProfiler.Stop();
    }

EDIT: Thanks to Sam's input I've tracked the problem to my .ajaxSetup() method. When it is commented out the profile box shows again. But I can't see why this is a problem:

$.ajaxSetup({
    data: "{}",
    dataFilter: function (data) {
        var msg;

        if (data == "") {
            msg = data;
        }
        else if (typeof (JSON) !== 'undefined' && typeof (JSON.parse) === 'function') {
            msg = JSON.parse(data);
        }
        else {
            msg = eval('(' + data + ')');
        }

        if (msg.hasOwnProperty('d')) {
            return msg.d;
        }
        else {
            return msg;
        }
    }
});

Answer 1

My guess is that the global dataFilter is interfering with MiniProfiler's $.get() for jQuery Templates template files. Calling JSON.parse() on an HTML fragment will definitely throw an error.

Since you're using a recent version of jQuery, the optimized JSON parsing isn't something you need to add manually. That functionality was included in jQuery core in 1.4.

So, most simply, try changing your global dataFilter to this:

$.ajaxSetup({
  data: "{}",
  dataFilter: function (msg) {
    if (msg.hasOwnProperty('d')) {
        return msg.d;
    }
    else {
        return msg;
    }
  }
});

If that doesn't fix it, you might want to look into jQuery 1.5's converters instead of the global dataFilter, which allow you to apply a dataFilter-like operation to responses of certain Content-Type. Some good examples from the guy that actually did the jQuery 1.5 AJAX rewrite here: http://encosia.com/jquery-1-5s-ajax-rewrite-and-asp-net-services-all-is-well/#comments

Answer 2

This sort of makes sense, perhaps your filter is mangling the results.

Adding a conditional that bypasses the filtering if you see it is a MiniProfiler JSON result should fix it.