1、列印console

1.1 使用console.table

使用console.table可以將一個陣列展開之後在控制檯輸出

let obj = [{
        key1: '12',
        key2: '12',
        key3: '12',
        key4: '12',
        key5: '12',
        key6: '12',
        key7: '12',
    },
        {
            key1: '12',
            key2: '12',
            key3: '12',
            key4: '12',
            key5: '12',
            key6: '12',
            key7: '12',
        }
    ];
    console.table(obj)
 

相比於console.log的需要層層開啟，console.table更加直觀

1.2 使用console.dir

console.dir可以用來解決這樣一個問題：
對於獲取到的dom元素，如果直接使用console.log輸出，會使這樣的一條記錄：

但是如果我們需要檢視這個dom元素的內部的一些屬性什麼的，可以使用console.dir輸出，結果是這樣的：

是一個可以展開的物件

1.3 輸出帶有樣式的內容

使用%c可以將其之後的內容帶樣式輸出：

console.log('this is %c text with style ','background:yellow;color:green')
 

顯示為：

2、使用debugger進入除錯模式

在程式中加入debugger，當程式執行到debugger這一步時，就會自動進入斷點除錯模式。

<script>
    let img=document.querySelector('.img');
    debugger;//進入斷點
    console.log('this is %c text with style ','background:yellow;color:green;font-size:30px');
</script>

頁面顯示：