1. 目的
方便js调试
原理:
Console 是用于显示 JS和 DOM 对象信息的单独窗口。并且向 JS 中注入1个 console 对象,使用该对象 可以输出信息到 Console 窗口中。
Firebug内置一个console对象,提供5种方法,用来显示信息。最简单的方法是console.log(),可以用来取代alert()或document.write()。
2. 常用的浏览器(支持console)/工具
Chrome 和 FireFox(FireBug)中都支持 Console
而其他浏览器都支 持不好(比如 IE8 自带的开发工具虽然支持 Console,但功能比较单调,显示对象的时候都是显示 [Object,Object],而且不能点击查看对象里面的属性)
3. 常用命令
作用 | 命令 |
console对象还有4种显示信息的方法 | 一般信息console.info()、 除错信息console.debug()、 警告提示console.warn()、 错误提示console.error() |
支持的占位符的种类比较少, 只支持字符(%s)、整数(%d或%i)、浮点数(%f)和对象(%o)四种 | 有这样一个对象: var dog = {} ; dog.name = "大毛" ; dog.color = "黄色"; 对它使用o%占位符。 console.log("%o",dog); |
分组显示 如果信息太多,可以分组显示, 用到的方法是console.group()和console.groupEnd() | console.group("第一组信息"); console.log("第一组第一条"); console.log("第一组第二条"); console.groupEnd(); console.group("第二组信息"); console.log("第二组第一条"); console.log("第二组第二条"); console.groupEnd(); |
显示一个对象所有的属性和方法 console.dir | var dog = {} ; dog.name = "大毛" ; dog.color = "黄色"; console.dir(dog); |
console.dirxml() | 比如,先获取一个表格节点, var table = document.getElementById("table1"); 然后,显示该节点包含的代码。 console.dirxml(table); |
用来追踪函数的调用轨迹 console.trace() | 比如,有一个加法器函数。 function add(a,b){ return a+b; } 我想知道这个函数是如何被调用的,在其中加入console.trace()方法就可以了。 function add(a,b){ console.trace(); return a+b; } |
计时功能-用来显示代码的运行时间 console.time()和console.timeEnd() | console.time("计时器一"); for(var i=0;i<1000;i++){ for(var j=0;j<1000;j++){} } console.timeEnd("计时器一"); |
性能分析器 console.profile()和console.profileEnd() | 分析Foo()的运行性能: console.profile('性能分析器一'); Foo(); console.profileEnd(); 控制台会显示一张性能分析表 |
assert 方法类似于单元测试中的断言 | 例如 console.assert(1==2) |
清空 console | console.clear() |
count 方法用于统计当前代码被执行过多少次 | 例如 function test(){ console.count("test被执行次数:"); } undefined test() test被执行次数:: 1 undefined test() test被执行次数:: 2 undefined |
通过console.table()记录数组数据 我们通过调用console.table()来代替console.log()函数的使用 | var languages = [ { name: "JavaScript", fileExtension: ".js" }, { name: "TypeScript", fileExtension: ".ts" }, { name: "CoffeeScript", fileExtension: ".coffee" } ]; console.table(languages); |
过滤显示对象的属性 | var languages = { csharp: { name: "C#", paradigm: "object-oriented" }, fsharp: { name: "F#", paradigm: "functional" } }; console.table(languages, ["name"]); 对于单个属性,一个简单的字符串参数就足够了: console.table(languages, "name"); |
cookie | 读取:document.cookie; 设置:document.cookie["Key"]="值"; 修改:document.cookie="key1=value1" document.cookie中多了key1=value1 过期时间: document.cookie="keyofcookie=valueofcookie2;expires=new Date().toGMTString()" 获取: F.cookie.get('malliance') |
| |
| |
| |
| |
| |
| |
| |
参考
http://jingyan.baidu.com/album/e75aca855c6419142edac6c1.html?picindex=1
http://blog.163.com/zhangmihuo_2007/blog/static/27011075201452522824347/
http://blog.163.com/zhangmihuo_2007/blog/static/270110752014526102948837/