Simple Debugger - Extended YUI Logger

Get Started

Install as bookmarklet, Get the debugger script or just check out this page's source:

Why?

Debugging IE is a pain. Yes, the developer bar exists. And it is great for inspecting the DOM. Yes, there is a debugger for IE (but man is it crap). And yes, I have written little simple consoles in the past. But recently I was using the YUI Logger to track down some issues in IE6.

I figured it would be fairly easy to take the YUI Logger, add an input box and provide some simple ways to interact with the JavaScript on the page (via a command line interface). I sprinkled in some intelligent formatting that lets you type in an object and all sub-objects are hyperlinks that then log their contents, and so on.

The result is a fairly simple, but useful, console debugging window. It just wraps the current YUI Logger, adds a command line, allows the debugged output to be click expandable. It also gives you access to the underlying LogReader if you so desire.

How to Use it

This is what it takes to get the debugger going on your page

First, include these scripts and CSS on your page

<!-- YUI Dependency -->
<script type="text/javascript" src="http://yui.yahooapis.com/2.2.2/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.2.2/build/dragdrop/dragdrop-min.js" ></script>

<!-- Required for YUI Logger -->
<script type="text/javascript" src="http://yui.yahooapis.com/2.2.2/build/logger/logger-min.js"></script> 
<link type="text/css" rel="stylesheet" href="http://yui.yahooapis.com/2.2.2/build/logger/assets/logger.css"> 

<!-- Download the JS and change this link for your own code -->
<script type="text/javascript" src="scripts/debugger.js"></script>

Next, add this code to the page load


YAHOO.util.Event.addListener(window, 'load', function() {
	var myDebugger = new YAHOO.extension.Debugger();
	// dbr.logReader is the LogReader instance

	// just call YAHOO.log(message) to log messages
	// Type directly in the input field to debug values
});

In Action

Type in YAHOO. You will see a list of objects in YAHOO. All objects are shown as links. Clicking on one of them (try widget then Logger) will drill down into that object and its values.

Obviously this could be improved (history, better formatting, etc.). But hey, it was a quick 4 hour hack. Feedback welcome... b dot scott at yahoo dot com.