console小结_喵巨人笔记

基本使用

常用的方法有：log、info、warn、error

console.log('hello')
console.info('信息')
console.warn('警告')
console.error('错误')

支持printf的占位符格式，支持的占位符有：字符（%s）、整数（%d、%i）、浮点数（%f）和对象（%o、%O）

console.log('名字: %s', 'wmm66')
console.log('%d年%d月%d日', 2011, 3, 26)
console.log('圆周率: %f', Math.PI)
const user = {
  name: 'wmm',
  age: 20
}
console.log('user: %o', user)   // 普通对象使用%o、%O没有区别
const footer = document.getElementById('footer')
console.log('footer: %o', footer)
console.log('footer: %O', footer)

使用 %c 占位符时，对应的后面的参数必须是 CSS 语句，用来对输出内容进行 CSS 渲染。
常见的输出方式有两种：文字样式、图片输出。

console.log('%c喵巨人笔记', 'font-size: 20px; color: green;')
console.log('%c ','background:url(http://www.wmm66.com/static/img/avatar.png) no-repeat;padding:0 110px;line-height: 220px')

/**
 * console 不能定义 img，因此用背景图片代替。
 * console 不支持 width 和 height，利用空格和 font-size 代替；还可以使用 padding 和 line-height 代替宽高。
 */

字符画打印大体步骤

使用在线工具生成字符画。比如mg2txt、Ascii generator

将生成的字符复制到编辑器（比如：VSCode、sublime）中，将每行开头的换行替换成\n。即保证没有换行

丢到console.log("")代码中即可

也可以添加结合%c做出更酷炫的效果

console.log('%c    ._ _ ._ _  /  / \n\\/\\/| | || | |(_)(_)', 'color: lightgreen')

表格显示

使用console.table()显示表格

const table = [
  {
    name: 'wmm',
    age: 18,
    sex: 'female',
    like: null,
  },
  {
    name: 'wmm66',
    age: 20,
    // sex: 'male',
    like: ['看书', '羽毛球']
  }
]
console.table(table)

信息分组

使用console.group()、console.groupEnd()对信息分组

console.group('第一组信息')
console.log('第一组第一条：我的姓名')
console.log('第一组第二条：喵巨人')
console.groupEnd()

console.group('第二组信息')
console.log('第二组第一条：我的年龄')
console.log('第二组第二条：%d', 18)
console.groupEnd()

console.log('end')

计时功能

使用console.time()、console.timeEnd()显示代码的运行时间

console.time('控制台计时器')
for (let i = 0; i < 10000; i++) {
  for (let j = 0; j < 10000; j++) {}       
}
console.timeEnd('控制台计时器')

// 输出：控制台计时器: 60.39501953125 ms

性能分析

使用console.profile()、console.profileEnd()分析程序某部分的运行时间

function All() {
  for (var i = 0; i < 10; i++) {
    funcA(1000)
  }　　　　
  funcB(10000)
}
 
function funcA(count) {　　　　
  for (var i = 0; i < count; i++) {}　　
}

function funcB(count) {　　　　
  for (var i = 0; i < count; i++) {}　　
}

console.profile('性能分析器')
All()
console.profileEnd()

被执行次数

console.count()统计代码被执行的次数

function myFunction() {
  console.count('myFunction 被执行的次数')
}
myFunction()       // myFunction 被执行的次数: 1
myFunction()       // myFunction 被执行的次数: 2
myFunction()       // myFunction 被执行的次数: 3

调用轨迹

console.trace()用来追踪函数的调用轨迹

/*函数是如何被调用的，在其中加入console.trace()方法就可以了*/
function add(a, b) {
  console.trace()
  return a + b
}
var x = add3(1,1)
function add3(a, b) { return add2(a, b) }
function add2(a, b) { return add1(a, b) }
function add1(a, b) { return add(a, b) }

断言

console.assert()用来判断一个表达式或变量是否为真。
如果结果为否，则在控制台输出一条相应信息，并且抛出一个异常。

const year = 2014
console.assert(year)    // 没有出错；不会有任何输出
console.assert(year == 2018)
console.assert(year == 2018, '出错辣')

const a = ''
const b = 0
const c = null
const d = undefined
const e = {}
console.assert(a, '--a')
console.assert(b, '--b')
console.assert(c, '--c')
console.assert(d, '--d')
console.assert(e, '--e')

console小结