Console高級用法總結(jié)
00 延伸科普
Console 對象所提供的 console.*(...) 這樣的方法，其實是宿主環(huán)境（比如：瀏覽器、NodeJS 等）提供的用于控制臺調(diào)試的，它并不是 JavaScript 正式語法的一部分。
它本質(zhì)上是一個 I/O 操作，但是又不是簡單意義上的宏任務(wù)，宿主環(huán)境的區(qū)別會導(dǎo)致 console.*(...) 方法有一定細(xì)微的差別，在某些條件下，某些瀏覽器并不會把傳入的內(nèi)容立即輸出。至于到底什么時候控制臺 I/O 會延遲，這是一個不確定的問題。
所以調(diào)試時，不要盲目相信 console 的輸出，特別是打印引用類型時。比如以下代碼：
const obj = { a: 1 }
console.log(obj)
obj.b = 2輸出如下：
看著好像沒問題，但是這里的 {a: 1}，其實是 obj 對象的快照。把它展開，就會發(fā)現(xiàn)問題所在，在打印 obj 的那一刻，理應(yīng)不存在屬性 b：
如果非要用 console.*(...) 方法做一些細(xì)致的調(diào)試，可以在打印引用對象或數(shù)組時進行序列化+反序列化，防止疑問產(chǎn)生：
const obj = { a: 1 }
console.log(JSON.parse(JSON.stringify(obj)))
obj.b = 201 不同級別的基礎(chǔ)信息打印
// 打印內(nèi)容的通用方法
console.log('普通信息')
// 打印一條資訊類說明信息
console.info('資訊類說明信息')
// 打印一條警告信息
console.warn('警告信息')
// 打印一條錯誤信息
console.error('錯誤信息')
// 打印一條 debug 級別的消息?？刂婆_配置為顯示調(diào)試輸出時才顯示該消息
console.debug('調(diào)試信息')不同級別的信息在控制臺會被標(biā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ù)，則會打印所有列。
點擊每列的頂部標(biāo)簽，可以讓表格排序。
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 打印復(fù)合的參數(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ù)組包含對象，則列標(biāo)簽是對象的屬性名。
- 打印一個屬性名是對象的對象
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)建默認(rèn)折疊的塊。嵌套組需要通過 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人寫的復(fù)雜模塊的時候，還是挺有用的。
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 特有的，可以標(biāo)記從該 %c 開始后續(xù)行的樣式。
例如：
console.log(`歡迎加入我們的%c大家庭`, `font-size: 30px; font-weight: bold; color: #ef475d`)
也可以標(biāo)記多個樣式，只需要 %c和樣式對應(yīng)上。例如：
console.log(
`歡迎加入我們的%c大家庭
%c啦啦啦
`,
`font-size: 30px; font-weight: bold; color: #ef475d`,
`font-size: 24px; font-weight: bold; color: cornflowerblue`
)
學(xué)會了 %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 這個概念或許你很陌生，但是以上的例子，你應(yīng)該很熟悉。
以上就是Console高級用法總結(jié)的詳細(xì)內(nèi)容，更多關(guān)于Console用法的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
這篇文章主要介紹了vue的provide和inject使用方法及其原理,本文通過源碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-10-10
這篇文章主要介紹了vue中的H5移動端項目?真機測試配置方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
在項目開發(fā)中有時候需求需要手動實現(xiàn)橫屏功能,所以這篇文章主要為大家詳細(xì)介紹了如何使用Vue實現(xiàn)手機橫屏功能,需要的小伙伴可以參考一下2024-03-03
在Vue3中使用provide和inject進行依賴注入的代碼詳解
在現(xiàn)代前端開發(fā)中,Vue.js已經(jīng)成為了非常流行的框架之一,它提供了極大的靈活性和可維護性,今天我們要探討的是Vue?3中的provide和inject功能,這是一種用于在組件樹中進行依賴注入的方法,需要的朋友可以參考下2024-06-06
這篇文章主要介紹了推薦VSCode 上特別好用的 Vue 插件之vetur，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
日常開發(fā)中我們可能碰到流程圖的需求,實現(xiàn)流程圖的庫有很多,如果我們想要實現(xiàn)一個簡便的流程圖可以使用konva庫來實現(xiàn),下面我們就來看一下具體的實現(xiàn)過程,需要的朋友可以參考下2023-08-08
這篇文章主要介紹了vue項目雙滑塊組件使用方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07
這篇文章主要給大家介紹了關(guān)于Vue2.x安裝并使用SCSS的相關(guān)資料,以及如何在vue 2.x中全局引用公共scss文件,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-03-03
這篇文章主要介紹了vue 實現(xiàn)基礎(chǔ)組件的自動化全局注冊的方法，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2020-12-12
在現(xiàn)代Web開發(fā)中,前端與后端的數(shù)據(jù)交互至關(guān)重要,Vue.js作為一款流行的前端框架,結(jié)合Axios庫能夠高效地實現(xiàn)HTTP請求與數(shù)據(jù)處理,本文將詳細(xì)講解如何在Vue 3中使用Axios,并通過實際案例展示其用法,需要的朋友可以參考下2024-12-12