The Basics

Basically, this plugin is just one function, attached to the global jQuery object, $ , which is named debug() , and which is capable of displaying the value of a variable. It handles objects and things much better than a simple alert. The variable will be displayed in a div with a high z-index so that it hopefully appears above the other elements on the page.

Normally, you will just call it with one parameter, which is the variable you would like to view, sort of like this: $.debug(myMysteriousVariable); .

Alternatively, you can pass in a second parameter, which is an options object, which just defines a few options, sort of like this:

$.debug(myMysteriousVariable, { divId: "myOwnIdForTheDiv", divCss: { "border": "1px dashed #CCC", "background": "#666", "padding": "5px", "z-index": "5", }, recursive: false });

Basically, the only important option here is the one called recursive, which is a boolean telling the plugin if it should recursively loop through an objects properties or not. Other than that one, you'll probably only care about the divCss option which accepts standard CSS properties. Here are the default values for all of the options:

defaults = { divId: "debugDiv", divCss: { "border": "1px solid #AAA", "background": "#FFF", "padding": "15px", "width": "70%", "position": "absolute", "top": "60px", "left": "10%", "z-index": "2000", "color:": "#444" }, spanId: "debugSpanTitle", spanText: "Object Properties", objectInfoId: "debugObjectInfo", recursive: true }

Object Example

One common task, expecially when doing Object Oriented Javascript, is that you want to see the value of an object with multiple nested layers. This debugging plugin handles this task pretty well. Try it out: Debug the object shown below

//Here is the object we'll debug. var clothingCompany = { name: "levis", address: "2345 levis lane, la mesa, CA 91942", description: "We make jeans and clothes stuff like that", website: "http://www.example.com", id: 2346456, owner: { fullName: "George Smith", salary: "$210,000", startDate: "2010-02-12" }, employees: { 1: { fullName: "Andy Groff", salary: "$21,000", startDate: "2010-06-12" }, 2: { fullName: "Brad Blanton", salary: "$65,000", startDate: "2010-08-12", assistant: { fullName: "Little Assistant", wage: "$15", startDate: "2010-09-12" } } } } //Here is the code to debug it $.debug(clothingCompany);

Array Example

Just like the Object Example, but this time we're passing an array.
Debug the Array shown below

//code for array example var testArray = new Array( "red", "green", "blue", "pink", "orange", "yellow" ); testArray["secondDimension"] = new Array("morphsuits", "are", "awesome"); testArray[5] = "amarillo"; //display the debug $.debug(testArray);

HTML Element Example

Just like the other Examples, except now were veiwing and html element.

HTML Elements are different though, and its worth noting. Because using the recursive option was producing an infinite loop sometimes, I disabled it for html elements. Instead of looping through all of the element's properties, it only displays a few helpful ones. Any suggestions for making this part better are quite welcome.

Debug the "footer" div from this page, also shown below

//the element <div class="contentDiv" id="footer"> <h3>Need Help?</h3> <p> You can contact me at <a href="javascript:void(0);" onclick="displayEmailAddress();"> My Email Address </a> or else leave a comment on my website: <a href="http://www.andygroff.com">Andy Groff</a> </p> </div> //the code $.debug(document.getElementById('footer'))

Misc. Data Example

Here, I'm just gonna show you how the plug-in handles a few other data types.

Functions

Lets pass a function to our plug-in.
Debug a Function

$.debug(displayEmailAddress);

Strings

Lets pass a string to our plug-in.
Debug a String

$.debug('string i passed');

Numbers

Lets pass a number to our plug-in.
Debug a Number

$.debug(45.53);

Booleans

Lets pass a boolean to our plug-in.
Debug a Boolean

var testBoolean = true; $.debug(testBoolean);

jQueries

I just thought it might be fun to pass in the jQuery object and see what happens :-)
Debug jQuery

For some reason, this only works for me directly after a refresh. If you want to see the jQuery debug try clicking this right after you do a refresh. Also if you know how to fix this, let me know (i have an idea, just too lazy to try right now).
$.debug($);