The classic frustration with any web development generally arrives the first time you fire up a new web browser to see how your blood, sweat and tears end up looking outside of your favorite environment. This is the time when tears splatter across monitors, brilliant minds of less than a quarter century losing their hair faster than a diseased mammal at spring time, disaster striking in the form of dogs and cats living together, utter chaos. It may be a trailing comma on character 3,565 (of 35,355 lines of JS) or an easy mistake of using a position: fixed CSS attribute, inherited from a 3rd party library. A simple compilation of stupidity and carelessness combined to transform a functional LCD panel into a web of cracks; each creating a wake of red, purple, blue and yellow as it trails as to further indicate you are again down to only a single monitor from your original two. It is this pain that has brought me to give you devbarjs. I’m sorry and you’re welcome all wrapped up into a single, extensible package.
What is it?
Some browsers have tackled this problem in one way or another. Firefox and Chrome (not a complete list, thank you very much) have taken a very developer-centric approach to designing a browser. What a brilliant idea. If nothing else, they at least have (nearly) identical W3C standards complaint rendering engines. Hooray for standards! Blah blah blah, Internet Explorer hasn’t and isn’t and also owns 70% of the market. Regardless of the fact that Microsoft has just recently started supporting a developer-centric approach to browser design… and failed, the issue remains that no matter the number of successful implementations of a developer-centric, standards compliant browser; plugins must be designed for each of them (including the older versions of IE … yeah), forcing maintainers and web developers alike to support multiple browsers in terms of their run time code and their debugging. Bleh. devbajs embarks on a different approach by embedding the development tools and plugins to the page, not the browser. The result is a seamless integration with your site and any debugging tools you wish to add via a simple and easy to use JavaScript API and UI.
Included with the v1 release of the library is the first plugin, an extension of the YUI logging console. The extension adds added views for logged messages and persistent messages through page loads. Trust me, it’s good; it’s good like crack: once you try a little bit you can’t live without it, starting to sell it on the streets, stealing from your family and ending up either on death row or dangling off a rooftop in your tattered underwear singing 80’s show tunes with your last clean sock stitched to your hand rolling in with backup vocals. Yeah – it’s that good. Tell your friends.
Demo
Example
The thing is simple enough to demonstrate with a simple example, so here you go:
http://blog.imtrevor.com/wp-content/projects/devbarjs/example/
Take a look at the source. It’s really that simple.
Installation
Perhaps the best place to look for installation tips is the installation wiki page on the hosting site as it’s likely to be updated far more frequently than this blog. However, to prevent too much backlash, I will run you through a simple exercise of how to install, configure and extend the package.
Step 1: Download the source
$ tar xzf devbar_fullmin-1.0.0.tar.gz
You will need to update this to the particular version you wish to download. This is (hopefully obvious) a download for the current version, 1.0.0.
Step 2: Install on your site
This should be added inside the <head> tag of your page. Also, you are done. It’s on now.
Configuration
Indeed there is a lot to configure here. Most of this can be accomplished through simple boolean attributes defined in the API documentation. Still, the most common cases are:
Activate and deactivate
DevBar.load();
A false value for the active attribute will prevent any DOM changes to the page. In other words, the bar is disabled and will be physically absent from your page. This is nice for Production uses, although it’s recommended that you remove it completely (JS and CSS included) from your Production sites.
Invade
DevBar.load();
// This enables invading changes to the YUI logger
// along with jQuery extensions
$(body).log( ‘Hello world. I am logging through jQuery using devbarjs’);
The invade attribute will allow for the devbar to inject code into the included YUI logging package along with extending jQuery, adding a log method to the API. Weee!
verbose
DevBar.load()
This does nothing but extend the logging functions to notify you of a logged message in the bottom right hand corner of the screen at any time during JavaScript run time, regardless of whether or not the bar is extended or the YUI logging console is displayed. The demo has an example of this.
Extending
Although the bar comes with a generally useful plugin already, it also gives you an API to add more to the bar as you see fit. The example below is code from the 1.0.0 release, demonstrating how the devbar internally adds the links to the bar. Again, for more details on this function and other methods and attributes in the API, take a gander at the provided documentation.
label : ‘Logger’,
links : [
$(‘<a>Clear</a>’)
.attr( ‘href’, ‘javascript:void(0);’ )
.click( DevBar.clear ),
$(‘<span>| </span>’),
$(‘<a>Open</a>’)
.attr( ‘href’, ‘javascript:void(0);’ )
.click( DevBar.open )
.attr( ‘id’, ‘devbar_openlink’ )
.hide(),
$(‘<a>Close</a>’)
.attr( ‘href’, ‘javascript:void(0);’ )
.click( DevBar.close )
.attr( ‘id’, ‘devbar_closelink’ )
.show()
],
} );
Conclusion
What’s to conclude? Besides, I’d be surprised if anyone read this far anyways. Have fun, feel free to contact me with questions, patches, etc. As I mention somewhere in the docs, I’m only a single person with an already full plate of life. Latency of issues is to be expected but I am more than happy to add contributors to the project at any time – just ask.
Thanks.
Tags: code, javascript