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

简介: Blackbird 是一个开源的 Javascript 调试工具,默认提供一种非常酷的方式展现 Javascript 调试信息,如下图,效果如何呢? 在我们的日常的学习或工作中,经常都会接触到 Javascript,有时为了进行一些简单的调试,我们也许会采用 alert(),但有时也是很麻烦的,比如在一个循环中,我们可能就要点击 n 次的弹出窗口了。

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


欢迎转载,转载请注明: 转载自田园牧歌

本文链接地址: 非常酷的 Javascript 简单调试工具Blackbird

相关文章
|
JavaScript 前端开发 测试技术
JavaScript测试和调试工具:学习使用测试框架(如Jasmine、Mocha)对JavaScript代码进行单元测试
JavaScript测试和调试工具:学习使用测试框架(如Jasmine、Mocha)对JavaScript代码进行单元测试
|
Web App开发 人工智能 前端开发
javascript错误处理和调试工具
javascript错误处理和调试工具
78 0
|
JavaScript 前端开发 Linux
【利好工具】JavaScript及时运行调试工具
今天要介绍的这个工具叫RunJS,是运行在各大系统上的客户端,目前支持主流的macOS、Windows、Debian和Universal Linux平台。
157 0
【利好工具】JavaScript及时运行调试工具
|
存储 Web App开发 缓存
【前端第二课】各种HTML标签;HTML引入CSS的方法;HTML引入js的方法;基础的浏览器调试工具
【前端第二课】各种HTML标签;HTML引入CSS的方法;HTML引入js的方法;基础的浏览器调试工具
【前端第二课】各种HTML标签;HTML引入CSS的方法;HTML引入js的方法;基础的浏览器调试工具
|
Web App开发 JavaScript 前端开发
|
Web App开发 JavaScript 测试技术
《Ext JS权威指南》——3.4节调试工具的总结
本节书摘来自华章社区《Ext JS权威指南》一书中的第3章,第3.4节调试工具的总结,作者:黄灯桥,更多章节内容可以访问云栖社区“华章社区”公众号查看
1183 0
|
Web App开发 JavaScript 前端开发
|
Web App开发 JavaScript 前端开发
工欲善其事 之 Web 前端调试工具格式化混淆过的 JS 代码
工欲善其事 之 Web 前端调试工具格式化混淆过的 JS 代码 太阳火神的美丽人生 (http://blog.csdn.net/opengl_es) 本文遵循“署名-非商业用途-保持一致”创作公用协议 转载请保留此句:太阳火神的美丽人生 -  本博客专注于 敏捷开发及移动和物联设备研究:iOS、Android、Html5、Arduino、pcDuino,否则,出自本博客的文章拒绝转载或再转载,谢谢合作。
1203 0
|
Web App开发 JavaScript 前端开发
Javascript脚本的调试工具有哪些
    1. JSLint-一个JavaScript程序,用来查找JavaScript程序中的问题。    2. Firebug-一款Firefox开发类插件,集HTML查看和编辑、Javascript控制台、网络状况监视器于一体,是开发JavaScript、CSS、HTML和Ajax的得力助手。
1279 0
下一篇
无影云桌面