Will "the Mighty" Strohl

Debugging Client Side Code in DotNetNuke

DotNetNuke 5 brings with it many new features and back-end improvements.  One of the lesser known features is strictly for us developers to help us debug our client side applications.  This feature was clearly added to aid widget developers.

Once you begin writing widgets for your DotNetNuke website, you will quickly notice that tools like FireBug are no longer your friend, as you won't be able to step through the JavaScript.  Normally, this is when you'd write alerts all over the place like this:

alert('Some condition was met!');

We all know that this is not the most elegant way to debug a JavaScript application.  In fact, depending on what you're doing, this can get in the way or crash your web browser altogether. 


In comes the new $DEBUG and $DEBUGLINE functions in DotNetNuke 5.  But what will they do for you?  Here is a bit of dirty documentation for you:

  • $DEBUG(string Message);
  • $DEBUG(string Message, boolean Overwrite);
  • $DEBUGLINE(string Message);
  • $DEBUGLINE(string Message, boolean Overwrite);

Method Names
DEBUG - Writes a line of text into the DebugConsole with no line breaks or formatting.
DEBUGLINE - Writes a line of text into the DebugConsole, and appends a line break at the end of the text.

Message - This is the text that you want to display.
Overwrite - If true, any existing text is removed from the DebugConsole first. Generally, this is not what you want. The default is false.

How Do We Use the DEBUG Functions?

Using the DEBUG functions is extremely easy.  Unfortunately, you cannot simply call those functions.  There is a single bit of preparation that must be done first.  Anywhere in your page, skin, or module, add a single DIV with the ID of "DebugConsole" like shown below.

<div id="DebugConsole"></div>

Once you have that DIV in place, you are now ready to call the $DEBUG or $DEBUGLINE functions.

Let's assume a scenario.  Let's say that we are building a widget for DotNetNuke 5, and we are parsing the incoming parameters from the OBJECT tag.

<object id="widgetid" codetype="dotnetnuke/client" codebase="widgetname" declare="declare">
     <param name="param1" value="foobar" />
     <param name="param2" value="foobar" />
     <param name="param3" value="foobar" />

In widgets, one of the first things that is done, is that the PARAM element is iterated through, assigning the values to local variables.  If were weren't sure if those variables were making it into the widget, we might add the following code inside of the FOR loop.

$DEBUGLINE(params[p].name + ' = ' + params[p].value);

With this code implemented, you should see the following text in your DebugConsole once the widget is executed.

param1 = foobar
param2 = foobar
param3 = foobar

But Wait, We Can Make This Better

While I love this solution to debug the client-side scripts, it is certainly not a perfect solution.  For example, I am really annoyed that we need to manually add a DebugConsole DIV to the page.  It is cumbersome, and leaves a developer in a poor position.  First of all, the developer has to take precious development time to add and remove the DIV.  Second, we all know that the same developer will often forget to remove the DIV.  :)

I made a code proposal in Gemini to fix this problem using a bit of jQuery.  This next snippet shows the code changes I proposed highlighted in red.

function $DEBUG(s, overWrite)
    var dc = $get("DebugConsole");
    if (dc == null) {
        dc = $get("DebugConsole");
    if (dc != null)     {         if (overWrite)             dc.innerHTML = s;         else             dc.innerHTML += s;     } } function $DEBUGLINE(s, overWrite) {     $DEBUG(s + "<br />", overWrite); } function $CREATECONSOLE() {
    var div = document.createElement('div');
    div.setAttribute('id', 'DebugConsole');

The preceding code will look for the DebugConsole DIV, and if it doesn't find it, one will be added to the bottom of the page.  This works in two ways.  First, if the DebugConsole already exists, it will just use it.  Second, it will add the DebugConsole when needed, and there's no need to remember to remove it later.

Technorati Tags: , , , , , , ,

blog comments powered by Disqus