当前位置：主页 > 查看内容

console的隐藏知识点，你get到了嘛？

发布时间：2021-05-17 00:00| 有 位朋友查看

简介：常见用法 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) 这些控制台将根据提供给它们的事件类型，直……

常见用法

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>

image.png

样式控制台输出

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

本文转自网络，版权归原作者所有，原文链接：https://segmentfault.com/a/1190000040012013
本站部分内容转载于网络，版权归原作者所有，转载之目的在于传播更多优秀技术内容，如有侵权请联系QQ/微信：153890879删除，谢谢！
上一篇：html5中几个不容错过的api或者tips小结 下一篇：面试官：观察过 chrome 调试工具的请求体么？Form Data 和 Reque

推荐图文

  • 周排行
  • 月排行
  • 总排行

随机推荐