下载掌阅APP，畅读海量书库
立即打开
Console对象提供了一个简单的调试控制台，类似于Web浏览器提供的JavaScript 控制台。使用Console对象的一系列方法可以将调试模式的信息输出到控制台。Console对象的常用方法及功能见表1-1。
表1-1 Console对象的常用方法及功能
console.log()方法可用于在控制台输出普通信息，如单个变量（表达式）、多个变量、换行以及格式化输出，类似于C语言中的printf()。格式化输出时可使用类似printf()风格的占位符，支持字符（%s）、整数（%d）、浮点数（%f）和对象（%o）4种占位符。
【示例1.1】 console.log()输出普通信息。
console.log(＇Hello World!＇);
console.log(＇l＇, ＇am＇, ＇a＇, ＇student.＇);
console.log(＇We are students.\nWe are learning Node.js.＇);
console.log(＇%d + %d = %d＇, 1, 1, 2);
// 依次序输出所有字符串
console.log(＂%s＂, ＂Hello＂, ＂World!＂);
// 将对象转换为普通字符串后执行
console.log(＂%s＂, {school: ＂CClT＂});
console.log(＂%o＂, {school: ＂CClT＂});
//将字符串作为数值进行转换
console.log(＂今天是%d年%d月%d日＂,2021,01,26);
console.log(＂圆周率是%f＂,3.1415926);
// 输出%
console.log(＂%%＂);
console.log(＂%%＂, ＂CClT＂,＂%%＂);
运行结果如图1-25所示。
图1-25 运行结果
代码中第2行以逗号（,）隔开的参数在输出时以空格连接。在第3行中，“\n”表示输出一个换行符。%d、%s、%f、%o分别以整数、字符串、浮点数和对象来输出参数。最后一行，在格式化输出时，“%%”表示在第二个参数输出前加一个“%”，第三个参数“%%”不作为格式化规范使用，所以按字符串正常输出。格式化字符及含义见表1-2。
本书中代码加粗部分表示需要重点关注，以下代码标注用意相同。
表1-2 格式化字符及含义
console.info()方法可以用于在控制台输出提示信息，该方法对于开发过程进行测试很有帮助。
【示例1.2】 console.info()输出提示信息。
console.info(＇数据传输成功！＇);
var myObj = { publish: ＂人民邮电出版社＂, site :＂https://www.ptpress.com.cn＂ };
console.info(myObj);
var myArr = [＂Baidu＂, ＂Taobao＂, ＂Runoob＂];
console.info(myArr);
运行结果如图1-26所示。
图1-26 运行结果
console.info()方法可以输出一个字符串，也可以输出对象和数组。
console.error()方法用于输出错误信息到控制台，该方法对于开发过程进行测试也很有帮助。
【示例1.3】 console.error()输出错误信息。
console.error(＇数据格式错误！＇);
var myObj = { publisher : ＂人民邮电出版社＂, site : ＂https://www.ptpress.com.cn＂ };
console.error(myObj);
var myArr = [＂PHP＂, ＂Node.js＂, ＂JSP＂];
console.error(myArr);
运行结果如图1-27所示。
图1-27 运行结果
console.error()方法在控制台以红色文字打印以上字符串、对象和数组信息。
console.warn()方法用于输出警示信息到控制台，该方法对于开发过程进行测试也很有帮助。在Node.js中可以使用console.warn()方法来代替console.error()方法，两个方法的使用方法完全相同。
【示例1.4】 console.warn()输出警示信息。
console.warn(＇数据格式错误！＇);
运行显示为：
数据格式错误！
console.warn()方法在控制台以红色文字打印以上字符串信息。
console.dir()方法可以显示一个对象的所有属性和方法。
【示例1.5】 console.dir()输出对象信息。
var myObj = { publisher : ＂人民邮电出版社＂, site : ＂https://www.ptpress.com.cn}＂;
console.dir(myObj);
运行结果如图1-28所示。
图1-28 运行结果
console.dir()方法在控制台显示一个对象的所有属性和方法。
console.table()方法用来在控制台输出一个表格。
【示例1.6】 console.table()输出表格。
console.table([＂PHP＂, ＂Node.js＂, ＂JSP＂]);
console.table({＂C1＂: ＂PHP＂, ＂C2＂: ＂Node.js＂, ＂C3＂: ＂JSP＂});
运行结果如图1-29所示。
图1-29 运行结果
console.table()方法在控制台可以将一个数组或者对象以表格方式输出。当将数组转换成表格时，第一列为数组元素的索引值；当将对象转换成表格时，第一列为对象的“键”值。
若需要统计某个算法的运行时间，可以使用 console.time()方法和console.timeEnd()方法，这两个方法都要接受一个字符串作为参数，两个方法的参数要相同，这样才能正确计算出算法从开始到结束运行的时间。
【示例1.7】 console.time()和console. timeEnd()计时提示信息。
console.time(＂Tag＂);
var sum=0
for(var i=1;i<=100000;i++){
sum +=i;
}
console.log(sum);
console.timeEnd(＂Tag＂);
运行显示为：
5000050000 Tag: 3.819ms
运行结果第一行为1～100000所有整数之和，第二行显示运算所用的时间为3.819ms。
console.assert()在第一个参数值为false的情况下会在控制台输出信息。
【示例1.8】 console.assert()方法评估表达式后输出信息。
console.assert(12 == 11, ＂error 12==11＂);
console.assert(11 == 11, ＂什么都不做＂);
运行显示为：
Assertion failed: error 12==11
console.assert()对表达式结果进行评估，如果该表达式的执行结果为 false，则输出一个消息字符串并抛出AssertionError异常。若参数表达式返回true，则该语句什么都不做。
需要说明的是，对于 console.log()、console.info()、console.error()、console.warn()和console.dir()方法的输出结果在HBuilder中的区别不是特别明显，可以使用浏览器中的控制台来进行调试。
打开Chrome浏览器，按<F12>键，在调试窗口选择“console”，输入示例1.9所示代码。
【示例1.9】 浏览器控制台输出消息。
console.log(＇数据传输成功！＇);
console.info(＇数据传输成功！＇);
console.error(＇数据格式错误！＇);
console.warn(＇数据格式错误！＇);
var myObj = { publisher : ＂人民邮电出版社＂, site : ＂https://www.ptpress.com.cn＂ };
console.dir(myObj);
运行结果如图1-30所示。
图1-30 运行结果
在浏览器窗口的控制台中会使用不同的文字颜色和图标来表示不同方法对应的信息提示，展开对象数据，可以查看其属性。
视频4
调用console控制台的一系列方法实现以下输出。
（1）输出信息。
（2）调试输出。
（3）输出对象的层次结构。
（4）输出数据表格化。
（5）统计代码执行时间。
（6）分组输出信息。
（7）统计代码执行的次数。
（8）当表达式为false时，输出信息。
（9）用来追踪函数的调用轨迹。
（10）清除控制台所有内容。
<!DOCTYPE html>
<html lang=＂zh＂>
<head>
<meta charset=＂UTF-8＂>
<meta name=＂viewport＂ content=＂width=device-width, initial-scale=1.0＂>
<meta http-equiv=＂X-UA-Compatible＂ content=＂ie=edge＂>
<title>console的使用</title>
</head>
<body>
<script>
// 问题1：输出信息
console.log(＇Web前端开发＇);// 输出普通信息
console.info(＇Web前端开发＇);// 输出提示信息 (在lE上有区分)
console.error(＇Web前端开发＇);// 输出错误信息
console.warn(＇Web前端开发＇);// 输出警示信息
// 问题2：调试输出
/*此函数作用与 console.log 作用相同，均为调试输出。目前谷歌浏览器和Opera不支持console.debug()，在控制台中看不到效果。可在lE浏览器中看到效果
*/
console.debug(＂这是一行文字＂);
// 问题3：输出对象的层次结构
/*
此函数作用与console.log作用效果相同，但是打开节点时，两者之间存在差异。在观察节点时，dir的效果要明显好于log的
*/
var oBody = document.body;
console.dir(oBody)
// 问题4：输出数据表格化
var students = [{
name: ＇张三＇,
email: ＇zhangsan@163.com＇,
qq: 12345
},
{
name: ＇李四＇,
email: ＇lisi@126.com＇,
qq: 12346
},
{
name: ＇王五＇,
email: ＇wangwu@sina.com＇,
qq: 12347
},
{
name: ＇赵六＇,
email: ＇zhaoliu@gmail.com＇,
qq: 12348
}
];
console.table(students);
let person = {
name: ＇Harrison＇,
age: 20,
say() {
console.log(this.name + ＇很帅！＇);
}
}
console.table(person);
// 问题5：统计代码执行时间
console.time(＇统计for循环总循环时间＇);
for (var i = 0, count = 0; i < 99999; i++) {
count++;
}
console.timeEnd(＇统计for循环总循环时间＇);
console.time(＇统计while循环总循环时间＇);
var i = 0, count = 0;
while (i < 99999) {
count++;
i++;
}
console.timeEnd(＇统计while循环总循环时间＇);
// 问题6：分组输出信息
console.group(＇前端1组＇);
console.log(＇前端1组-1＇);
console.log(＇前端1组-2＇);
console.log(＇前端1组-3＇);
console.groupEnd();
console.group(＇Java2组＇);
console.log(＇Java2-1＇);
console.log(＇Java2-2＇);
console.log(＇Java2-3＇);
console.groupEnd();
// 问题7：统计代码执行的次数
function testFn() {
console.count(＇当前函数被调用的次数＇);
}
testFn();
testFn();
testFn();
for (i = 0; i < 5; i++) {
console.count(＇for循环执行次数＇);
}
// 问题8：当表达式为false时，输出信息
var flag = false;
console.assert(flag, ＇当flag为false时才输出！＇);
// 问题9：用来追踪函数的调用轨迹
var x = fn3(1, 1);
function fn3(a, b) {
return fn2(a, b);
}
function fn2(a, b) {
return fn1(a, b);
}
function fn1(a, b) {
return fn(a, b);
}
function fn(a, b) {
console.trace();// 运行后，会显示fn()的调用轨迹
return a + b;
}
// 问题10：清除控制台所有内容
// console.clear()
</script>
</body>
</html>
在控制台输出结果如图1-31所示。
图1-31 Console输出结果
打开Chrome浏览器，按<F12>键，在控制台查看运行结果。代码中使用Console的不同方法输出不同的内容，注意输出内容的颜色及代表的含义。