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

在我们的日常的学习或工作中，经常都会接触到 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

转载请注明：http://www.html5cn.org/article-5552-1.html

非常酷的 Javascript 简单调试工具Blackbird的更多相关文章

  1. 分享十个JavaScript在线调试工具

    测试Javascript可能是网页开发中最让人忧伤的工作.这里我找一些比较好的工具来帮助大家进行测试工作.这10款是我精选的基于浏览器的JavaScript在线调试工具,希望你们对你们有用. 1.Op ...

  2. JavaScript简单入门(补充篇)

    本文是对上一篇 JavaScript简单入门 的一些细节补充. 一.全局变量和局部变量 在<script>标签内定义的变量是当前页面中的全局变量.即 <script>标签可以直 ...

  3. 《javascript高级程序设计》读书笔记（一）javascript简单介绍

    第一章:javascript简单介绍 Netscape Navigator 开发的javascript   Javascript的实现有三部分: 1.核心(ECMAScript):提供核心语言功能. ...

  4. Javascript 简单实现鼠标拖动DIV

    http://zhangbo-peipei-163-com.iteye.com/blog/1740078 比较精简的Javascript拖动效果函数代码 http://www.jb51.net/art ...

  5. 超酷的JavaScript叙事性时间轴(Timeline)类库

    在线演示 Timeline 是我见过的最酷的展示事件随时间发展的javascript实现.你可以基于时间使用讲故事的方式来创建时间轴特效,整个时间轴以幻灯的方式来展示,你可以穿插图片,视频或者是网站, ...

  6. [Java Web] 4、JavaScript 简单例子(高手略过)

    内容概览: JavaScript简介 JavaScript的基本语法 JavaScript的基本应用 JavaScript的事件处理 window对象的使用 JavaScript简介: JavaScr ...

  7. javascript - 简单实现一个图片延迟加载的jQuery插件

    最近在看一本书<Third-Party Javascript>很不错,推荐给大家,下载地址各位自己搜索了. 步骤: 1.打开google,鉴于google基本打不开,那么就打开这个网址吧. ...

  8. Flash Socket简单调试工具

    写了一个简单的Flash Socket调试工具,可用来简单调试本地或者外部socket服务器,使用的时候注意Flash socket的安全策略问题,有问题请联系sky-wang@qq.com.

  9. javascript 简单的计算器

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx. ...

随机推荐

  1. HDU 2504.又见GCD-递归

    又见GCD Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submi ...

  2. POJ 1970 The Game (DFS)

    题目链接:http://poj.org/problem?id=1970 题意: 有一个19 × 19 的五子棋棋盘,其中“0”代表未放入棋子,“1”代表黑色棋子,”2“代表白色棋子,如果某方的棋子在横 ...

  3. CentOS 7.1 中文正式版下载 - 最流行的免费开源企业级 Linux 服务器操作系统

    如果说 Ubuntu 是现今最受桌面用户欢迎的 Linux 操作系统,那么 CentOS 就是最受公司.企业.IDC 喜爱的 Linux 发行版了.得益于极为出色的稳定性,全球范围内无数著名网站均选用 ...

  4. [NOI2018]屠龙勇士(exCRT)

    首先很明显剑的选择是唯一的,直接用multiset即可. 接下来可以发现每条龙都是一个模线性方程.设攻击第i条龙的剑的攻击力为$s_i$,则$s_ix\equiv a_i\ (mod\ p_i)$. ...

  5. 【AC自动机】【动态规划】hdu2296 Ring

    题解:http://www.cnblogs.com/swm8023/archive/2012/08/08/2627535.html 要输出路径,价值最大优先,价值相同的取长度较小者,仍相同取字典序较小 ...

  6. 【分块答案】【最小割】bzoj1532 [POI2005]Kos-Dicing

    引用zky的题解:http://blog.csdn.net/iamzky/article/details/39667859 每条S-T路径代表一次比赛的结果.最小割会尽量让一个人赢得最多. 因为二分总 ...

  7. java web定时任务---Timer

    写在前面: 在最近的项目中需要每天定时对数据库表进行查询,并完成相关数据的更新操作.首先让我想到的是Timer类,记得在一开始维护那个老系统的时候,开了个接口,也涉及到了定时的操作.下面就记录下大概的 ...

  8. 输入输出流和String的混合使用-替换信息

    ---恢复内容开始--- package demo; import java.io.BufferedReader; import java.io.BufferedWriter; import java ...

  9. acitivity 和fragment 通信，使用广播来传递信息的问题

    使用广播来传递信息时 如果 acitivity  给 太快给 fragment  发送广播,fragment 收不到 使用回调的方式来解决

  10. microsoft visual studio遇到了问题,需要关闭

    http://www.microsoft.com/zh-cn/download/confirmation.aspx?id=13821 装上这个补丁: WindowsXP-KB971513-x86-CH ...