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()

显示网页的某个节点(node)所包含的html/xml代码

比如,先获取一个表格节点,

  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);

过滤显示对象的属性

传递一个键值数组作为console.table()调用的第二个参数

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/