文章目录
- 首先打开我们的浏览器控制台,点击这个图标会出现
- errors:表示打印的错误信息
- warnings:表示打印的警告信息
- info:表示打印的普通信息
- verbose:表示打印的调试信息
一、常规用法
1.1、console.log()
console.log
方法用于在控制台输出信息。- 它可以接受一个或多个参数,将它们连接起来输出。
- 大多数人只使用
console.log()
这种语法
/* 打印单个信息 */
console.log('Hello World') // Hello World
/* 打印多个信息 */
console.log('a', 'b', 'c') // a b c
- 但他其实还有另外一种占位符语法
console.log('I like %s but I do not like %s.', 'AA', 'BB');
// I like AA but I do not like BB.
- 占位符解析:
占位符 | 说明 |
---|---|
%s | 字符串 |
%d | 整数 |
%i | 整数 |
%f | 浮点数 |
%o | 对象的链接 |
%c | CSS 格式字符串 |
- 示例:
%o
console.log('AA %o BB', {name: 'jj'});
- 示例:
%c
console.log('AA %cBB CC', 'color: white; background-color: orange;');
1.2、console.info()
console.info
是console.log
方法的别名,用法完全一样。- 有些低版本的浏览器
console.info
方法会在输出信息的前面,加上一个蓝色图标。 - 目前的话,蓝色图标是没有的
console.log("log")
console.info("info")
1.3、console.debug()
console.debug
方法与console.log
方法类似,会在控制台输出调试信息。- 但是,默认情况下,
console.debug
输出的信息不会显示,只有在打开显示级别在verbose
的情况下,才会显示。
console.debug("debug")
1.4、console.warn()
- warn方法也是在控制台输出信息,与log方法的不同之处在于,warn方法输出信息时,在最前面加一个黄色三角,表示警告;
- 同时,还会高亮显示输出文字和错误发生的堆栈。其他方面都一样。
console.warn("warn")
1.5、console.error()
- error方法也是在控制台输出信息,与log方法的不同之处在于,error方法输出信息时,在最前面加一个红色的叉,表示出错。
- 同时,还会高亮显示输出文字和错误发生的堆栈。其他方面都一样。
console.error("error")
二、特殊用法
2.1、console.table()
- 对于某些复合类型的数据,console.table方法可以将其转为表格显示。
var array = [
{ name: "JavaScript", fileExtension: ".js" },
{ name: "TypeScript", fileExtension: ".ts" },
];
console.table(array);
- 第二个可选参数是你想要显示列表的某列。默认是整个列表,但是我们也能这样做:
var array = [
{ name: "JavaScript", fileExtension: ".js" },
{ name: "TypeScript", fileExtension: ".ts" },
];
console.table(array,["name"]);
- 如果出现只展示了一行的数据情况,因为他是默认折叠了,可以点击表头展开
2.2、console.count()
- count方法用于计数,输出它被调用了多少次
function fun(user) {
console.count();
}
fun('aa')
fun('bb')
fun('cc')
- 该方法可以接受一个字符串作为参数,作为标签,对执行次数进行分类
function fun(user) {
console.count(user);
}
fun('aa')
fun('bb')
fun('cc')
2.3、console.dir()
- dir方法用来对一个对象进行检查(inspect),并以易于阅读和打印的格式显示。
console.log({f1: 'foo', f2: 'bar'})
console.dir({f1: 'foo', f2: 'bar'})
2.4、console.assert()
-
console.assert
方法主要用于程序运行过程中,进行条件判断,如果不满足条件,就显示一个错误,但不会中断程序执行。这样就相当于提示用户,内部状态不正确。 -
它接受两个参数,第一个参数是表达式,第二个参数是字符串。
-
只有当第一个参数为false,才会提示有错误,在控制台输出第二个参数,否则不会有任何结果。
var aa = 100
var bb = 99
console.assert(aa !== bb ,"aa 不等于 bb") // 为true,无打印
console.assert(aa === bb ,"aa 等于 bb") // 为false,有打印
2.5、console.time(),console.timeEnd()
- 这两个方法用于计时,可以算出一个操作所花费的准确时间。
- time方法表示计时开始,timeEnd方法表示计时结束。
- 它们的参数是计时器的名称,需要保持一致。
- 调用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');