您的位置：首页 > Web前端 > JavaScript

【javascript】console 让 js 调试更简单

2016-08-30 16:59 351 查看
浏览器的控制台（console）是最重要的面板，主要作用是显示网页加载过程中产生各类信息。

显示信息

console.log('hello world');
console.debug('debug');
console.info('信息');
console.error('错误');
console.warn('警告');


最常用的就是 
console.log
了。

占位符

console
对象还可以使用 printf 风格的占位符。不过只支持字符（
%s
）、整数（
%d
或 
%i
）、浮点数（
%f
）、对象（
%o
）和 css 样式（
%c
）。

var person = {};
person.name = 'Jack';
person.age = 30;
console.log('%o', person);
console.log('%d年%d月%d日', 2016, 08, 23);
console.log('圆周率：%f', 3.1415926);
console.log('%c改变文本颜色', 'color:green;');


信息分组

console.group("第一组信息");
console.log("第一组第一条");
console.log("第一组第二条");
console.groupEnd();
console.group("第二组信息");
console.log("第二组第一条");
console.log("第二组第二条");
console.groupEnd();


查看对象的信息

console.dir()
可以显示一个对象所有的属性和方法。

var person = {};
person.name = 'Jack';
person.age = 30;
person.talk = function(str) {
console.log(str);
}
console.dir(person);


显示某个节点的内容

console.dirxml()
用来显示网页的某个节点（node）所包含的 html/xml 代码。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="renderer" content="webkit">
<meta name="keywords" content="">
<meta name="description" content="">
<title>Document</title>
</head>
<body>
<table id="table">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
</body>
</html>
<script>
var oTable = document.getElementById('table');
console.log(oTable);
</script>


判断是否为真

console.assert()
用来判断一个表达式或变量是否为真。如果结果为否，则在控制台输出一条相应信息，并且抛出一个异常。

console.assert(1);
console.assert(1 === 2);


追踪函数的调用轨迹

console.trace()
用来追踪函数的调用轨迹。

function add(a, b) {
console.trace();
return a + b;
}
var x = add3(1, 1);　　
function add3(a, b) {
return add2(a, b);
}　　
function add2(a, b) {
return add1(a, b);
}　　
function add1(a, b) {
return add(a, b);
}


运行后，会显示 
add()
的调用轨迹，从上到下依次为 
add()
、
add1()
、
add2()
、
add3()
。

计时功能

console.time()
和 
console.timeEnd()
，用来显示代码的运行时间。

console.time('计时器一');
for (var i = 0; i < 1000; i++) {
for (var j = 0; j < 1000; j++) {}
}
console.timeEnd('计时器一');


性能分析

性能分析（Profiler）就是分析程序各个部分的运行时间，找出瓶颈所在，使用的方法是
console.profile()
。

假定有一个函数 
Foo()
，里面调用了另外两个函数 
funcA()
和 
funcB()
，其中 
funcA()
调用 10 次，
funcB()
调用 1 次。

function Foo() {
for (var i = 0; i < 10; i++) {
funcA(1000);
}
funcB(10000);
}

function funcA(count) {
for (var i = 0; i < count; i++) {}
}

function funcB(count) {
for (var i = 0; i < count; i++) {}
}


然后，就可以分析 
Foo()
的运行性能了。

console.profile('性能分析器一');
Foo();
console.profileEnd();


参考资料

Firebug控制台详解
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航