console的隱藏知識點，你get到了嘛？

時間 2021-05-17

標籤 html json 數組 dom 函數性能測試 spa debug 日誌欄目 HTML 简体版

原文原文鏈接

常見用法

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")

這些控制檯將根據提供給它們的事件類型，直接以適當的顏色打印原始字符串html

測試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 樣式應用於控制檯輸出json

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 ()容許咱們在控制檯中生成一個表。輸入必須是一個數組或一個對象，該對象將以表的形式顯示dom

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對象就明顯對比spa

<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，則記錄消息並將跟蹤堆棧到控制檯
它只會打印錯誤的參數，若是第一個參數是真的，它什麼也不會作debug

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(![image.png](/im![image.png](/img/bVcR26L)

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。