常見用法
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(
