常见用法
console.log() | info() | debug() | warn() | error() console.log("console log")
console.info("console info")
console.debug("console debug")
console.warn("console warn")
console.error("console error")这些控制台将依据提供给它们的事件类型，间接以适当的色彩打印原始字符串
测试 Demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
console.log("console log")
console.info("console info")
console.debug("console debug")
console.warn("console warn")
console.error("console error")
</script>
<script>
console.log("%cText color is green and increased font size", "color: green; font-size: 2rem;")
</script>
<script>
console.log("Multiple styles: %cred %corange", "color: red", "color: orange", "Additional unformatted message");
</script>
<script>
let info1 = [["Suprabha"], ["Frontend Dev"], ["Javascript"]]
console.table(info1)
</script>
<script>
console.group()
console.log("Test 1st message")
console.group("info")
console.log("Suprabha")
console.log("Frontend Engineer")
console.groupEnd()
console.groupEnd()
</script>
<script>
let info2 = {
"name": "Suprabha",
"designation": "Frontend Engineer",
"social": "@suprabhasupi"
}
console.dir(info2)
</script>
<!-- console.dir -->
<button>console.log 打印触发对象 </button>
<button>console.dir 打印触发对象 </button>
<script>
console.log(document.body, 'bodyHtml');
console.dir(document.body);
let oButton = document.getElementsByTagName('button');
oButton[0].onclick = function(event){console.log(event.target, 'button1');
}
oButton[1].onclick = function(event){console.dir(event.target, 'button2');
}
</script>
<script>
console.assert(false, "Log me!")
</script>
<script>
let name = "supi"
let msg = "Its not a number"
console.assert(typeof msg === "number", {name: name, msg: msg})
</script>
<script>
console.count("Hey")
console.count("Hey")
console.count("Hey")
console.count("Hey")
</script>
<script>
for (let i = 0; i < 5; i++) {console.count()
}
</script>
<script>
console.time("Time")
let l = 0;
for (let i = 0; i < 5; i++) {l += i}
console.log("total", l)
console.timeEnd("Time")
</script>
</body>
</html>
款式控制台输入
能够应用 % c 指令将 CSS 款式利用于控制台输入
console.log("%cText color is green and increased font size", "color: green; font-size: 2rem;")咱们能够屡次增加 % c
console.log("Multiple styles: %cred %corange", "color: red", "color: orange", "Additional unformatted message");console.table()
Table ()容许咱们在控制台中生成一个表。输出必须是一个数组或一个对象，该对象将以表的模式显示
let info = [["Suprabha"], ["Frontend Dev"], ["Javascript"]]
console.table(info)group(“group”) & groupEnd(“group”)
要组织控制台，让咱们应用 console.group () & console.groupEnd ()
应用控制台组，将控制台日志分组在一起，而每个分组在层次结构中创立另一个级别。调用 groupEnd 缩小了一个
console.group()
console.log("Test 1st message")
console.group("info")
console.log("Suprabha")
console.log("Frontend Engineer")
console.groupEnd()
console.groupEnd()console.dir()
打印指定对象的 JSON 示意模式
let info = {
"name": "Suprabha",
"designation": "Frontend Engineer",
"social": "@suprabhasupi"
}
console.dir(info)间接打印 json 可能不显著，用来打印 dom 对象就显著比照
<button>console.log 打印触发对象 </button>
<button>console.dir 打印触发对象 </button>
<script>
console.log(document.body, 'bodyHtml');
console.dir(document.body);
let oButton = document.getElementsByTagName('button');
oButton[0].onclick = function(event){console.log(event.target, 'button1');
}
oButton[1].onclick = function(event){console.dir(event.target, 'button2');
}
</script>console.assert()
如果第一个参数为 false，则记录音讯并将跟踪堆栈到控制台
它只会打印谬误的参数，如果第一个参数是真的，它什么也不会做
console.assert(false, "Log me!")let name = "supi"
let msg = "Its not a number"
console.assert(typeof msg === "number", {name: name, msg: msg})console.count ()
这个函数记录调用 count ()的次数。这个函数承受一个可选的参数标签
如果提供了 label，此函数将记录应用该特定标签调用 count ()的次数
console.count("Hey")
console.count("Hey")
console.count("Hey")
console.count("Hey")如果省略标签，函数将记录在这一行中调用 count ()的次数
for (let i = 0; i < 5; i++) {console.count()
}time() and timeEnd()
查看代码在执行时的性能,Time ()是一种更好的办法来跟踪 JavaScript 执行所破费的微工夫
console.time("Time")
let l = 0;
for (let i = 0; i < 5; i++) {l += i}
console.log("total", l)
console.timeEnd(