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

成都創(chuàng)新互聯(lián)公司主營洛扎網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營網(wǎng)站建設(shè)方案,成都APP應(yīng)用開發(fā),洛扎h5小程序開發(fā)搭建,洛扎網(wǎng)站營銷推廣歡迎洛扎等地區(qū)企業(yè)咨詢

在這里小編建了一個(gè)前端學(xué)習(xí)交流扣扣群：132667127，我自己整理的最新的前端資料和高級開發(fā)教程，如果有想需要的，可以加群一起學(xué)習(xí)交流

基本打印信息console.log（）| info（）| debug（）| warn（）| error（）

控制臺日志/信息/調(diào)試/警告/錯(cuò)誤.

將CSS添加到控制臺消息

您的所有控制臺消息看起來都一樣嗎？好吧，從現(xiàn)在開始，情況會有所不同，讓您的日志看起來更吸引人，因?yàn)檫@對您而言最重要。

話不多說，上代碼與示例！

// 通過在文字前加上 ‘%c’, 然后在后方寫入css設(shè)置即可將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')

2| 0如何為日志消息中的特定單詞涂上顏色？就看這里~

  // 通過在文字前加上 ‘%c’, 然后在后方寫入css設(shè)置即可將console。log加上CSS樣式

 console.log('哪有人就哪有江湖 相持相扶%c--Tz張無忌',
　　　　　　'background-color:#222;font-size:24px;font-weight: 500;color:#bada55')

console.dir（）

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

    const zhangwuji = {
     name: '張無忌',
     age: 3,
     tel: 'https://www.cnblogs.com/zhaohongcheng/'
   }

　　console.log(zhangwuji)

控制臺中的HTML元素

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

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

 console.log(zhangwuji)

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)

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()

console.count（）

此函數(shù)記錄此特定調(diào)用count()已被調(diào)用的次數(shù)。該函數(shù)帶有一個(gè)可選參數(shù)label。

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

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

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

console.assert（）

當(dāng)您只想打印一些選定的日志時(shí)，這非常方便，例如，它將僅打印false參數(shù)。如果第一個(gè)參數(shù)為true，則完全不執(zhí)行任何操作。

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

console.time（）

console.time（）是一個(gè)專用于跟蹤操作所花費(fèi)時(shí)間的函數(shù)，它是跟蹤JavaScript執(zhí)行所花費(fèi)的微時(shí)間的更好方法。

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