js技巧 console.log使用

很多時候，我們就用到console.log()來輸入一個信息，用了來調試，其實console對象有很多方法，今天針對一些常用的方法進行講解。

1. 輸出帶色彩的信息

   console.log('消息內容！'); //輸出普通信息
　　console.info('消息內容！'); //輸出提示信息
　　console.error('消息內容！');//輸出錯誤信息
　　console.warn('消息內容！'); //輸出警告信息

平時我們自己調試可以用console.log()，但是在某些時候，可以才catch裏面用console.log(err)來打印錯誤信息，也可以用console.warn()來輸出警告信息。

2. console.table，格式化表格
   console.table可以將一段同格式的數組轉換爲一個表格輸出在控制檯，方便只管的查看。

const tableArr = [
	{name:'jack',age:21,sex:'男'},
	{name:'joden',age:25,sex:'女'}
]

3. 統計代碼的執行時間

console.time('統計時間')
for(var i = 0; i < 999 ;i++){}
console.timeEnd('統計時間')

使用console.time和console.timeEnd的組合可以統計出代碼的執行時間，有利於我們分析代碼的優劣，從而選取更好的實現方式。

4. 分組輸出

   console.group('a組');
　　console.log('a1');
　　console.log('a2');
　　console.log('a3');
　　console.groupEnd();

某些時候我們的調試複雜的程序，需要大量的輸出判斷的時候，分組輸出就很有用了。

5. 輸出有樣式的立體文字
   我們打開知乎的控制檯，就可以看到下面這張圖片：
   
   我在網上找了幾種實現方式，給大家參考，我們先看一下console.log的文檔：
   
   打印3d文字：

console.log("%ctest"," text-shadow: 0 1px 0 #ccc,0 2px 0 #c9c9c9,0 3px 0 #bbb,0 4px 0 #b9b9b9,0 5px 0 #aaa,0 6px 1px rgba(0,0,0,.1),0 0 5px rgba(0,0,0,.1),0 1px 3px rgba(0,0,0,.3),0 3px 5px rgba(0,0,0,.2),0 5px 10px rgba(0,0,0,.25),0 10px 10px rgba(0,0,0,.2),0 20px 20px rgba(0,0,0,.15);font-size:5em")

想要更多更豐富，更靈活的立體文字，可以參照下面的網址的實現方式：
在線生成
在線生成

6. 其他函數
   對象以樹狀結構展現 console.dir;顯示某個節點的內容 console.dirxml(;斷變量是否是真 console.assert。

想看更多文章，可以關注我的個人公衆號：