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

     Console API

     Console API为web应用提供了写信息到控制台的方法,创建了js 的profiles,初始化一个debugging session

     console.assert(expression,object)

     假如执行expression是false,那么信息会以堆栈跟踪的方式显示的console中.在下面的例子,断言信息会被写到控制台,仅当document包含的子节点数小于10个

    

var list = document.querySelector('#myList'); 
console.assert(list.childNodes.length < 10, "List item count is >= 10");

    

 

     console.clear()

    清空控制台信息

console.clear();

    如果保留日志在控制台上(Preverve Log 勾上),console.clear()将不会执行显然这种使调试很困难.在这种情况下,在右键菜单中的"Clear Console"可以使用,能够清除控制台信息

    console.count(label)

    记录相同label的行的执行次数,下面这个例子,login()每执行一次,count()也执行一次

function login(user) { 

console.count("Login called"); 

// login() code... 

}

  

 

 

     console.debug(object[,object,...])

     和console.log()方法相同

      console.dir(object)

      打印一个指定对象的Js呈现方式.如果被记录的对象是一个HTML元素,那么DOM的属性会被打印出来,

console.dir(document.body);

    

 

      console.dirxml(object)

      打印一个特定对象的XML呈现,这个对象会在Elements 面板出现,对于HTML元素,调用这个方法等同与调用console.log()

var list = document.querySelector("#myList"); console.dirxml(list);

     %o的执行是dir还是dirxml取决于对象的类型(非dom or dom)

 

     console.error(object[,object,...])

     和console.log很像,另外包括了方法调用的堆栈跟踪,并且样式像一个error

     

function connectToServer() { 
var errorCode = 1; 
if (errorCode) {
 console.error("Error: %s (%i)", "Server is  not responding", 500);
 }
 }
 connectToServer();

 

 

       console.group(object[,object,...])

       一个可选的标题作为一个日志记录的group.在调用了此方法后,并在相同的可视化group内调用console.groupEnd(),控制台信息就会输出.

       

console.group("Authenticating user '%s'", user); 
console.log("User authenticated"); 
console.groupEnd();

 

 

你可以嵌套group:

    

// New group for authentication:
 console.group("Authenticating user '%s'", user); 
// later... 
console.log("User authenticated", user); 
// A nested group for authorization: 
console.group("Authorizing user '%s'", user); 
console.log("User authorized"); 
console.groupEnd(); 
console.groupEnd();

 

 

      console.groupCollapsed(object[,object,...])

       建立一个折叠的group,

console.groupCollapsed("Authenticating user '%s'", user); 
console.log("User authenticated");
console.groupEnd(); 
console.log("A group-less log trace.");

 

      console.groupEnd()

      关闭日志group,关闭的是最近被console.group()和console.groupCollapsed()创建的group.

      console.info(object[,object,...])

      这个方法和console.log一样,但显示信息的时候在旁边增加了一个icon

       console.log(object[,object,...])

       在控制台显示信息.你可以传递一个或者多个对象到这个方法中,它们的值会被连接成一个空格分割的字符串

console.log("App started"); 

       格式化符号

       传递给log()的第一个参数可以包含格式化符号,一个以%和一个字母组成的字符串标记,意味着会被格式化.

下面的例子使用字符串(%s)和整数(%d)格式化符号,格式化显示userName和userPoints变量

console.log("User %s has %d points", userName, userPoints);

      

 

     console.profile([label])

     用一个可选的label开始js CPU的profile.为了完成这个profile,调用console.profileEnd().

     每一个profile会被加到Profiles 面板

例子:

function processPixels() { 
console.profile("Processing pixels"); 
// later, after processing pixels 
console.profileEnd(); 
}

    console.profileEnd()

    停止当前js CPU profiling的会话,如果一个正在执行,并且打印报告到Profiles 面板的话

 

console.profileEnd()

    console.time(label)

    用一个相关的label开启一个timer,当调用console.timeEnd()时,这个相同Label的定时器结束,耗时时间会显示在console上.计时器的值会精确到毫秒级

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()和timeEnd()的字符串必须匹配,否则计时器不会结束.

     console.timeEnd(label)

     使用label停止计时器,打印耗时时间

     console.timeStamp([label])

     在Timeline记录会话期间,增加一个事件给它.这个事件能够让你可视化地关联你的代码生成时间戳,自动加到Timline上,像是layout,point等

     console.trace(object)

     打印方法调用的堆栈跟踪,包括链接到Js文件中的特定行.一个计数器会计算trace()执行次数,并在屏幕上显示

     

 

可以传递参数到trace(),如:

 

console.warn(object[,object,...])

这个方法和console.log()一样,但是会在信息旁边显示一个黄色的警告icon.

console.warn("User limit reached! (%d)", userPoints);

 

debugger

全局debugger函数会使Chrome停止程序执行,并开启一个debugging会话在它调用的那一行.它和在Chrome的DevTools上打一个人工breakpoint一样.

注意:debugger命令不是console对象的方法

下面这个例子会在一个对象的brightness()方法调用时,js的debugger就会开启

brightness: function() { 
debugger; 
var r = Math.floor(this.red*255); 
var g = Math.floor(this.green*255);
 var b = Math.floor(this.blue*255); 
return (r * 77 + g * 150 + b * 29) >> 8;
 }