目录
一、Console 对象:用于 JavaScript 调试
二、Console对象静态方法:用来与控制台窗口互动
console.log():用于在控制台窗口输出信息。
console.info():是 console.log() 的别名,用于在控制台窗口输出信息。
console.debug():与 console.log() 类似,用于在控制台窗口输出信息。区别:默认情况下,console.debug 输出的信息不会显示,只有在打开Default levels在 Verbose 的情况下,才会显示。
console.warn():与 console.log() 类似,用于在控制台窗口输出信息。区别:warn方法输出信息时,在最前面加一个黄色三角,表示警告;同时高亮显示输出文字和错误发生的堆栈。
console.error():与 console.log() 类似,用于在控制台窗口输出信息。区别:error方法输出信息时,在最前面加一个红色的叉,表示出错;同时高亮显示输出文字和错误发生的堆栈。
console.table():将复合类型的数据转为表格显示。
console.count():用于计数,输出它被调用了多少次。
console.dir():用来对一个对象进行检查,并以易于阅读和打印的格式显示。
console.assert():主要用于程序运行过程中,进行条件判断,如果不满足条件,就显示一个错误,但不会中断程序执行。这样就相当于提示用户,内部状态不正确。注意:assert方法接受两个参数,第一个参数是表达式,第二个参数是字符串。只有当第一个参数为false,才会输出第二个参数,否则不会有任何结果。
console.time()、console.timeEnd():两个方法表示计时,可以计算出一个操作花费的时间;第一个表示计时开始,第二个表示计时结束。
console.group()、console.groupEnd()、console.groupCollapsed():用于将显示的信息分组,可以把信息进行折叠和展开;结束内联分组;与console.group方法很类似,唯一的区别是该组的内容,在第一次显示时是收起的(collapsed),而不是展开的。
console.trace():追踪函数的调用过程。
console.clear():清除当前控制台的所有输出,将光标回置到第一行。
debugger语句:用于除错,作用是设置断点。Chrome 浏览器中,当代码运行到debugger语句时,就会暂停运行,自动打开脚本源码界面。
一、Console 对象:用于 JavaScript 调试
JavaScript 原生中默认是没有 Console 对象,这是游览器提供的内置对象。 用于访问调试控制台, 在不同的浏览器里效果可能不同。
Console 对象常见的两个用途:
显示网页代码运行时的错误信息;
提供了一个命令行接口,用来与网页代码互动。
二、Console对象静态方法:用来与控制台窗口互动
console.log():用于在控制台窗口输出信息。
console.log支持以下格式占位符:%s (字符串)、%d (整数)、%i (整数)、%f (浮点数)、%o (对象的链接)、%c (CSS 格式字符串)
console.info():是 console.log() 的别名,用于在控制台窗口输出信息。
console.debug():与 console.log() 类似,用于在控制台窗口输出信息。
区别:默认情况下,console.debug 输出的信息不会显示,只有在打开Default levels在 Verbose 的情况下,才会显示。
![](https://i-blog.csdnimg.cn/direct/51a9158173dd45d58cd3469514f6e719.png)
console.warn():与 console.log() 类似,用于在控制台窗口输出信息。
区别:warn方法输出信息时,在最前面加一个黄色三角,表示警告;同时高亮显示输出文字和错误发生的堆栈。
![](https://i-blog.csdnimg.cn/direct/9c57153c477b47f594f323d44a7daaa4.png)
console.error():与 console.log() 类似,用于在控制台窗口输出信息。
区别:error方法输出信息时,在最前面加一个红色的叉,表示出错;同时高亮显示输出文字和错误发生的堆栈。
![](https://i-blog.csdnimg.cn/direct/c136b854c73e4bd4ba7282d52830922e.png)
console.table():将复合类型的数据转为表格显示。
![](https://i-blog.csdnimg.cn/direct/59f94d70c020455cbf6b8a29fd6bf3a9.png)
console.count():用于计数,输出它被调用了多少次。
![](https://i-blog.csdnimg.cn/direct/0d515ba38a2444fabddb08a7aa8c2f52.png)
console.dir():用来对一个对象进行检查,并以易于阅读和打印的格式显示。
![](https://i-blog.csdnimg.cn/direct/98ddaf91435f4b03b7845f2710ce162f.png)
console.assert():主要用于程序运行过程中,进行条件判断,如果不满足条件,就显示一个错误,但不会中断程序执行。这样就相当于提示用户,内部状态不正确。注意:assert方法接受两个参数,第一个参数是表达式,第二个参数是字符串。只有当第一个参数为false,才会输出第二个参数,否则不会有任何结果。
![](https://i-blog.csdnimg.cn/direct/1fdfe96e1d9c4c63b9c35e554718f798.png)
console.time()、console.timeEnd():两个方法表示计时,可以计算出一个操作花费的时间;第一个表示计时开始,第二个表示计时结束。
![](https://i-blog.csdnimg.cn/direct/7fda78a60ad3403c9e33604941e0a9be.png)
console.group()、console.groupEnd()、console.groupCollapsed():用于将显示的信息分组,可以把信息进行折叠和展开;结束内联分组;与console.group方法很类似,唯一的区别是该组的内容,在第一次显示时是收起的(collapsed),而不是展开的。
![](https://i-blog.csdnimg.cn/direct/e47489b94ad64425baea388ae50188c6.png)
console.trace():追踪函数的调用过程。
![](https://i-blog.csdnimg.cn/direct/efb236bb761e4b149f6e29caa865251f.png)
console.clear():清除当前控制台的所有输出,将光标回置到第一行。
debugger语句:用于除错,作用是设置断点。
Chrome 浏览器中,当代码运行到debugger语句时,就会暂停运行,自动打开脚本源码界面。
![](https://i-blog.csdnimg.cn/direct/4b31c832cc1e4120a0d117efd9d4d1e6.png)
自动跳转到以下界面,弹出检查窗口进入debugger调试,按F10执行一条代码,并在代码后面显示数据值。
原文链接:https://blog.csdn.net/m0_63021947/article/details/120951043