显示信息的命令
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>常用console命令</title>
<script>
console.log("hello");
console.info("信息");
console.error("错误");
console.warn("警告");
</script>
</head>
<body></body>
</html>
|
占位符
console 上述的集中度支持 printf 的占位符格式，支持的占位符：字符串（%s）、整数（%d 或 %i）、浮点数（%f）和对象（%o）
1
2
3
| <script>
console.log("%d年%d月%d日", 2011, 3, 26);
</script>
|
信息分组
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>常用 console 命令</title>
<script>
console.group("第一组信息");
console.log("第一组第一条:我的博客(http://www.ido321.com)");
console.log("第一组第二条:CSDN(http://blog.csdn.net/u011043843)");
console.groupEnd();
console.group("第二组信息");
console.log("第二组第一条:程序爱好者QQ群： 259280570");
console.log("第二组第二条:欢迎你加入");
console.groupEnd();
</script>
</head>
<body></body>
</html>
|
查看对象的信息
console.dir() 可以显示一个对象所有的属性和方法。
1
2
3
4
5
6
7
8
| <script>
var info = {
blog : 'http://www.ido321.com',
QQGroup : 259280570,
message : '程序爱好者喜迎你的加入'
}
console.dir(info);
</script>
|
显示某个节点的内容
console.dirxml() 用来显示网页的某个节点 （node）所包含的 html/xml 代码。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>常用 console 命令</title>
</head>
<body>
<div id = 'info'>
<h3>我的博客：www.ido321.com</h3>
<p>程序员爱好者：259280570，欢迎你的加入</p>
</div>
<script>
var info = document.getElementById('info');
console.dirxml(info);
</script>
</body>
</html>
|
判断变量是否是真
console.assert()用来判断一个表达式或变量是否为真。如果结果为否，则在控制台输出一条相应信息，并且抛出一个异常。
1
2
3
4
5
6
| <script>
var result = 1;
console.assert(result);
var year = 2014;
console.assert(year == 2018);
</script>
|
追踪函数的调用轨迹
console.trace() 用来追踪函数的调用轨迹。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| <script>
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);
}
</script>
|
计时功能
console.time()和 console.timeEnd()，用来显示代码的运行时间。
1
2
3
4
5
6
7
| <script type="text/javascript">
console.time("A");
for (let i = 0; i < 10000; i++) {
console.log(i);
}
console.timeEnd("A");
</script>
|
性能分析
性能分析（Profiler）就是分析程序各个部分的运行时间，找到瓶颈所在，使用的方法是 console.profile();
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| <script>
function All() {
alert(11);
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++) {}
}
console.profile("性能分析器");
All();
console.profileEnd();
</script>
|
以上是我对下列文章的复制粘贴。详细请看下列文章。
九个 Console 命令，让 js 调试更简单