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


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

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

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

    个文件: 

    blackbird.jsblackbird.jsblackbird_icons.pngblackbird_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

  • 相关阅读:
    默认构造函数
    Android笔记(二十八) Android中图片之简单图片使用
    Android笔记(二十七) Android中的动态广播和静态广播
    Android笔记(二十六) Android中的广播——BroadcastReceiver
    <转> Android LayoutInflater详解
    Android笔记(二十五) ListView的缓存机制与BaseAdapter
    Android笔记(二十四) Android中的SeekBar(拖动条)
    Android笔记(二十三) Android中的ProgressBar(进度条)
    Android笔记(二十二) Android中的GridView
    Android笔记(二十一) Android中的Adapter
  • 原文地址:https://www.cnblogs.com/yiliweichinasoft/p/3420477.html
Copyright © 2020-2023  润新知