Simple jquery plugin that provides a developer toolbar
JavaScript CoffeeScript Ruby
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.


$.dbug is a simple jQuery plugin that gives you a developer toolbar which you can fill with buttons, ie toggle grid overlay, fetch data from server, etc.


$(function() {
    dbug1 = new $.dbug($('body'), {
        buttons: {
            'foo': function() { alert('bar'); }

See the example.html for an example.


You can style the toolbar any way you want, either by providing inline css using the toolbarStyle or buttonStyle properties. If you choose to style it manually, you must provide all the styles (including margin, padding, positioning etc).

dbug1 = new $.dbug($('body'), {
  toolbarStyle: 'width: 500px; top: 0; left: 0; position: absolute',
  buttonStyle: 'font-size: 20px; color: blue',
  buttons: {}

It is also possible to style the plugin using a css file:

div.dbug-custom .toolbar {
  height: 40px;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
div.dbug-custom a {
  color: blue;

In this case you must set the style property to 'custom':

dbug1 = new $.dbug($('body'), {
  style: 'custom',
  className: 'dbug-custom',
  buttons: {}