Chrome DevTools 面板之console全面解析

 

1.首先看一下 console 對象下面都有哪些方法:

 

 

 

清空控制台：console.clear() 

 

console.log('普通信息')
console.info('提示性信息')
console.error('錯誤信息')
console.warn('警示信息')

日常用的比較多的就是這幾個了，其中 log 和 info，印象中在 2016 年之前老用 info 打印，還是有區別的，info 輸出的內容前面是有一個藍色背景的小圈, 大概跟這個差不多: i，后來 chrome 更新就沒了(IE 還是可以看出差別的)

 

使用占位符

// 支持逗號分隔參數，不需要每個參數都單獨打印
console.log(1, '2', +'3')
// 占位符
// %s 
console.log('今晚%s 老虎', '打', '？？？')
// %c 
console.log('今晚%s%c 老虎', '打', 'color: red', '？？？')
// 帶有占位符的參數之后的若干參數屬於占位符的配置參數

其余的占位符列表還有：

占位符	功能
%s	字符串
%d	整數
%i	整數
%f	浮點數
%o	對象的鏈接
%c	css 格式字符串

console.time(), timeEnd()

time 和 timeEnd 一般放在一起用，傳入一個參數用來標識起始位置用於統計時間:

console.time('t')
Array(900000).fill({}).forEach((v, index) => v.index = index)
console.timeEnd('t')
// t: 28.18603515625ms

會打印出中間代碼的執行時間

console.count()

顧名思義。。計數,可以用來統計某個函數的執行次數，也可以傳入一個參數，並且根據傳入的參數分組統計調用的次數

function foo(type = '') {
  type ? console.count(type) : console.count()
  return 'type：' + type
}

foo('A') //A: 1
foo('B') //B: 1
foo()    //default: 1
foo()    //default: 2
foo()    //default: 3
foo('A') //A: 2

console.trace()

用於追蹤代碼的調用棧，不用專門斷點去看了

console.trace()
function foo() {
  console.trace()
}
foo()

console.table()

console.table()方法可以將復合類型的數據轉為表格顯示

var arr = [
  { name: '梅西', qq: 10 },
  { name: 'C 羅', qq: 7 },
  { name: '內馬爾', qq: 11 },
]
console.table(arr)

console.dir()

按便於閱讀和打印的形式將對象打印

var obj = {
  name: 'justwe7',
  age: 26,
  fn: function () {
    alert('justwe7')
  },
}
console.log(obj)
console.dir(obj)

打印 DOM 對象區別：

console.assert()

斷言，用來進行條件判斷。當表達式為 false 時，則顯示錯誤信息，不會中斷程序執行。

可以用於提示用戶，內部狀態不正確（把那個說假話的揪出來）

var val = 1
console.assert(val === 1, '等於 1')
console.assert(val !== 1, '不等於 1')
console.log('代碼往下執行呢啊')

console.group(), groupEnd()

分組輸出信息，可以用鼠標折疊/展開

console.group('分組 1')
console.log('分組 1-1111')
console.log('分組 1-2222')
console.log('分組 1-3333')
console.groupEnd()
console.group('分組 2')
console.log('分組 2-1111')
console.log('分組 2-2222')
console.log('分組 2-3333')
console.groupEnd()

轉載自：https://juejin.im/post/5f1542e16fb9a07e6f7b80fe