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

2008 12 21 09:05 PM 1320次查看

分类：JavaScript 标签：JavaScript

JavaScript的一个缺点就是debug不方便，老是不得不去alert变量。
今天逛这个blog时发现了这个好东西，于是放出来分享。

Blackbird的主页已经有演示了，效果很容易看出。
下载可以点这里。

有个注意点作者没有说到，就是如何让页面载入时就显示控制台。
我琢磨了半天才发现，只要在载入这个工具前加上这段代码即可：
<script type="text/javascript">
if (document.cookie.indexOf("blackbird=") == -1) {
  document.cookie = "blackbird={pos:1,size:0,load:true};";
//pos表示位置，0~3分别是左上、右上、左下、右下，我觉得放在右上比较方便
//size表示大小，0为小，1为大
//load表示页面载入时是否显示控制台，true为显示，false或null为不显示
}
</script>
但这个方法有个缺点，Chrome似乎不支持blackbird={pos:1,size:0,load:true};这种形式的cookie，所以在Chrome下无效；IE、Firefox、Opera和Safari下则正常。

下面给个例子：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>测试</title>
<meta name="author" content="keakon" />
<meta name="copyright" content="keakon.cn" />
<link type="text/css" rel="Stylesheet" href="blackbird.css" />
<script type="text/javascript">
if (document.cookie.indexOf("blackbird=") == -1) {
  document.cookie = "blackbird={pos:1,size:0,load:true};";
}
</script>
<script type="text/javascript" src="blackbird.js"></script>
</head>
<script type="text/javascript">
function sum(from, to) {
	var _sum = 0;
	for (var i = from; i <= to; ++i) {
		_sum += i;
	}
	log.debug(_sum);
}
log.profile( '从1加到100' );
sum(1, 100);
log.profile( '从1加到100' );
log.profile( '从1000加到10000' );
sum(1000, 10000);
log.profile( '从1000加到10000' );
</script>
<body>
</body>
</html>
顺便转下用法：

快捷键：
F2： 显示和隐藏控制台
Shift + F2 : 移动控制台（目前只支持移动到四个角，如果支持随意拖动就更炫了。）
Alt + Shift + F2：清空控制台信息
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 )     计算消耗时间
顺便再说下如何更改log的变量名：
打开blackbird.js，找到var NAMESPACE = 'log';，将log改成你喜欢的名字，如记录。然后就能这样使用了：记录.info("我把log改为记录了");。

顺便再说下，blackbird.js这个文件写得真优美，学JavaScript的不妨读读。

0条评论 你不来一发么↓

    想说点什么呢？