Console对象的常用api学习记录

prtyaa 2023-12-26 18:39:48  64375

分类专栏：资讯

Console对象

js中也有万物皆对象的定义，所以我们常用的console也是一个对象，自然是对象，那么其身上就会自带一些方法和属性。大家F12打开控制台以后，直接输入console回车，就可以看明细啦，如下图：

本文记录一下常用的console的api，细节来自于官方文档：Chrome DevTools中文手册：

https://leeon.gitbooks.io/devtools/content/learn_basic/overview.htmlleeon.gitbooks.io/devtools/content/learn_basic/overview.html

里面还有其他很多谷歌开发工具的使用细节，大家没事的时候，可以多逛逛，必当大有裨益^_^

Console控制台api

1. console.assert()方法，一般使用的不多，相当于一个条件判断。比如有如下代码：

let isLogin = true
console.assert(isLogin, 'isLogin为false，当前处于未登录状态')
// 此时isLogin为true不会执行打印，如果为false的时候，就会打印提示：isLogin为false，当前处于未登录状态
// 相当于：
if(!isLogin){console.log('isLogin为false，当前处于未登录状态')} //图示如下：

2. console.clear()方法，也可以清空控制台,清空控制台，并输出 Console was cleared，图示如下：

3. console.count()方法，这个方法有点鸡肋，就是用来计数的，计数的话，我们使用console.log也是可以计数的。看代码就知道了

let arr = ['甲', '乙', '丙', '丁']
for (let i = 0; i < arr.length; i++) {
    console.count('console.count计数')
    console.log('console.log计数', i + 1)
} // 结果如下图：

4. console.debug()方法，和console.log()基本上一样，用的也少，不赘述

5. console.dir()方法，一般用于打印dom对象，查找其身上的属性，挺常用的。图示如下：

6. console.dirxml()方法，用于打印XML/HTML文档结构的方法，挺好。示例如下：

<body>
    <h1>
        <span>
            <h2>你好console.dirxml()</h2>
        </span>
    </h1>
    <script>
        let span = document.querySelector('h1')
        console.dirxml(span)
    </script>
</body>
// 打印图如下：

7. console.error()和console.exception()方法，用于抛出错误到控制台，我们在编码过程中遇到的框架（vue/react）报错信息，都是被这个方法抛出来的。或者我们自己封装的函数方法，如果使用者没有按照正确的方式去使用，我们也可以使用这个方法，做一个抛错提示在控制台上，有助于更好的开发

8. console.warn()方法，同上，只不过这个是抛出警告，没有上面的抛出错误那么严重。毕竟对于程序员而言，警告不用管，报错才去看，哈哈

console.info()抛出一个信息

9. console.log()，万能狗皮膏药，最常用的方法，不赘述。毕竟遇事不决，console大法！

10. console.table()方法，用于在控制台打印一个table表格，比如我们把项目更新的版本号时间之类的信息，以表格的形式呈现在控制台上，代码和示例图如下：

let arr = [
    // 每个对象的key是表格每一列表头的数据，value是每一行的数据
    {
        edition: 'v1.0',
        author: '孙悟空',
        time: '2020-06-06',
    },
    {
        edition: 'v2.0',
        author: '猪八戒',
        time: '2021-07-07',
    },
    {
        edition: 'v3.0',
        author: '沙和尚',
        time: '2022-08-08',
    },
]
console.table(arr)

点击一下表头，还可以排序呢

11. cosole.time和console.timeEnd方法 用于计时的，看看自己的程序用了多久，一般用于性能优化时候的排查、时间监控之类的。比如可以算算一个循环执行了多长时间、比如可以可以算算一个递归执行了多长时间之类的。cosole.time相当于开始掐秒表，console.timeEnd相当于结束掐秒表。代码图示如下：

console.time() // 开始掐表表
for (let i = 0; i < 100; i++) { }
console.timeEnd() // 结束掐秒表

console.timeLog相当于记录中间的时间日志，用的不是特别多

12. console.trace()与console.log()基本上一样，不赘述

特殊控制台打印

%s 字符串格式（用的少）
%i 或 %d 整型格式（用的少）
%f 浮点格式（用的少）
%o DOM节点（用的少）因为：console.log('%o',document.body) == console.dirxml(document.body)
%O JavaScript 对象（用的少）因为：console.log('%O',document.body) == console.dir(document.body)
%c 对输出的字符串使用css样式，样式通过第二个参数指定。有几个%c 就要有几个对应的第二个参数。第二个参数，使用逗号分隔开（用的多、用的多、用的多）举例如下：

// 这里分别给孙悟空、猪八戒、沙和尚指定不同的样式
let content = "%c 孙悟空 %c 猪八戒 %c 沙和尚"
let styleSunWuKong = "color: white; background: black; padding:5px;"
let styleZhuBaJie = "color: green; background: pink; padding:5px;"
let styleShaHeShang = "color: yellow; background: purple; padding:5px;"
console.log(content, styleSunWuKong, styleZhuBaJie, styleShaHeShang); // 效果图如下：

打印图片（背景图url的方式），代码效果图如下：

console.log(`%c `, `background-image: url(http://ashuai.work/static/img/avantar.66bb7908.png);
                    padding: 120px 120px;
                    background-size: cover;
                    background-repeat: no-repeat;
                    `
            )