0
点赞
收藏
分享

微信扫一扫

javascript中console调试利器


console.log方法用于在console窗口输出信息。它可以接受多个参数,将它们的结果连接起来输出。
如果第一个参数是格式字符串(使用了格式占位符),console.log方法将依次用后面的参数替换占位符,然后再进行输出。
console.log(" %s + %s = %s", 1, 1, 2)
onsole.log方法支持的占位符有以下几个,不同格式的数据必须使用对应格式的占位符。

%s 字符串
%d 整数
%i 整数
%f 浮点数
%o 对象的链接
%c CSS格式字符串
如果参数是一个对象,console.log会显示该对象的值。
console.log({foo: 'bar'})
// Object {foo: "bar"}

console.log(Date)
// function Date() { [native code] }
上面代码输出Date对象的值,结果为一个构造函数。
warn方法和error方法也是输出信息,它们与log方法的不同之处在于,warn方法输出信息时,在最前面加一个黄色三角,表示警告;error方法输出信息时,在最前面加一个红色的叉,表示出错,同时会显示错误发生的堆栈。其他用法都一样。
对于某些复合类型的数据,console.table方法可以将其转为表格显示。

var languages = [

{ name: "JavaScript", fileExtension: ".js" },

{ name: "TypeScript", fileExtension: ".ts" },

{ name: "CoffeeScript", fileExtension: ".coffee" }

];


console.table(languages);

count方法用于计数,输出它被调用了多少次。

count方法用于计数,输出它被调用了多少次。


function greet(user) {

console.count();

return "hi " + user;

}


greet('bob')

// : 1

// "hi bob"


greet('alice')

// : 2

// "hi alice"


greet('bob')

// : 3

// "hi bob"

上面代码每次调用greet函数,内部的console.count方法就输出执行次数。


dir方法用来对一个对象进行检查(inspect),并以易于阅读和打印的格式显示。


console.log({f1: 'foo', f2: 'bar'})

// Object {f1: "foo", f2: "bar"}


console.dir({f1: 'foo', f2: 'bar'})

// Object

// f1: "foo"

// f2: "bar"

// __proto__: Object




assert方法接受两个参数,第一个参数是表达式,第二个参数是字符串。只有当第一个参数为false,才会输出第二个参数,否则不会有任何结果。

assert方法接受两个参数,第一个参数是表达式,第二个参数是字符串。只有当第一个参数为false,才会输出第二个参数,否则不会有任何结果。

// 实例
console.assert(true === false, "判断条件不成立")
// Assertion failed: 判断条件不成立
下面是另一个例子,判断子节点的个数是否大于等于500。

console.assert(list.childNodes.length < 500, "节点个数大于等于500")


time(),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");


// Array initialize: 1914.481ms




debugger语句必须与除错工具配合使用,如果没有除错工具,debugger语句不会产生任何结果。

在chrome浏览器中,当代码运行到debugger指定的行时,就会暂停运行,自动打开console界面。它的作用类似于设置断点。

更详细参考:
​​​http://javascript.ruanyifeng.com/tool/console.html ​​

举报

相关推荐

0 条评论