본문 바로가기
Web For All/jQuery

Blackbird

utoi 2010. 6. 26. 22:02


Output all message types

log.debug( 'this is a debug message' );
log.info( 'this is an info message' );
log.warn( 'this is a warning message' );
log.error( 'this is an error message' );

Click the block to execute the code

Generate test string

log.profile( 'generate test string' );

var testContent = '';
for ( var i = 0; i < 3000; i++ ) {
  testContent += '-';
}

log.profile( 'generate test string' );

Click the block to execute the code

Setup

Adding Blackbird to your page

  1. Download the files and place them on your server or in a local directory on your computer.
  2. Include blackbird.js in your page.
  3. Inlcude blackbird.css in your page.

Your HTML source should look similar to the following code:

<html>
  <head>
    <script type="text/javascript" src="/PATH/TO/blackbird.js"></script>
    <link type="text/css" rel="Stylesheet" href="/PATH/TO/blackbird.css" />
    ...
  </head>
  ...

Browser compatibility

Blackbird is has been smoke-tested on the following browsers:

  • Internet Explorer 6+
  • Firefox 2+
  • Safari 2+
  • Opera 9.5
Usage

Public API

log.toggle()
Hide/show Blackbird
log.move()
Move Blackbird to next fixed positions: top-left, top-right, bottom-left, bottom-right
log.resize()
Expand/contract Blackbird
log.clear()
Clear all contents of Blackbird
log.debug( message )
Add a debug message to Blackbird
message: the string content of the debug message
log.info( message )
Add an info message to Blackbird
message: the string content of the info message
log.warn( message )
Add a warning message to Blackbird
message: the string content of the warn message
log.error( message )
Add an error message to Blackbird
message: the string content of the warn message
log.profile( label )
Start/end a time profiler for Blackbird. If a profiler named string does not exist, create a new profiler. Otherwise, stop the profiler string and display the time elapsed (in ms).
label: the string identifying a specific profile timer

Keyboard controls

Hide/show
Move
Clear

Interface controls

Pressing the Alt key while clicking any message filter control will only show messages of that type. For example, Alt + click debug control to show only debug messages.

Bookmarklets

Drag the following links to your bookmarks toolbar for quick access to Blackbird commands:

Customization

Changing the namespace

The default configuration attaches the public API for Blackbird to the global variable log. It is possible to have conflicts with existing variable declarations, and it is possible to redefine the global variable log in other blocks of JavaScript. If you want to define a different variable for Blackbird, such as blackbird, replace the assignment for NAMESPACE with any other string.

var NAMESPACE = 'log';

can be replaced with:

var NAMESPACE = 'blackbird';

or:

var NAMESPACE = 'myCustomLog';

The global API will be affected by this change. If you choose to replace log with myCustomLog, thenlog.debug will become myCustomLog.debug.

Capture & cancel logging statements

If you're shipping code with logging statements, you might want to capture and cancel commands intended for Blackbird. The following code will do this:

var log = {
  toggle: function() {},
  move: function() {},
  resize: function() {},
  clear: function() {},
  debug: function() {},
  info: function() {},
  warn: function() {},
  error: function() {},
  profile: function() {}
};


'Web For All/jQuery' Related Articles

티스토리툴바