Chrome浏览器使用Console调试(二)

    比较相似数据对象

 

    使用table()方法查看结构数据和比较数据对象

    table()方法提供了一个简单的方式查看那些包含相似数据的对象和数组。当被调用的时候，该方法将提取一个对象的属性，并且将其建立一个Header。每一个属性就会按照索引在一行里输出。

    基本用法：打印一个数组对象

    在大多数form中，你需要的是一个数组，里面有大量相同属性的对象,table()方法将会呈现

console.table([{a:1,b:2,c:3},{a:"foo",b:false,c:undefined}]);

console.table([[1,2,3],[2,3,4]]);

   

    高级用法：打印特殊属性

    table()的第二个参数被用来记录更多高级对象，定义一个数组，包含你想显示的属性。

   

function Person(firstName, lastName, age) {
  this.firstName = firstName;
  this.lastName = lastName;
  this.age = age;
}

var family = {};
family.mother = new Person("Susan", "Doyle", 32);
family.father = new Person("John", "Doyle", 33);
family.daughter = new Person("Lily", "Doyle", 5);
family.son = new Person("Mike", "Doyle", 8);

console.table(family, ["firstName", "lastName", "age"]);

 

---

      测算和统计执行情况

     利用Console的API测算执行时间和语句的执行次数

     测算执行时间

     time()方法启动一个新的计时器并且计算耗时多长时间。给方法传递一个字符串标记这个计时器

     当你想结束计时器，调用timeEnd()方法，传递相同的字符串就行

     当执行timeEnd()方法时，控制台显示计时器文本和耗时时间。

     基础用法：

     

console.time("Array initialize");
var array= new Array(1000000);
for (var i = array.length - 1; i >= 0; i--) {
    array[i] = new Object();
};
console.timeEnd("Array initialize");

   

 

     时间线里的计时器

      在time()方法执行期间,Timeline记录正在执行,也会标注时间线.当你想跟踪你的的应用做了什么和它从哪来的,可以使用它. 

       在时间线上看time()是怎么样的 

      标记时间线

       注意：timeStamp()方法 在Timeline记录执行过程中有用

        Timeline面板提供了一个完整的

        引擎花费时间的预览.你可以从console中使用

        timeStamp()

        增加一个标记

        到timeline中.使你很简单的连接你应用中的事件到其他事件中 

        在以下地方使用timeStamp()方法标注到Timeline中,在Timeline的summary和details view中的一个黄色的垂直线 

        在时间的列表中增加一个记录 

       计算语句执行次数

        使用count()方法记录提供的相同的字符串出现次数,当这个语句被给定到count()方法中,这个数字就会增加 

       

function login(user) {
    console.count("Login called for user " + user);
}

users = [ // by last name since we have too many Pauls.
    'Irish',
    'Bakaus',
    'Kinlan'
];

users.forEach(function(element, index, array) {
    login(element);
});

login(users[0]);