Blackbird – 非常酷的 Javascript 简单调试工具

Thursday October 16, 2008

Blackbird 是一个开源的 Javascript 调试工具，默认提供一种非常酷的方式展现 Javascript 调试信息，如下图，效果如何呢？ :)

Blackbird

在我们的日常的学习或工作中，经常都会接触到 Javascript，有时为了进行一些简单的调试，我们也许会采用 alert()，但有时也是很麻烦的，比如在一个循环中，我们可能就要点击 n 次的弹出窗口了。但现在有了 Blackbird，我们就可以和 alert() 说拜拜了。

虽然有人说会很多 Javascript 类库都有类似功能，但我可不想因为进行一些简单的调试而去加载一个框架，因为 Blackbird 足够简洁和小巧了，就 4 个文件，20 多 KB：

4 个文件： blackbird.js，blackbird.js，blackbird_icons.png，blackbird_panel.png

使用也非常简单，保持 css 文件和 png 文件在同一目录下（注：当然你也可以修改 css 文件，使之按你想要的目录方式存放。），然后在你想调试的页面的 < head> 和 < /head> 之间加载该 js 和 css 文件即可，大概代码如下：

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

Blackbird 支持当前的主流浏览器如 ie6+，Firefox2+，Safari2+，Opera9.5 等，并支持快捷键操作，非常方便。

F2： 显示和隐藏控制台
Shift + F2 : 移动控制台（目前只支持移动到四个角，如果支持随意拖动就更炫了。）
Alt + Shift + F2：清空控制台信息

同时，Blackbird 还提供多个公共 API：

log.toggle()          显示或隐藏 Blackbird
log.move()            移动
log.resize()           修改 Blackbird 窗口显示大小
log.clear()             清空信息
log.debug( message )   debug 信息
log.info( message )     一般消息
log.warn( message )      警告信息
log.error( message )    错误信息
log.profile( label )     计算消耗时间

使用方法也很简单，如想在 Javascript 代码里调用 Blackbird，代码如下：

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' );

或一个更详细，具体的例子：

log.profile( 'local anchors' );
 
var anchors = document.getElementsByTagName( 'A' );
for ( var i = 0; i < anchors.length; i++ ) {
  if ( anchors[ i ].name ) {
    log.debug( anchors[ i ].name );
  }
}
 
log.profile( 'local anchors' );

以上代码来自 Blackbird 官方，演示和下载地址如下所示：

Demo：http://www.gscottolson.com/blackbirdjs/
Download：blackbirdjs-1.0.zip
License：MIT License

Avatar

Thursday October 16, 2008 by Roamlog | 9 Comments. Add One?

Posted in Design.You can leave a response,or trackback from your own site.

« Google Reader OSX 皮肤 1.5
The napBook »

9 Comments

  1. 我顶你个肺啊，支持中文

    马哥 wrote on October 16th, 2008 8:45 am

  2. 不玩 JavaScript 的飘过..

    锐风 wrote on October 16th, 2008 9:33 am

  3. 这种工具, 好用的少阿

    LD wrote on October 16th, 2008 8:42 pm

  4. 效果杠杠地

    老时 wrote on October 16th, 2008 8:59 pm

  5. 看得比较晕乎……

    feicun wrote on October 17th, 2008 12:57 am

  6. 还没怎么用JS呢..
    不过看起来不错~

    NetPuter wrote on October 17th, 2008 7:34 pm

  7. 还是本人自己写的简单实用，一行代码:

    搞定所有的事情,大家不妨去看看。

    创意无限，简单实用。
    下载地址：http://dewind.googlecode.com/files/beta-20081017.rar
    效果图：http://dewind.googlecode.com/files/javascript-log.bmp

    jzshmyt wrote on October 18th, 2008 5:43 pm

  8. 意义不是很大

    19~ wrote on April 10th, 2009 10:54 am

  9. 有个工具叫jash,http://is.gd/KKbL。
    提供相似的功能。不过jash可以在线直接引用，通过直接在uri栏中添加地址来强行引用jash去“调试”他人的网页。
    blackbird应该也可实现相似功能。
    就外观上来说，没blackbird好看。

    wupher wrote on June 1st, 2009 12:07 am

Leave a reply