Joolbar

Cross browser debug toolbar

View the Demo and Download

Joolbar is a cross browser debug toolbar jQuery plugin.  It makes use of the pushState and replaceState javascript functions to display debug information in the address bar of the browser.

Due to the fact pushState and replaceState are very new browser features, on unsupported browsers, a toolbar div is placed at the top of the page to display the information.

Version 1.0 currently has the following features:

• Display of element hierarchy with id’s of each element
• Ability to display individual element information including:
  • Background colour
  • Text colour
  • Margin information
  • Padding information

How to use

1. Download the zip file here.
2. Unzip and upload the files to your web server
3. Make sure you include joolbar.min.js or joolbar.js on your page
4. Call joolbar on an element as a normal plugin:

1
2
3
4
5

<script type="javascript">
$(document).joolbar();
</script>

For more information take a look at the example here.

Requirements

Version 1.0 requires jQuery 1.4.2 to run correctly.  You can download jQuery here.

Bugs

If you would like to report a bug in this plugin, please visit the github repository and report the issue here.

Contribute

If you would like to help in the development of this plugin or want to fork the code to make it your own, please take a look at my github repository at https://github.com/murraypicton/Joolbar

Licencing

This plugin is released under the GPL3 Licence, allowing free distribution of the plugin according to the terms outlined in the LICENCE file included in the download.

View the Demo and Download