非常酷的 Javascript 简单调试工具Blackbird
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
非常酷的 Javascript 简单调试工具Blackbird的更多相关文章
- 分享十个JavaScript在线调试工具
测试Javascript可能是网页开发中最让人忧伤的工作.这里我找一些比较好的工具来帮助大家进行测试工作.这10款是我精选的基于浏览器的JavaScript在线调试工具,希望你们对你们有用. 1.Op ...
- JavaScript简单入门(补充篇)
本文是对上一篇 JavaScript简单入门 的一些细节补充. 一.全局变量和局部变量 在<script>标签内定义的变量是当前页面中的全局变量.即 <script>标签可以直 ...
- 《javascript高级程序设计》读书笔记（一）javascript简单介绍
第一章:javascript简单介绍 Netscape Navigator 开发的javascript Javascript的实现有三部分: 1.核心(ECMAScript):提供核心语言功能. ...
- Javascript 简单实现鼠标拖动DIV
http://zhangbo-peipei-163-com.iteye.com/blog/1740078 比较精简的Javascript拖动效果函数代码 http://www.jb51.net/art ...
- 超酷的JavaScript叙事性时间轴(Timeline)类库
在线演示 Timeline 是我见过的最酷的展示事件随时间发展的javascript实现.你可以基于时间使用讲故事的方式来创建时间轴特效,整个时间轴以幻灯的方式来展示,你可以穿插图片,视频或者是网站, ...
- [Java Web] 4、JavaScript 简单例子(高手略过)
内容概览: JavaScript简介 JavaScript的基本语法 JavaScript的基本应用 JavaScript的事件处理 window对象的使用 JavaScript简介: JavaScr ...
- javascript - 简单实现一个图片延迟加载的jQuery插件
最近在看一本书<Third-Party Javascript>很不错,推荐给大家,下载地址各位自己搜索了. 步骤: 1.打开google,鉴于google基本打不开,那么就打开这个网址吧. ...
- Flash Socket简单调试工具
写了一个简单的Flash Socket调试工具,可用来简单调试本地或者外部socket服务器,使用的时候注意Flash socket的安全策略问题,有问题请联系sky-wang@qq.com.
- javascript 简单的计算器
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx. ...
随机推荐
- <div>之定位
在使用盒子模型的过程中,如何放置各种类型的“盒子”,就存在定位.浮动等问题.下面就日常运用过程中出现过的情况总结如下(陆续加入中....) 一.图片直接做<div>的背景 在<div ...
- web api 返回数据
一.Webapi的接口返回值类型 主要有四种类型 :void,HttpResponseMessage,IHttpActionResult,其他 1. void [HttpGet] public voi ...
- hdu5558
hdu5558 题意 给出一个字符串,按照特殊规则进行加密. 假设已经加密了前 \(i\) 个字符,从第 \(i+1\) 个字符开始找到 \(S[i..N]\) 的长度为 \(K\) 的最长前缀等于 ...
- 【莫队算法】URAL - 2080 - Wallet
http://www.cnblogs.com/icode-girl/p/5783983.html 要注意卡片没有都被使用的情况. #include<cstdio> #include< ...
- [POI2008]Station
题目大意: 给定一棵n个结点的树,求一个点x作为根,使得所有结点到x的距离和最小. 思路: 树形DP. 首先考虑将1作为根的情况. 很显然我们可以用一遍O(n)的DFS预处理出每个结点所对应子树大小s ...
- Android证书验证存漏洞 开发者身份信息可被篡改(转)
原帖地址:http://bbs.pediy.com/showthread.php?p=1335278#post1335278 近期在国内网易,雷锋网等网站爆出谷歌市场上的索尼官方的备份与恢复应用&qu ...
- 如何提高码农产量，基于ASP.NET MVC的敏捷开发框架之移动端开发随笔二
前言 在前一篇文章中我已经做过开篇,接下来的随笔会详细讲一下我们的开发框架是如何实现的,专业的事由专业的人来讲,以后就由我们的高级码农小李英文名查尔斯和他的师父厂长(因为姓陈,酷爱摄影,我们的文艺片都 ...
- Matlab自带的曲线拟合程序
这个函数的功能是能自动搜索参数的取值,从而使得方程的误差最小. 效果如下 代码如下 %% Optimal Fit of a Non-linear Function % This is a demons ...
- RMAN恢复 增加表空间后控制文件丢失
查看目前的控制文件位置 SQL> select name from v$controlfile; NAME-------------------------------------------- ...
- 用Thunderbird以HTML发邮件，收件人却总是收到文本邮件
要在通讯录里面,把你要发送的人设置可以接收HTML格式的邮件,那么你才能发出HTML格式. 否则,Thunderbird默认你所发的收件人无法接收HTML格式邮件.