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