11^th April 2009

Ok so here's a tool I've had in the works for some years now which I hope will be useful to the web developers amongst you. It's primarily designed for development, as the name should imply, and allows for rapid development and testing of JavaScript and CSS.

I realise this is quite a long article, so if you're too eager, just hit the back-tick key under escape. Evaluate 'window', too. Just for fun ;-)

Now! If you adhere to the principle of code/style/content separation by placing all your CSS and JavaScript in external files, this should make your lives easier, it certainly does for me. “How is that?” I hear you ask. Well if, like me, you spend most of your time editing a CSS file, saving it, going to your browser, pressing F5 to refresh (or, to be safe, CTRL+F5), viewing your changes then repeat, then that is fine for most scenarios. But what if you're developing a web application that has lots of dynamic content brought in by ajax? Well usually it means going through the extra work of recalling the ajax method, with potential database hits thrown into the mix. In other words, this can be a real bottleneck as simple CSS changes can take 5-10 seconds per tweak

Well a number of possibilities occurred to me. A nice gui for editing CSS changes by selecting html elements and adjusting the rules would be swell. Something like the way Firebug does. The downside of the Firebug approach is that changes get lost and you end up having to replicate the changes in your original source anyway. Great for playing around with, but anything more is painful.

So I thought that an enhanced version of that would be neat; something that keeps track of your changes and when you're fully happy with it, you can simply export all the changed files. Still, implementing that would be a fearsome task.

Then the obvious hit me in the face: why not just add the ability to just refresh the CSS files themselves? Well happily this approach was very simple to implement by extending my debug.js class.

So, after a whirlwind few hours of development, the following four functions have been added that make for a nice refreshing-without-refreshing approach to JavaScript and CSS development:

• List JavaScript files
• Refresh JavaScript files
• List CSS files
• Refresh CSS files

I also threw in a quick cookie lister, free of charge naturally.

Anyway, I hope you find those functions useful. Aside from those new functions, the original Debug.js class was a basic debug message logging system. It contains the usual methods for writing errors, warnings or trace statements to the log itself (which is made visible using the back-tick key - the one under the escape key - go on, give it a try!):

Debug.Error(value, [title])

Creates an error window containing 'value'. Background colour is reddish.

Debug.Warning(value, [title])

Creates an warning window containing 'value'. Background colour is yellow.

Debug.Info(value, [title])

Creates an info window containing 'value'. Background colour is green.

Debug.Write(value, [title])

Creates a debug box containing 'value'. Background colour is pale yellow

Debug.InspectObject(obj, [title], [class])

Creates an object browser (tree view of objects contents). Class is the CSS class applied to the entry.

Debug.Xml(sXml)

Pass this an xml string to display the xml nicely formatted in a debug window.

Bookmarklet - Debug any page!

If ever you want an easy way to inspect any page on the internet, why not try this handy bookmarklet. Just drag it into your favourites and click it whenever you want access to the console:

Debug Page

Thanks for reading!
--Richard