'alert 대신 사용하면 좋은 라이브러리'에 해당되는 글 1건

  1. 2010.01.22 alert 대신 사용하면 좋은 라이브러리
반응형
http://www.gscottolson.com/blackbirdjs/



Demos

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
F2
Move
Shift + F2
Clear
Alt + Shift + F2

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, then log.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() {}
};
About

Credits

The code (blackbird.js, blackbird.css) and image assets (blackbird_panel.png, blackbird_icons.png) were created by G. Scott Olson.

The concept for Blackbird was sparked by JavaScript Logging, an article by David F. Miller. The first iteration of this project, named jsLogger, was developed for internal use at Orbitz. In the fall of 2007, jsLogger was rewritten from the ground up, given a facelift, and named project Blackbird.

Contributing to the Blackbird Project

Blackbird is an open source project. If you're intereted in contributing, you can start by checking out the project page on Google Code.

Posted by 1010