靈活使用console讓js調(diào)試更簡(jiǎn)單的方法步驟

Web開發(fā)最常用的高度就是 console.log ，雖然 console.log 占有一席之地，但很多人并沒有意識(shí)到 console 本身除了基本 log 方法之外還有很多其他方法。 適當(dāng)使用這些方法可以使調(diào)試更容易，更快速，更直觀。

console.log()

在console.log 中有很多人們意想不到的功能。雖然大多數(shù)人使用 console.log(object) 來查看對(duì)象，但是你也可以使用 console.log(object, otherObject, string)，它會(huì)把它們都整齊地記錄下來，偶爾也會(huì)很方便。

不僅如此，還有另一種格式化的： console.log(msg, values)，這很像 C 或 PHP 中的sprintf。

console.log('I like %s but I do not like %s.', 'Skittles', 'pus');

會(huì)像你預(yù)期的那樣輸出：

> I like Skittles but I do not like pus.

常見的占位符 %o (這是字母o，不是0)，它接受對(duì)象，%s 接受字符串，%d 表示小數(shù)或整數(shù)。

另一個(gè)有趣的是 %c，這可能與你所想不太相同，它實(shí)際上是CSS值的占位符。使用%c占位符時(shí)，對(duì)應(yīng)的后面的參數(shù)必須是CSS語句，用來對(duì)輸出內(nèi)容進(jìn)行CSS渲染。常見的輸出方式有兩種：文字樣式、圖片輸出。

console.log('I am a %cbutton', 'color: white; background-color: orange; padding: 2px 5px; border-radius: 2px');

它并不優(yōu)雅，也不是特別有用。當(dāng)然，這并不是一個(gè)真正的按鈕。

它有用嗎? 恩恩恩。

console.dir()

在大多數(shù)情況下，console.dir() 的函數(shù)非常類似于 log()，盡管它看起來略有不同。

下拉小箭頭將顯示與上面相同的對(duì)象詳細(xì)信息，這也可以從console.log 版本中看到。當(dāng)你查看元素的結(jié)構(gòu)時(shí)候，你會(huì)發(fā)現(xiàn)它們之間的差異更大，也更有趣。

let element = document.getElementById('2x-container');

使用 console.log 查看：

打開了一些元素，這清楚地顯示了 DOM，我們可以在其中導(dǎo)航。但是console.dir(element)給出了更加方便查看 DOM 結(jié)構(gòu)的輸出：

這是一種更客觀地看待元素的方式。有時(shí)候，這可能是您真正想要的，更像是檢查元素。

console.warn()

可能是最明顯的直接替換 log()，你可以以完全相同的方式使用 console.warn()。 唯一真正的區(qū)別是輸出字的顏色是黃色的。 具體來說，輸出處于警告級(jí)別而不是信息級(jí)別，因此瀏覽器將稍微區(qū)別對(duì)待它。 這具有使其在雜亂輸出中更明顯的效果。

不過，還有一個(gè)更大的優(yōu)勢(shì)，因?yàn)檩敵鍪蔷娑皇切畔ⅲ阅憧梢赃^濾掉所有console.log并僅保留console.warn。 這對(duì)于偶爾會(huì)在瀏覽器中輸出大量無用廢話的應(yīng)用程序尤其有用。 清除一些無用的信息可以讓你更輕松地看到你想要的輸出。

console.table()

令人驚訝的是，這并不是更為人所知，但是 console.table() 函數(shù)旨在以一種比僅僅轉(zhuǎn)出原始對(duì)象數(shù)組更整潔的方式顯示表格數(shù)據(jù)。

例如，這里有一個(gè)數(shù)據(jù)列表。

const data = [{
 id: "7cb1-e041b126-f3b8",
 seller: "WAL0412",
 buyer: "WAL3023",
 price: 203450,
 time: 1539688433
},
{
 id: "1d4c-31f8f14b-1571",
 seller: "WAL0452",
 buyer: "WAL3023",
 price: 348299,
 time: 1539688433
},
{
 id: "b12c-b3adf58f-809f",
 seller: "WAL0012",
 buyer: "WAL2025",
 price: 59240,
 time: 1539688433
}];

如果我們使用 console.log 來輸出上面的內(nèi)容，我們會(huì)得到一些非常無用的輸出:

▶ (3) [{…}, {…}, {…}]

點(diǎn)擊這個(gè)小箭頭可以展開看到對(duì)象的內(nèi)容，但是，它并不是我們想要的“一目了然”。

但是 console.table(data) 的輸出要有用得多。

第二個(gè)可選參數(shù)是所需列的列表。顯然，所有列都是默認(rèn)值，但我們也可以這樣做:

> console.table(data, ["id", "price"]);

這里要注意的是這是亂序的 - 最右邊的列標(biāo)題上的箭頭顯示了原因。 我點(diǎn)擊該列進(jìn)行排序。 找到列的最大或最小，或者只是對(duì)數(shù)據(jù)進(jìn)行不同的查看非常方便。 順便說一句，該功能與僅顯示一些列無關(guān)，它總是可用的。

console.table() 只能處理最多1000行，因此它可能不適合所有數(shù)據(jù)集。

console.assert()

assert() 與 log() 是相同的函數(shù)，assert()是對(duì)輸入的表達(dá)式進(jìn)行斷言，只有表達(dá)式為false時(shí)，才輸出相應(yīng)的信息到控制臺(tái)，示例如下：

var arr = [1, 2, 3];
console.assert(arr.length === 4);

有時(shí)我們需要更復(fù)雜的條件句。例如，我們已經(jīng)看到了用戶 WAL0412 的數(shù)據(jù)問題，并希望僅顯示來自這些數(shù)據(jù)的事務(wù)，這是直觀的解決方案。

console.assert(tx.buyer === 'WAL0412', tx);

這看起來不錯(cuò)，但行不通。記住，條件必須為false，斷言才會(huì)執(zhí)行，更改如下：

console.assert(tx.buyer !== 'WAL0412', tx);

與其中一些類似，console.assert() 并不總是特別有用。但在特定的情況下，它可能是一個(gè)優(yōu)雅的解決方案。

console.count()

另一個(gè)具有特殊用途的計(jì)數(shù)器，count只是作為一個(gè)計(jì)數(shù)器，或者作為一個(gè)命名計(jì)數(shù)器，可以統(tǒng)計(jì)代碼被執(zhí)行的次數(shù)。

for(let i = 0; i < 10000; i++) {
 if(i % 2) {
  console.count('odds');
 }
 if(!(i % 5)) {
  console.count('multiplesOfFive');
 }
 if(isPrime(i)) {
  console.count('prime');
 }
}

這不是有用的代碼，而且有點(diǎn)抽象。這邊也不打算演示 isPrime 函數(shù)，假設(shè)它是成立的。

執(zhí)行后我們會(huì)得到一個(gè)列表：

odds: 1
odds: 2
prime: 1
odds: 3
multiplesOfFive: 1
prime: 2
odds: 4
prime: 3
odds: 5
multiplesOfFive: 2
...

還有一個(gè)相關(guān)的 console.countReset()，可以使用它重置計(jì)數(shù)器。

console.trace()

trace() 在簡(jiǎn)單的數(shù)據(jù)中很難演示。當(dāng)您試圖在類或庫(kù)中找出是哪個(gè)實(shí)際調(diào)用者導(dǎo)致了這個(gè)問題時(shí)，它的優(yōu)勢(shì)就顯現(xiàn)出來了。

例如，可能有 12 個(gè)不同的組件調(diào)用一個(gè)服務(wù)，但是其中一個(gè)組件沒有正確地設(shè)置依賴項(xiàng)。

export default class CupcakeService {
  
 constructor(dataLib) {
  this.dataLib = dataLib;
  if(typeof dataLib !== 'object') {
   console.log(dataLib);
   console.trace();
  }
 }
 ...
}

這里使用 console.log() 僅告訴我們傳遞數(shù)據(jù)dataLib是什么 ，而沒有具體的傳遞的路徑。不過，console.trace() 會(huì)非常清楚地告訴我們問題出在 Dashboard.js，我們可以看到是 new CupcakeService(false) 導(dǎo)致錯(cuò)誤。

console.time()

console.time() 是一個(gè)用于跟蹤操作時(shí)間的專用函數(shù)，它是跟蹤 JavaScript執(zhí)行時(shí)間的好方法。

function slowFunction(number) {
 var functionTimerStart = new Date().getTime();
 // something slow or complex with the numbers. 
 // Factorials, or whatever.
 var functionTime = new Date().getTime() - functionTimerStart;
 console.log(`Function time: ${ functionTime }`);
}
var start = new Date().getTime();

for (i = 0; i < 100000; ++i) {
 slowFunction(i);
}

var time = new Date().getTime() - start;
console.log(`Execution time: ${ time }`);

這是一種老派的做法，我們使用 console.time() 來簡(jiǎn)化以上代碼。

const slowFunction = number => {
 console.time('slowFunction');
 // something slow or complex with the numbers. 
 // Factorials, or whatever.
 console.timeEnd('slowFunction');
}
console.time();

for (i = 0; i < 100000; ++i) {
 slowFunction(i);
}
console.timeEnd();

我們現(xiàn)在不再需要做任何計(jì)算或設(shè)置臨時(shí)變量。

console.group()

// this is the global scope
let number = 1;
console.group('OutsideLoop');
console.log(number);
console.group('Loop');
for (let i = 0; i < 5; i++) {
 number = i + number;
 console.log(number);
}
console.groupEnd();
console.log(number);
console.groupEnd();
console.log('All done now');

輸出如下：

并不是很有用，但是您可以看到其中一些是如何組合的。

class MyClass {
 constructor(dataAccess) {
  console.group('Constructor');
  console.log('Constructor executed');
  console.assert(typeof dataAccess === 'object', 
   'Potentially incorrect dataAccess object');
  this.initializeEvents();
  console.groupEnd();
 }
 initializeEvents() {
  console.group('events');
  console.log('Initialising events');
  console.groupEnd();
 }
}
let myClass = new MyClass(false);

這是很多工作和很多調(diào)試信息的代碼，可能不是那么有用。 但它仍然是一個(gè)有趣的想法，這樣寫使你的日志記錄更加清晰。

選擇DOM元素

如果熟悉jQuery，就會(huì)知道 $(‘.class') 和 $(‘#id') 選擇器有多么重要。它們根據(jù)與之關(guān)聯(lián)的類或 ID 選擇 DOM 元素。

但是當(dāng)你沒有引用 jQuery時(shí)，你仍然可以在谷歌開發(fā)控制臺(tái)中進(jìn)行同樣的操作。

$(‘tagName') $(‘.class') $(‘#id') and $(‘.class #id') 等效于document.querySelector(‘ ‘)，這將返回 DOM 中與選擇器匹配的第一個(gè)元素。

可以使用 \$\$(tagName) 或 \$\$(.class), 注意雙元符號(hào)，根據(jù)特定的選擇器選擇DOM的所有元素。這也將它們放入數(shù)組中，你也可以通過指定數(shù)組中該元素的位置來從中選擇特定的元素。

例如，$$(‘.className') 獲取具有類 className 的所有元素，而\$\$(‘.className')[0]和 \$\$(‘.className')[1]獲取到分別是第一個(gè)和第二個(gè)元素。

將瀏覽器轉(zhuǎn)換為編輯器

你有多少次想知道你是否可以在瀏覽器中編輯一些文本？ 答案是肯定的，你可以將瀏覽器轉(zhuǎn)換為文本編輯器。 你可以在 DOM 中的任何位置添加文本和從中刪除文本。

你不再需要檢查元素并編輯HTML。相反，進(jìn)入開發(fā)人員控制臺(tái)并輸入以下內(nèi)容:

document.body.contentEditable=true

這將使內(nèi)容可編輯。現(xiàn)在，你幾乎可以編輯DOM中的任何內(nèi)容。

查找與DOM中的元素關(guān)聯(lián)的事件

調(diào)試時(shí)，需要查找 DOM 中某個(gè)元素的事件偵聽器感時(shí)，谷歌控制臺(tái)了 getEventListeners使找到這些事件更加容易且直觀。

getEventListeners($(‘selector')) 返回一個(gè)對(duì)象數(shù)組，其中包含綁定到該元素的所有事件。你可以展開對(duì)象來查看事件:

要找到特定事件的偵聽器，可以這樣做:

getEventListeners($(‘selector')).eventName[0].listener 

這將顯示與特定事件關(guān)聯(lián)的偵聽器。這里 eventName[0] 是一個(gè)數(shù)組，它列出了特定事件的所有事件。例如:

getEventListeners($(‘firstName')).click[0].listener 

將顯示與 ID 為 ‘firstName' 的元素的單擊事件關(guān)聯(lián)的偵聽器。

監(jiān)控事件

如果希望在執(zhí)行綁定到 DOM 中特定元素的事件時(shí)監(jiān)視它們，也可以在控制臺(tái)中這樣做。你可以使用不同的命令來監(jiān)控其中的一些或所有事件:

• monitorEvents($(‘selector')) 將監(jiān)視與選擇器的元素關(guān)聯(lián)的所有事件，然后在它們被觸發(fā)時(shí)將它們打印到控制臺(tái)。例如，monitore($(#firstName)) 將打印 ID 為 firstName元素的所有事件。
• monitorEvents($(‘selector'),'eventName') 將打印與元素綁定的特定事件。 你可以將事件名稱作為參數(shù)傳遞給函數(shù)。 這將僅記錄綁定到特定元素的特定事件。 例如，monitorEvents($(‘#firstName'),'click') 將打印綁定到ID為'firstName'的元素的所有 click 事件。
• monitore($(selector)，[eventName1, eventName3'， .])將根據(jù)您自己的需求記錄多個(gè)事件。與其傳遞單個(gè)事件名作為參數(shù)，不如傳遞包含所有事件的字符串?dāng)?shù)組。例如monitore($(#firstName)，[click, focus])將記錄與ID firstName元素綁定的 click事件和focus事件。
• unmonitorevent ($(selector)):這將停止監(jiān)視和打印控制臺(tái)中的事件。

檢查 DOM 中的一個(gè)元素

你可以直接從控制臺(tái)檢查一個(gè)元素:

• inspect($(‘selector')) 將檢查與選擇器匹配的元素，并轉(zhuǎn)到 Chrome Developer Tools中的 Elements 選項(xiàng)卡。 例如， inspect($(‘#firstName')) 將檢查 ID為'firstName' 的元素，spect($(‘a(chǎn)')[3]) 將檢查 DOM 中的第 4 個(gè) a 元素。
• $0, $1, $2 等可以幫助你獲取最近檢查過的元素。 例如，$0 表示最后檢查的 DOM 元素，而$1 倒數(shù)第二個(gè)檢查的 DOM 元素。

檢索最后一個(gè)結(jié)果的值

你可以將控制臺(tái)用作計(jì)算器。當(dāng)你這樣做的時(shí)候，你可能需要用第二個(gè)來跟蹤一個(gè)計(jì)算。以下是如何從內(nèi)存中檢索先前計(jì)算的結(jié)果:

$_

過程如下：

2+3+4
9 //- The Answer of the SUM is 9

$_
9 // Gives the last Result

$_ * $_
81 // As the last Result was 9

Math.sqrt($_)
9 // As the last Result was 81

$_
9 // As the Last Result is 9

清除控制臺(tái)和內(nèi)存

如果你想清除控制臺(tái)及其內(nèi)存，輸入如下：

clear()

代碼部署后可能存在的BUG沒法實(shí)時(shí)知道，事后為了解決這些BUG，花了大量的時(shí)間進(jìn)行l(wèi)og 調(diào)試，這邊順便給大家推薦一個(gè)好用的BUG監(jiān)控工具 Fundebug。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。