不一样的console-log

来看看 控制台中console的各种实现~

• console.log 用于输出普通信息
• console.info 用于输出提示性信息
• console.error 用于输出错误信息
• console.warn 用于输出警示信息
• console.group&console.groupEnd 输出一组信息
• console.table 信息通过表格展示
• console.count 函数执行次数
• console.dir将Dom 树结构输出
• console.time 计时开始
• console.timeEnd 计时结束
• console.profile&console.profileEnd 查看CPU使用相关信息、
• console.timeLine&console.timeLineEnd 记录一段时间轴
• console.trace 堆栈跟踪相关的调试

基础用法

复制代码贴入console中试试看

// 换行
console.log('第一行\n第二行');
// 样式
console.log('%c换个颜色','color:blue;');
// 图片
console.log("%c ","background: url(https://gitby-leo.github.io/images/avatar.jpg) no-repeat center;padding-left:80px;padding-bottom: 80px;");

字符画

打开http://patorjk.com/找到Text to ASCII Art Generator

目前支持315种英文字符样式

字符生成复制后直接放console

npm包，如figlet

// 打开控制台可见
console.log(`
 __    ____  _____ 
(  )  ( ___)(  _  )
 )(__  )__)  )(_)( 
(____)(____)(_____)
`)

<script>
console.log(`
          _____            _____                   _______         
         /\    \          /\    \                 /::\    \        
        /::\____\        /::\    \               /::::\    \       
       /:::/    /       /::::\    \             /::::::\    \      
      /:::/    /       /::::::\    \           /::::::::\    \     
     /:::/    /       /:::/\:::\    \         /:::/~~\:::\    \    
    /:::/    /       /:::/__\:::\    \       /:::/    \:::\    \   
   /:::/    /       /::::\   \:::\    \     /:::/    / \:::\    \  
  /:::/    /       /::::::\   \:::\    \   /:::/____/   \:::\____\ 
 /:::/    /       /:::/\:::\   \:::\    \ |:::|    |     |:::|    |
/:::/____/       /:::/__\:::\   \:::\____\|:::|____|     |:::|    |
\:::\    \       \:::\   \:::\   \::/    / \:::\    \   /:::/    / 
 \:::\    \       \:::\   \:::\   \/____/   \:::\    \ /:::/    /  
  \:::\    \       \:::\   \:::\    \        \:::\    /:::/    /   
   \:::\    \       \:::\   \:::\____\        \:::\__/:::/    /    
    \:::\    \       \:::\   \::/    /         \::::::::/    /     
     \:::\    \       \:::\   \/____/           \::::::/    /      
      \:::\    \       \:::\    \                \::::/    /       
       \:::\____\       \:::\____\                \::/____/        
        \::/    /        \::/    /                 ~~              
         \/____/          \/____/                                  

`)