Oct 24 2006

Download the asp.net javascript logging console

Posted by admin under Controls

Javascript is indeed getting more and more important. With Ajax techniques getting spread and popular, javascripts skills are certainly becoming an valuable asset. However, doesn't matter how good a developer you are - some sort of debugging/logging tools sure are needed - and I bet I'm not the only one having used alert-messages, and then when put into production someone found out that one alert message was still there in the code...

Anyway, what I needed was:

a) a simple yet powerful Javascript log console. All I need to do is basically to log messages from my javascript code - and preferably the console would be hidden until I needed to see it

b) I would like to wrap it all up into an asp.net server control - and embed all needed javascript to handle the console. Then all I need is to reference it, put it into my aspx pages and viola! No need to copy the javascript etc.

c) A switch to turn logging on and off. I don't mind debug messages in my production code - but it should go to dummy, empty functions.

So - what I found was - JSLog. Check the example here. Perfect!

Anyway - now to the control. The the attached download file you will get two projects - one test application and the control code itself. When running it looks like this:

Notice the little orange box in the left saying "2"? Doubleclick on it and:

If you look in default.aspx you can see that onmouseout calls MyMouseOver which in turn looks like this:



<script type="text/javascript">
function MyMouseOver()
{
    jslog.debug("In my mouse over");
}
</script>

While the control code is pretty much explained here  I instead want to talk about how you can use it:

1. Add a reference to jslogcontrol.dll

2. Add it to your master page or to whatever page you want to use the console on.



<%@ Register TagPrefix="jslog" Namespace="JSLogControl" Assembly="JSLogControl" %>
...
...
<jslog:JSLog id="idLogSpecial" runat="server" DebugMode="<% $AppSettings:JsDebugMode %>"></jslog:JSLog>

3. Now add a appSettings variable to web.config



  <appSettings>
    <add key="JsDebugMode" value="true"/>
    
  </appSettings>

And that's it. When set to false the javascript will be replaced with jslogrel.js - which contains empty stubs for all functions - therefore it will be ok for you (while I can't really say that - it's your decision, however perfomance wont suffer - that's my point) now to leave your debugging calls in your production code.