console 简述

简介

Console 对象用于 JavaScript 调试。

JavaScript 原生中默认是没有 Console 对象,这是宿主对象（也就是游览器）提供的内置对象。 用于访问调试控制台, 在不同的浏览器里效果可能不同。

Console 对象方法

方法	说明	示例
assert()	接受两个参数,第一个参数(表达式)为false时输出第二个参数	console.assert(false,"条件为false")
clear()	清除当前控制台的所有输出，将光标回置到第一行	console.clear()
count()	输出执行次数(计数器)	console.count('count')
countReset()	重置计数器()	console.countReset('count')
log()	输出信息	console.info("log")
info()	输出信息(log的别名)	console.info("info")
debug()	输出信息(log的别名)	console.debug("debug")
warn()	输出一条带有黄色叹号的提示信息,表示警告信息	console.warn("警告")
error()	输出一条带有红叉的提示信息,表示错误信息同时会显示错误发生的堆栈	console.error("错误")
dir()	输出一个对象所有的属性和方法	console.dir({a:1})
dirxml()	可以输出xml或html 一个dom节点	console.dirxml()
group()	与groupEnd 联合使用 用于将显示的信息分组，可以把信息进行折叠和展开	console.group('第一层'); console.log('欢迎'); console.group('第二层'); console.log('光临'); console.groupEnd(); console.groupEnd()
groupCollapsed()	() 与console.group方法很类似,唯一区别是第一次显示是收起的而不是展开的	console.groupCollapsed('第一层'); console.log('欢迎'); console.groupCollapsed('第二层'); console.log('光临'); console.groupEnd(); console.groupEnd()
groupEnd()	与group()或groupCollapsed() 联合使用 用于将显示的信息分组，可以把信息进行折叠和展开	console.group('第一层'); console.log('欢迎'); console.group('第二层'); console.log('光临'); console.groupEnd(); console.groupEnd()
table()	可以将对象和数组已表单形式输出	console.table([{age:18,name:"季法"}])
time()	与timeEnd()一起使用可以计算出两个之前代码的运行时间	console.time("");let count=1;count++;console.timeEnd("first")
timeLog()	与timeEnd()和time(),可以输出过程中此开始到代码出的运行时间	console.time("");let count=1;count++;console.timeEnd("first")
timeEnd()	time()可以计算出两个之前代码的运行时间	console.time("first");let count=1;count++;console.timeEnd("first")
trace()	来获取要打印的数据的stacktrace,可以追踪到代码的执行位置	console.trace("first")
profile()	与profileEnd一起使用,用于调试,测试代码性能需要安装插件不建议使用	console.profile();let count=1;count++;console.profileEnd()
profileEnd()	与profile一起使用,用于调试,测试代码性能需要安装插件不建议使用	console.profile();let count=1;count++;console.profileEnd()
timeStamp()	将标记添加到浏览器的时间轴或瀑布工具	console.timeStamp(console.timeStamp()
memory	一个属性显示内存情况	console.log(console.memory)
context	???(暂无发现作用)	???

1.console.log([data][, ...args])

输出信息

 console.log('你好log')  // log
 console.info('你好info')// info 
 console.debug('你好debug') //debug
 console.warn('warn')//warn       --带有警告标识的信息
 console.error('error') //error   --带有错误标识的信息带有样式

• 输出变量 占位符
  • %s字符串
  • %d,%i整数
  • %f浮点数
  • %o对象超链接
  • %cCSS格式化样式

let string = "字符串";
let integer = 1;
let float = 1.5;
let obj= {
    a: '对象',
};
console.log('字符串:%s \n 整数:%d \n 小数:%f \n 对象:%o', string, integer, float, obj)
console.log('%c 🍩 我带有样式', 'background-color: #E41A6A;color:#fff;', '我没有样式')

2.console.trace([message][, ...args])

显示数据的stacktrace,会追踪显示是出代码执行的位置

 function aa(a,b){
console.trace();
return a+b;
}
function aa1(a,b){return aa(a,b);}
function aa2(a,b){return aa1(a,b);}
function aa3(a,b){return aa2(a,b);}
aa3(1,1)

3.console.time([label]) && console.timeEnd([label]),console.timeLog([label][, ...data])

可以计算出两个之前代码的运行时间,timeLog可以插入获取期间的时间

console.time("example");  
for (let i = 0; i<5;  i++) {
    console.timeLog('example'); 
}
console.timeEnd("example");

// example: xxxxxx ms
// example: xxxxxx ms
// example: xxxxxx ms
// example: xxxxxx ms
// example: xxxxxx ms
// example: xxxxxx ms

4.console.memory

是一个属性用来显示内存情况

console.log(console.memory) //MemoryInfo对象

5.console.count([label])

一个计数器,可以记录自己执行了多少次

console.count('example1') // example1:1
console.count('example1') // example1:2
console.count('example2') // example2:1 
console.count('example1') // example1:3
console.count() // default: 1
console.count() // default: 2
console.count('example2') // example2:2
console.count('example1') // example1:4
console.count('example2') // example2:3

6.console.countReset([label])

重置 console.count

console.count('example1') // example1:1
console.count('example2') // example2:1 
console.count() // default: 1
console.countReset()
console.count('example1') // example1:2
console.count('example2') // example2:2
console.count() // default: 1
console.countReset('example1')
console.count('example1') // example1:1
console.count('example2') // example2:3
console.count() // default: 2
console.countReset('example2')
console.count('example1') // example1:2
console.count('example2') // example2:1 
console.count() // default: 3
console.count('example2') // example2:2
console.count('example1') // example1:3
console.count('example2') // example2:3

7.console.assert(value[, ...message])

接受两个参数 当第一个参数为false时 输出错误消息(参数二)

console.assert(1!=1,"为false时显示") //Assertion failed: 为false时显示

8.console.group([label]) & console.groupEnd([label])

把其间的内容分层级

console.group('group1') 
console.log("第一层")
console.group('group2') 
console.groupEnd('group2')
console.log("第二层")
console.groupEnd('group1')

9. console.table(tabularData[, properties])

输出一个对象

console.table({a:1,b:2})

输出一个数组

console.table([{a:1,b:2},{a:1,b:2}])

可以将 对象和数组 已表单形式输出 字符串还是字符串

10.console.dir(obj[, options])

输出一个对象的

console.log(document.createElement("div"))
console.dir(document.createElement("div"))
console.log(a)
console.dir(a)

会发现 console.log()输出的是对象源代码，console.dir()则输出该对象的内容，所有属性和方法。log会说出DOM结构,而dir会输出DOM对象

11.console.dirxml(...data)

console.dirxml(document.createElement("div"))

类似于 console.log()

12.console.clear()

 console.clear()  

清除控制台输出的内容

13. console.groupCollapsed([label])&console.groupEnd([label])

和console.group()一样 唯一区别是默认是闭合的

14. console.profile(),console.profileEnd()

测试代码性能需要安装插件

不建议使用

15. console.timeStamp([label])

向浏览器的 Performance 或者 Waterfall 工具添加一个标记。 这样可以让你将代码中的一个点和其他在时间轴上已记录的事件相关联， 例如布局事件和绘制事件等。

不建议使用