01.console.log()調試

最常用的console.log()消息在瀏覽器中顯示消息外，還有許多其他方法可以使調試過程變得更加容易。讓我們通過示例逐一查看它們。

基本打印信息console.log()| info()| debug()| warn()| error()

將CSS添加到控制檯消息

您的所有控制檯消息看起來都一樣嗎？好吧，從現在開始，情況會有所不同，讓您的日誌看起來更吸引人，因爲這對您而言最重要，話不多說，上代碼與示例！

// 通過在文字前加上 ‘%c’, 然後在後方寫入css設置即可將console。log加上CSS樣式
console.log('%c這是示例的文字-Tz','color:pink;font-size:50px;font-weight: 500')
console.log('%c這是示例的文字-Tz','color:red;font-size:20px;font-weight: 600')
console.log('%c這是示例的文字-Tz','color:blue;font-size:12px;font-weight: 700')

如何爲日誌消息中的特定單詞塗上顏色？就看這裏

// 通過在文字前加上 ‘%c’, 然後在後方寫入css設置即可將console。log加上CSS樣式
console.log('哪有人就哪有江湖 相持相扶%c--Tz張無忌','background-color:#222;font-size:24px;font-weight: 500;color:#bada55')

常用指令介紹

1.console.dir()

打印指定對象的JSON表示形式。

const zhangwuji = {
	name: '張無忌',
	age: 3,
	tel: 'https://blog.csdn.net/xia9527'
}

console.log(zhangwuji)

2.控制檯中的HTML元素

就像檢查元素一樣，在控制檯中獲取HTML元素。

let zhangwuji = document.getElementsByTagName('body')[0]
console.log(zhangwuji)

3.console.table()

是否想以正確且易於理解的方式查看JSON？

    const bolg =[
      {
      name: '張無忌',
      age: 3,
      tel: 'https://www.cnblogs.com/zhaohongcheng/'
      },
      {
        name: '令狐沖',
        age: 12,
        tel: 'https://www.baidu.com'
      },
      {
        name: '掃地僧',
        age: 22,
        tel: 'https://www.didi.com'
      }
    ]
  console.table(bolg)

4.console.group()和console.groupEnd()

很有可能用控制檯將消息分組

// 利用console.group()和console.groupEnd()將console.log分成一組一組
console.group();
   console.log('Dream')
console.groupEnd()
console.group();
   console.log('5')
   console.log('2')
   console.log('1')
console.groupEnd()
console.group();
   console.log('1')
   console.log('3')
   console.log('1')
   console.log('4')
console.groupEnd()

5.console.count()

此函數記錄此特定調用count()已被調用的次數。該函數帶有一個可選參數label。

如果label提供了該函數，則該函數記錄該count()特定調用的次數label。

如果label省略，則函數記錄在此特定行count()上被調用的次數。

 for (let i = 0; i < 11; i++) {
   console.count();
 }

6.console.assert()

當您只想打印一些選定的日誌時，這非常方便，例如，它將僅打印false參數。如果第一個參數爲true，則完全不執行任何操作。

 const errorMsg = '不符合';
for (let number = 2; number <= 5; number += 1) {
   console.assert(number % 2 === 0, {number: number, errorMsg: errorMsg});
 }

7.console.time()

console.time()是一個專用於跟蹤操作所花費時間的函數，它是跟蹤JavaScript執行所花費的微時間的更好方法。

console.time("This");
  let total = 0;
  for (let j = 0; j < 10000; j++) {
    total += j
  }
console.log("Result", total);
console.timeEnd("This");