【javascript】js中console的多种用法

怼烎@ 2022-10-06 00:48 173阅读 0赞

> `前言`

偶尔看到的一些页面中，通过console打印的日志是可以带颜色的。  
参考文档：[https://blog.csdn.net/u010071211/article/details/83864718][https_blog.csdn.net_u010071211_article_details_83864718]

> `带颜色的日志`

console.log('最常见用法\n换行');
    console.error('输出错误信息 会以红色显示');
    console.warn('打印警告信息 会以黄色显示');
    console.info('打印一般信息');
    // 清空上面的console显示
    console.clear();

> `带背景色的日志(自定义)`

*  第一种  
    采摘自：[https://zhidao.baidu.com/question/2272298545030811508.html][https_zhidao.baidu.com_question_2272298545030811508.html]
    
        console.log('%c this is color! ', 'background: #222; color: #bada55')
    
    ![在这里插入图片描述][20210610133813525.png]
 *  第二种
    
        console.log(
        'Nothing here %cHi Cat %cHey Bear',  // Console Message
        'color: blue', 'color: red' // CSS Style
        )
    
    ![在这里插入图片描述][2021061013465652.png]

> `分组`

以console.group开始  
以console.groupEnd结束  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3MxNDQxMTAxMjY1_size_16_color_FFFFFF_t_70]

> `方法计数`

查看该方法被调用了多少次，写在方法内部  
console.count()

[https_blog.csdn.net_u010071211_article_details_83864718]: https://blog.csdn.net/u010071211/article/details/83864718
[https_zhidao.baidu.com_question_2272298545030811508.html]: https://zhidao.baidu.com/question/2272298545030811508.html
[20210610133813525.png]: /images/20221005/dc58a36e99d047279aabf6806091465d.png
[2021061013465652.png]: /images/20221005/7a027f4b7bc14f01a372adeb0c121f38.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3MxNDQxMTAxMjY1_size_16_color_FFFFFF_t_70]: /images/20221005/ad899a8de0274affbdd2d397b6977007.png