跨浏览器js调试台,blackbirdjs 汉化版 二次开发 by 小熊

介绍

本控制台应用于各浏览器调试javascript所用,原作者为G Scott Olson,考虑到英文版本和部分快捷键以及显示更符合国人操作,故此二次开发。

用途

用于跨浏览器javasctipt调试所用,改掉alert的习惯
(如果你是firebug或chrome控制台滴忠实fans,请和谐本文吧╮(╯_╰)╭,不过此控制台能方便的在IE调用,喜欢的话就用用吧)

适用人群

  • 不喜欢alert影响代码执行的
  • 能跨浏览器调试的

使用方法

  1. 在你的网站放入css(含图片)以及js(建议只在开发环境应用本插件)
  2. 在你的javascript代码中把需要alert的时候换成log.info(之类的方法)就行了,如果更好的话,可以配置个适合自己站的错误中心来触发log的响应函数

版本更新

2012.03.14(ver 1.1)
操作面板:

  • 汉化:全文字汉化
    (实话说吧,汉化点并不多,不过总想汉化一下给国人使用,但是鄙人英语也不是相当卓越,如果哪儿错了也请亲们能点一下偶,谢谢)
  • 增加:透明度控制条
  • 增加:色彩化阅读文字(css3),方便阅读
  • 增加:每行信息序号化,方便阅读
  • 增加:就绪文字

功能:

  • 增加:透明度调整
  • 增加:数组打印(暂时为一维打印)
  • 增加:对象打印(暂时为一维打印)
  • 增加:打印字符可选择性传显示颜色(hex/cssColor 均可)
    ok/info/wran/error(str, color)
  • 增加:性能计算函数(只是timer的简易形式)
    test (fn,count)
    fn 为函数,count 为 测试基数(默认1000次)
    返回耗时毫秒(为0时可自行增加测试基数)
  • 修改:原调试函数
    debug => ok
    profile => timer
  • 修改:原改变面板位置热键(由于与httpWatch冲突故改变) shift + F2 => ctrl + F2
  • 修复:调试值为空值时提示空值(原版将报错)
  • 修复:当传值为 undefined || null 时,原版控制台将报错,现以扶正并提示其为空值

内置方法(粗体为个人常用)

  • ok 打印正确信息
  • warn 打印警告信息
  • info 打印信息
  • error 打印错误信息
    以上4条信息传参如下 (yourVar[, color])
    第一个参数 yourVar :通常为你要打印的变量/字面量
    第二个参数 color为可选参数,可传入颜色(Hex/cssColor, 如果喜欢,rgba也可以,不过IE就打酱油了),随后以该颜色显示信息
  • timer 计时器触发(需在使用的地方前后各加一个timer('计时器名字'))
  • test 测试器触发,将调试你的代码性能耗时
  • toggle 显示/关闭面板(如果无特殊需求,直接按F2了事)
    注:opera下由于F2为浏览器功能键,请使用ctrl + F2来显示面板
  • move 改变面板位置(如无特殊需求,直接Ctrl + F2)
  • clear 清空面板信息(如无特殊需求,直接Shift + Alt + F2)
  • resize 面板大小切换(无触发热键,面板右上角有该按钮可触发)

声明

本次开发仅学习以及自己网站所用,并且为尊重原作者,这里放出原版官网,感谢原作者G Scott Olson的辛勤开发。

个性化

如果全局log对象与你本身的对象有冲突的话可以自行修改命名空间。

  1. var NAMESPACE = 'log'//命名空间   
  2. var readyStr = '控制台就绪!'//启动语

原版官网

http://www.gscottolson.com/blackbirdjs/

下载(115盘)

blackbirdjsv1.1-by-ibear.zip

例子

  1. <!-- 引入 css 及 js 文件 -->  
  2. <link rel="stylesheet" type="text/css" href="console.css" media="all" />  
  3. <script type="text/javascript" src="console.js"></script>  
  1. var str = '艾斯,你不能死!尾田我恨你...',   
  2. arr = ['路飞','索隆','娜美'],   
  3. obj = {   
  4.     a : 'str',   
  5.     b : function(){},   
  6.     c : true  
  7. },   
  8. count = 100000; //测试基数,供test用   
  9. log.info(str);   
  10. log.info(arr);   
  11. log.info(obj, 'yellow'); //加入颜色呈现   
  12. log.test(function(){   
  13.     var a = 1;   
  14. }, count);  

调试台demo

  1. avatar
    @life#28403

    我也到ie试试

  1. 目前还没有trackbacks.

  2. Trackbacks被禁用了

发表评论 进楼快捷键: ctrl+Enter取消回复

电子邮件地址不会被公开。

您可以使用这些 HTML 标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>