Console高級用法總結(jié)

更新時間：2023年04月27日 10:05:55 作者：白哥學前端

Console 對象提供了瀏覽器控制臺調(diào)試的接口。在不同宿主環(huán)境上它的工作方式可能不一樣，但通常都會提供一套共性的功能，本文主要總結(jié)了Console的一些高級用法，感興趣的小伙伴可以參考一下

00 延伸科普

Console 對象所提供的 console.*(...) 這樣的方法，其實是宿主環(huán)境（比如：瀏覽器、NodeJS 等）提供的用于控制臺調(diào)試的，它并不是 JavaScript 正式語法的一部分。

它本質(zhì)上是一個 I/O 操作，但是又不是簡單意義上的宏任務(wù)，宿主環(huán)境的區(qū)別會導致 console.*(...) 方法有一定細微的差別，在某些條件下，某些瀏覽器并不會把傳入的內(nèi)容立即輸出。至于到底什么時候控制臺 I/O 會延遲，這是一個不確定的問題。

所以調(diào)試時，不要盲目相信 console 的輸出，特別是打印引用類型時。比如以下代碼：

const obj = { a: 1 }
console.log(obj)
obj.b = 2

輸出如下：

看著好像沒問題，但是這里的 {a: 1}，其實是 obj 對象的快照。把它展開，就會發(fā)現(xiàn)問題所在，在打印 obj 的那一刻，理應不存在屬性 b：

如果非要用 console.*(...) 方法做一些細致的調(diào)試，可以在打印引用對象或數(shù)組時進行序列化+反序列化，防止疑問產(chǎn)生：

const obj = { a: 1 }
console.log(JSON.parse(JSON.stringify(obj)))
obj.b = 2

01 不同級別的基礎(chǔ)信息打印

// 打印內(nèi)容的通用方法
console.log('普通信息')
// 打印一條資訊類說明信息
console.info('資訊類說明信息')
// 打印一條警告信息
console.warn('警告信息')
// 打印一條錯誤信息
console.error('錯誤信息')
// 打印一條 debug 級別的消息?？刂婆_配置為顯示調(diào)試輸出時才顯示該消息
console.debug('調(diào)試信息')

不同級別的信息在控制臺會被標記為不同的顏色，其中 log 和 info 表現(xiàn)相同。

02 列表型的數(shù)據(jù)打印成表格

console.table() 可以將列表型的數(shù)據(jù)打印成表格，這里的列表型數(shù)據(jù)指的是數(shù)組或者對象。

表格的第一列是 index。如果數(shù)據(jù) data 是一個數(shù)組，那么這一列的單元格的值就是數(shù)組的索引。如果數(shù)據(jù)是一個對象，那么它們的值就是各對象的屬性名稱。

語法：

console.table(data [, columns])

data 必須，且必須是一個數(shù)組或者是一個對象
columns 可選，需要顯示的列的名稱的數(shù)組。如果沒有 columns 參數(shù)，則會打印所有列。

點擊每列的頂部標簽，可以讓表格排序。

2.1 打印單一數(shù)據(jù)類型

打印一個由字符串組成的數(shù)組

console.table(['哈哈', '嘿嘿', '嘻嘻'])

打印一個屬性值是字符串的對象

function Person(firstName, lastName) {
  this.firstName = firstName
  this.lastName = lastName
}

const me = new Person('小錯', '王')

console.table(me)

2.2 打印復合的參數(shù)類型

如果需要打印的元素在一個數(shù)組中，或者需要打印的屬性在一個對象，并且他們本身就是一個數(shù)組或者對象，則將會把這個元素顯示在同一行，每個元素占一列。

打印一個二元數(shù)組

const people = [  ['張三', '李四'],
  ['張龍', '趙虎'],
  ['王二', '麻子']
]
console.table(people)

打印一個包含對象的數(shù)組

function Person(firstName, lastName) {
  this.firstName = firstName
  this.lastName = lastName
}

const zhangsan = new Person('三', '張')
const lisi = new Person('四', '李')
const wanger = new Person('二', '王')

console.table([zhangsan, lisi, wanger])

如果數(shù)組包含對象，則列標簽是對象的屬性名。

打印一個屬性名是對象的對象

function Person(firstName, lastName) {
  this.firstName = firstName
  this.lastName = lastName
}

const family = {}

family.mother = new Person('羊', '劉')
family.father = new Person('龍', '張')
family.daughter = new Person('三', '張')

console.table(family)

如果對象的屬性為對象，打印出來的 index 是外層對象的屬性名。

2.3 控制顯示的列

function Person(firstName, lastName) {
  this.firstName = firstName
  this.lastName = lastName
}

const liuyang = new Person('羊', '劉')
const zhanglong = new Person('龍', '張')
const zhangsan = new Person('三', '張')

const family = {}
family.mother = liuyang
family.father = zhanglong
family.daughter = zhangsan

console.table([liuyang, zhanglong, zhangsan], ['firstName'])
console.table(family, ['lastName'])

03 打印某個操作的時長

可以通過 console.time 啟動一個計時器來跟蹤某一個操作的占用時長。

語法：

console.time(timerName)

timerName 每一個計時器必須填寫的唯一的名字

通過 console.timeEnd 結(jié)束特定的計時器，并打印其從開始到結(jié)束所用的毫秒時間。

語法：

console.timeLog(timerName)

示例：

console.time('answer time')
alert('點擊繼續(xù)')
console.timeLog('answer time')
alert('做一堆其他的事情......')
console.timeEnd('answer time')

04 給打印編組

可以使用嵌套組來把一組關(guān)聯(lián)的打印合并。用 console.group() 可以創(chuàng)建新的嵌套塊，用 console.groupCollapsed() 創(chuàng)建默認折疊的塊。嵌套組需要通過 console.groupEnd() 閉合。

示例：

// 為了方便觀察，我用縮進表示了層級
console.log('A1')
console.group()
  console.log('B1')
  console.info('B2')
  console.group()
    console.warn('C1')
    console.warn('C2')
    console.groupCollapsed()
      console.error('D1')
      console.error('D2')
    console.groupEnd()
    console.warn('C3')
  console.groupEnd()
  console.debug('B3')
  console.info('B4')
console.groupEnd()
console.debug('A2')

05 堆棧跟蹤

通過 console.trace 可以追蹤函數(shù)的調(diào)用路徑。這么說起來很抽象，簡單來講就是，把 console.trace() 放在一個方法中，一旦 console.trace() 被調(diào)用了，那么就會輸出從一開始到 console.trace() 的所有方法的執(zhí)行路徑。

通過例子或許能很好的理解。

5.1 示例一：

function outer() {
  function inner() {
    console.trace()
  }
  inner()
}

outer()

由于是堆棧信息，所以得倒著看，執(zhí)行到 console.trace() 的時候，是調(diào)用了 outer 和 inner 這兩個方法。

5.2 示例二：

function add(a, b) {
  console.trace()
  return a + b
}
function add1(a, b) {
  return add(a, b)
}
function add2(a, b) {
  return add1(a, b)
}
function add3(a, b) {
  return add2(a, b)
}

const result = add3(1, 1)

同理，執(zhí)行到 console.trace() 的時候，是調(diào)用了 add1、 add2、add3 和 add 這四個方法。

console.trace() 有時候?qū)τ诮邮謩e人寫的復雜模塊的時候，還是挺有用的。

06 打印花里胡哨

6.1 樣式占位符

很多編程語言的打印方法，都有占位符這樣的東西。比如 C 語言的 printf("%d ", 10)，其中的 %d 表示十進制整型數(shù)據(jù)，這里輸出 10。

JavaScript 也有占位符，不過用的比較少。但是通過占位符可以實現(xiàn)一些花里胡哨的信息。

JavaScript 支持的占位符：

%s：字符串
%d：整數(shù)
%i：整數(shù)
%f：浮點數(shù)
%o：DOM 對象
%O：JavaScript 對象
%c：CSS 樣式

其中的 %c 是 JavaScript 特有的，可以標記從該 %c 開始后續(xù)行的樣式。

例如：

console.log(`歡迎加入我們的%c大家庭`, `font-size: 30px; font-weight: bold; color: #ef475d`)

也可以標記多個樣式，只需要 %c和樣式對應上。例如：

console.log(
  `歡迎加入我們的%c大家庭
%c啦啦啦
      `,
  `font-size: 30px; font-weight: bold; color: #ef475d`,
  `font-size: 24px; font-weight: bold; color: cornflowerblue`
)

學會了 %c 的用法，就能玩出很多花樣。

比如這樣：

console.log(`%c


                               %c FBI WARNING %c


%c        Federal Law provides severe civil and criminal penalties for
        the unauthorized reproduction,distribution, or exhibition of
         copyrighted motion pictures (Title 17, United States Code,
        Sections 501 and 508). The Federal Bureau of Investigation
         investigates allegations of criminal copyright infringement
                 (Title 17, United States Code, Section 506).



`,
'background: #000; font-size: 18px; font-family: monospace',
'background: #f33; font-size: 18px; font-family: monospace; color: #eee; text-shadow:0 0 1px #fff',
'background: #000; font-size: 18px; font-family: monospace',
'background: #000; font-size: 18px; font-family: monospace; color: #ddd; text-shadow:0 0 2px #fff'
)

6.2 ASCII Art

ASCII Art，是指用一串或一片字符，去構(gòu)成圖案。它是早期互聯(lián)網(wǎng)上，帶寬小、流量少、部分終端不能顯示圖片的背景下，產(chǎn)出一種表達形式。文字表情（顏文字）其實就是 ASCII Art 的一種。

聽起來比較抽象，直接上才藝：

文字表情（顏文字）

╮(￣▽ ￣)╭

 __   ___              _____            
 \ \ / (_)            / ____|           
  \ V / _  __ _  ___ | |    _   _  ___  
   > < | |/ _` |/ _ | |   | | | |/ _ \ 
  / . | | (_| | (_) | |___| |_| | (_) |
 /_/ __|__,_|___/ _______,_|___/

/**
 *
 *                             _ooOoo_
 *                            o8888888o
 *                            88" . "88
 *                            (| -_- |)
 *                            O\  =  /O
 *                         ____/`---'____
 *                       .'  \|     |//  `.
 *                      /  \|||  :  |||//  \
 *                     /  _||||| -:- |||||-  \
 *                     |   | \\  -  /// |   |
 *                     | _|  ''---/''  |   |
 *                     \  .-__  `-`  ___/-. /
 *                   ___`. .'  /--.--\  `. . __
 *                ."" '<  `.____<|>_/___.'  >'"".
 *               | | :  `- `.;`\ _ /`;.`/ - ` : | |
 *               \  \ `-.   _ __\ /__ _/   .-` /  /
 *          ======`-.____`-.________/___.-`____.-'======
 *                             `=---='
 *          ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
 *                     佛祖保佑        永無BUG
 *
 */

ASCII Art 這個概念或許你很陌生，但是以上的例子，你應該很熟悉。

以上就是Console高級用法總結(jié)的詳細內(nèi)容，更多關(guān)于Console用法的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: