<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button>test</button>
<script>
console.debug('debug') //浏览器默认隐藏debug
console.info('info')
//处理表格json对象绝佳
console.table([{ name: "a", age: 2 }, { name: "b", age: 5 }, { name: "c", age: 7 }])
//分组展示
console.group('group')
console.log("1");
console.log("2");
console.log("3");
console.groupEnd('group')
//打印对象结构
let video = document.getElementsByTagName("video")[0]
console.dir(video)
//console也可以记时和计数
console.trace() //打印函数堆栈信息
//consloe同样是可以带样式的
const style = `
font-size: 30px;
background-color: red;
color: white;
padding: 5px;
`
console.log('%c老子带样式', style)
</script>
</body>
</html>
效果图