前端小知识：控制台打印（console）- 模拟Java日志打印、表格形式打印美化输出对象、代码运行时间统计

嗯嗯**

已于 2022-12-24 10:37:36 修改

阅读量5.6k

点赞数 2

分类专栏：前端知识文章标签：前端 javascript console 技巧

于 2022-12-24 10:36:26 首次发布

本文链接：https://blog.csdn.net/weixin_39651356/article/details/128426434

版权

前端知识专栏收录该内容

25 篇文章 0 订阅

订阅专栏

文章目录

6. 控制台打印（Console）

6. 控制台打印（Console）

官方文档： https://developer.mozilla.org/zh-CN/docs/Web/API/Console#用法

模拟Java日志打印格式

替换字符	作用
%o	对象（可看到内部结构）
%s	字符串


<!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>
</body>
<script>
    let people = {
        name: "lrc",
        year: 18
    }
    let article = {
        id: "423432431sfsdf",
        content: "测试控制台接口"
    }
    
    
    //不建议：这样打印不出对象内部结构
    console.log("people：" + people + " article: " + article)
    console.log("people：%s article: %s", people, article)
    
    
    //建议 == 下面两种是一样的
    console.log("people：", people, "article: ", article)
    console.log("people：%o article：%o", people, article)
</script>
</html>

在这里插入图片描述

美化对象打印（表格形式打印输出）

<!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>

</body>

<script>
    let people = {
        name: "lrc",
        year: 18
    }

    let article = {
        id: "423432431sfsdf",
        content: "测试控制台接口"
    }

    
    console.table(people)
    console.table(article)


    let arrays = [people,article]
    console.table(arrays)


</script>

</html>

在这里插入图片描述

日志等级输出（让其在控制台显示时有颜色提示）

<!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>

</body>

<script>


    console.error("错误日志哦！！！")
    console.warn("警告日志哦！！！")
    console.log("普通日志哦！！！")

</script>

</html>

在这里插入图片描述

代码运行时间统计打印输出

<!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>

</body>

<script>


    console.time("代码时间统计");
    let people = {
        name: "lrc",
        year: 18
    }

    let article = {
        id: "423432431sfsdf",
        content: "测试控制台接口"
    }
    console.timeLog("代码时间统计");

    //不建议：这样打印不出对象内部结构
    console.log("people：" + people + " article: " + article)
    console.log("people：%s article: %s", people, article)


    //建议 == 下面两种是一样的
    console.log("people：", people, "article: ", article)
    console.log("people：%o article：%o", people, article)
    console.timeLog("代码时间统计");

    
    console.table(people)
    console.table(article)

    let arrays = [people,article]
    console.table(arrays)
    console.timeLog("代码时间统计");

    



    console.error("错误日志哦！！！")
    console.warn("警告日志哦！！！")
    console.log("普通日志哦！！！")
    console.timeEnd("代码时间统计");

</script>

</html>