Extending DebugKit - The new Javascript features

Hopefully by now you’ve used DebugKit , and found it to be as useful as I do. If you’ve ever wanted to add a new panel, you can and its actually quite easy to do. Furthermore, you can create a dynamic interactive panel more easily than before by using the new Javascript features to do simple DOM manipulation and XmlHttpRequests.

Making panels better

Extending DebugKit in the past was and is still done by creating new panels. Adding panels allows you to display new information and create new features pretty easily. However, creating new interactive panels was a bit more tricky. Previously, all the javascript for the toolbar and all the panels was contained in one big closure. This closure was executed at window.load. This worked really well in the short term but gave me some trouble as things grew. For the upcoming 1.1 release I’ve entirely rebuilt how the Javascript works in DebugKit. Furthermore, compatibility libraries for the various Javascript libraries have been removed. I removed the library specific code because as the DebugKit code base grew keeping six javascript files in sync became a huge task.

Enter the module

While some people may not like the module pattern it gets a lot of things right. It provides separation, allowing you to keep your code’s concerns separate. It also gives you way to do some hiding and create reusable code. The inherit disadvantage of not being able to create multiple instances works out to be an advantage in the context of DebugKit as the code is never intended to have instances made. So with it looking like all win, I rebuilt the entire DebugKit javascript code with the module pattern and I’m pretty happy with the results. There is still only one DEBUGKIT object added to the global namespace. This object contains all the modules, and tools used by DebugKit. While it doesn’t have an exhaustive list of features or the syntactic sugar of real Javascript libraries, it does provide some wrappers for getting the basics done.

Util.Element

Much like the Element object in Prototype, DEBUGKIT.Element provides some wrappers for basic DOM manipulation. You get some nice classname manipulation in the form of Element.hasClass, Element.addClass, Element.removeClass, and Element.swapClass. Also Element.show, Element.hide, and Element.toggle give some easy ways to toggle visibility. All of Element’s method are called statically.

Util.Event

Event is another basic object that has addEvent, and domready as its methods. I don’t think they require much explanation. Like DEBUGKIT.Element, Event methods are called statically.

Util.Request

You can create instances of DEBUGKIT.Request to add Ajax to your panels. If you are familiar with Mootools Request, then the DebugKit Request object will be pretty familiar. However, it does not have the callback support that mootools does. Making a request is pretty easy.

Pretty simple to use and it works in all A grade browsers.

Util.Cookie

Another simple object wrapper for Cookie operations. Has read, write, and del methods. I’m sure you can figure out what they do.

Util.merge

This method works very much like jQuery.extend or $merge. It merges all of its arguments together into one object, and returns the result of the merge. This is really handy for handling methods or objects that take options objects.

DEBUGKIT.loader

Last but not least is loader. Loader has one method of relevance when making panels. DEBUGKIT.loader.register() takes a function that you want to be run onDocumentReady. This is often an initialization method to bind events and start DOM manipulation.

I feel that with the new javascript features, creating dynamic and interactive panels is far easier than before. The new Debug Kit is very close to completion and should be ready very soon. Thanks again to everyone who has contributed, and filed bugs.