Share via

Write to the SharePoint 2010 Developer Dashboard With JavaScript

  • Article

When developing JavaScript solutions, I like to provide a tracing mechanism that can be turned on and off to aid debugging.  The IE Developer Tools, debugger and Fiddler are very robust debugging tools, but they don’t enable client script code to trace custom messages to a “log” that can be reviewed by developers.  The SharePoint 2010 Developer Dashboard is designed for server-side tracing, but it can also be used for client-side trace messages.  The approach is simple: tracing code in your client script appends html to the Developer Dashboard when the Dashboard is visible.  Here is the JavaScript (note this version depends on jQuery):

function DeveloperDashboardSection(sectionId, sectionTitle) {
    this.Title = sectionTitle;
    this.Id = sectionId;
}

DeveloperDashboardSection.prototype = {

    Id: '',
    Title: '',
   
    DeveloperDashboardVisible: function() {
        return$('DeveloperDashboard').length;
    },

    EnsureSection: function() {
        var section = $('#'+ this.Id);
        if(!section.length) {
            var sectionHtml = "<table id='"+ this.Id + "' width='49%'><tbody><tr><th colspan='2'>"+ this.Title + "</th></tr></tbody></table>";
            $('#CurrentScopeValues').append(sectionHtml);
        }
    },

    AddEntry: function(context, message) {
        if(!this.DeveloperDashboardVisible) return;
        this.EnsureSection();
        var entryHtml = "<tr><td nowrap='nowrap'><span>"+ context + "</span></td><td nowrap='nowrap'><span>"+ message + "</span></td></tr>";
        $('#'+ this.Id).append(entryHtml);
    }
};

To use the script, create an instance of the DeveloperDashboardSection and use the instance throughout your code to trace custom messages to the Dashboard:

var theSection = new DeveloperDashboardSection('sampleId', 'Custom Section');
theSection.AddEntry('someMethod()', 'The method was called');

The messages will appear on the Developer Dashboard in it’s own section:

image

When the Dashboard is not visible, the tracing calls are benign.

Comments