文章目錄
1. 序
在編寫代碼時,我們常常用console.log()
的方式將信息在控制檯中打印出來以幫助我們進行前端調試。一般情況下,我們打印普通值都沒有問題,但在打印對象類型時,我們就需要注意點了,要不然可能會出現不符合期望的結果。
2. console.log()輸出對象屬性缺失
- 首先,定義了一個
cat對象
,其擁有name, age, color, birthday
四個屬性。 - 接着,我們又定義了一個函數
test
,它接收一個對象作爲參數。調用test函數時,我們想知道傳入test函數的參數是怎樣的,會先調用console.log(obj)
將傳入的對象打印出來,最後在函數內的某處刪除傳入對象的name
屬性。
那麼,此時將cat
對象作爲參數調用test
函數,控制檯打印出來的信息將會是什麼呢?會是我們預想的傳入時參數的樣子嗎?
const cat = {
name: '喵喵',
age: '2',
color: 'white',
birthday: '1月1號'
}
function test(obj) {
console.log(obj)
//這裏有段很長的代碼...
delete obj.name
}
test(cat)
控制檯輸出信息:
咋一看,沒問題,輸出的結果的確是我們傳入時的樣子。但實際中,傳入的對象可能具有很多屬性,那麼我們想要看完整的信息就必須將輸出結果展開。如下:
展開的信息中,我們可以看到結果少了name
屬性,細心的小夥伴可以發現還多了一個感嘆號的標誌(鼠標懸浮的文字:Value below was evaluated just now.)。咦,奇怪了,我們不是在test函數內的第一行代碼就輸出參數的信息的嗎,怎麼會少了name
屬性?
其實感嘆號的內容已經說明了,我們展開的信息其實是剛剛獲取到的結果,也就是代碼執行後的結果,test函數中有一段delete obj.name
的代碼,執行完後,obj對象當然就沒有name
屬性啦。在複雜的項目中,對象屬性會很多,代碼中的不知哪一處也可能會刪除了對象的某些屬性,這時我們打印出來的結果可能就會跟傳入時的不一樣,這種情況下我們可能就會一頭霧水了。那麼如何獲取正確的結果呢?
3. 獲取正確的結果
由於展開console.log()
的結果並不是我們代碼所處位置那個時間點的對象的拷貝,故我們想要在代碼執行到那個位置時的那個時間點對應的對象狀態,只要在那時輸出對象的副本即可。
3.1 方法1:對象展開
const cat = {
name: '喵喵',
age: '2',
color: 'white',
birthday: '1月1號'
}
function test(obj) {
console.log({...obj}) //使用ES6的對象展開符操作,獲取到obj的副本。
//這裏有段很長的代碼...
delete obj.name
}
test(cat)
這時,我們得到的就是console.log()
執行時間點時obj的狀態啦。
3.2 方法2: JSON.stringfy()看字符串
const cat = {
name: '喵喵',
age: '2',
color: 'white',
birthday: '1月1號'
}
function test(obj) {
console.log(JSON.stringify(obj)) //調用JSON.stringify()方法將對象轉化爲字符串
//這裏有段很長的代碼...
delete obj.name
}
test(cat)
同樣,此時我們也可以得到代碼運行時間點時的obj對象狀態。
總結: 以上兩種方法都可以獲取代碼運行時的對象狀態,但是比較推薦第一種方法,因爲當內容非常多時,第一種方法可以展開數據,有利於我們更快捷清晰地獲取目標信息。
4. 補充console的其他一些用法
這部分內容參考自:九個Console命令,讓js調試更簡單。以下圖片都爲chrome瀏覽器的結果。
4.1 顯示信息的命令
console.log('hello');
console.info('信息');
console.error('錯誤');
console.warn('警告');
結果:
4.2 查看對象的信息console.dir()
let info = {
blog: 'https://chen-cong.blog.csdn.net/',
name: '碼飛_CC',
message: '知其然,還要知其所以然',
say: () => {
console.log('hello')
}
};
console.dir(info)
結果:
4.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);}
結果:
4.4 計時功能
console.time('控制檯計時器一')
for (let i = 0; i < 1000; i++) {
for (let j = 0; j < 1000; j++) {
let x = Math.sqrt(j**2 + i**2)
}
}
console.timeEnd('控制檯計時器一')
結果: