小編推薦： Fundebug提供JS、微信小程序、微信小游戲，Node.js和Java錯誤監(jiān)控。真的是一個很好用的錯誤監(jiān)控服務(wù)，眾多大佬公司都在使用猜嘱。
Fundebug經(jīng)授權(quán)轉(zhuǎn)載益楼，版權(quán)歸原作者所有陪竿。
Web 開發(fā)最常用的就是 console.log ，雖然 console.log 占有一席之地，但很多人并沒有意識到 console 本身除了基本 log 方法之外還有很多其他方法。 適當(dāng)使用這些方法可以使調(diào)試更容易，更快速，更直觀。
console.log()
在console.log 中有很多人們意想不到的功能。雖然大多數(shù)人使用 console.log(object) 來查看對象，但是你也可以使用 console.log(object, otherObject, string)梢褐，它會把它們都整齊地記錄下來鱼响，偶爾也會很方便。
不僅如此，還有另一種格式化的： console.log(msg, values)，這很像 C 或 PHP 中的sprintf尊勿。
console.log("I like %s but I do not like %s.", "Skittles", "pus");
會像你預(yù)期的那樣輸出：
> I like Skittles but I do not like pus.
常見的占位符 %o (這是字母 o吻氧，不是 0)，它接受對象草慧，%s 接受字符串舔示，%d 表示小數(shù)或整數(shù)。
另一個有趣的是 %c，這可能與你所想不太相同释涛，它實際上是 CSS 值的占位符扑浸。使用%c 占位符時晚唇，對應(yīng)的后面的參數(shù)必須是 CSS 語句，用來對輸出內(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)然唉韭，這并不是一個真正的按鈕。
它有用嗎? 恩恩恩。
console.dir()
在大多數(shù)情況下，console.dir() 的函數(shù)非常類似于 log()涮因，盡管它看起來略有不同。
下拉小箭頭將顯示與上面相同的對象詳細(xì)信息，這也可以從console.log 版本中看到。當(dāng)你查看元素的結(jié)構(gòu)時候忌傻，你會發(fā)現(xiàn)它們之間的差異更大牢酵，也更有趣预伺。
let element = document.getElementById("2x-container");
使用 console.log 查看：
打開了一些元素，這清楚地顯示了 DOM，我們可以在其中導(dǎo)航雄右。但是console.dir(element)給出了更加方便查看 DOM 結(jié)構(gòu)的輸出：
這是一種更客觀地看待元素的方式。有時候，這可能是您真正想要的辫愉，更像是檢查元素沧踏。
代碼部署后可能存在的 BUG 沒法實時知道，事后為了解決這些 BUG魂角，花了大量的時間進(jìn)行 log 調(diào)試殴边，這邊順便給大家推薦一個好用的 BUG 監(jiān)控工具 Fundebug戒职。
console.warn()
可能是最明顯的直接替換 log()芒篷，你可以以完全相同的方式使用 console.warn()。 唯一真正的區(qū)別是輸出字的顏色是黃色的。 具體來說，輸出處于警告級別而不是信息級別，因此瀏覽器將稍微區(qū)別對待它。 這具有使其在雜亂輸出中更明顯的效果。
不過，還有一個更大的優(yōu)勢，因為輸出是警告而不是信息，所以你可以過濾掉所有console.log并僅保留console.warn。 這對于偶爾會在瀏覽器中輸出大量無用廢話的應(yīng)用程序尤其有用嗅绰。 清除一些無用的信息可以讓你更輕松地看到你想要的輸出肌括。
console.table()
令人驚訝的是紧索，這并不是更為人所知济舆，但是 console.table() 函數(shù)旨在以一種比僅僅轉(zhuǎn)出原始對象數(shù)組更整潔的方式顯示表格數(shù)據(jù)丐吓。
例如勘伺，這里有一個數(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)容，我們會得到一些非常無用的輸出:
? (3) [{…}, {…}, {…}]
點(diǎn)擊這個小箭頭可以展開看到對象的內(nèi)容娇昙，但是尺迂，它并不是我們想要的“一目了然”。
但是 console.table(data) 的輸出要有用得多冒掌。
第二個可選參數(shù)是所需列的列表噪裕。顯然，所有列都是默認(rèn)值股毫，但我們也可以這樣做:
> console.table(data, ["id", "price"]);
這里要注意的是這是亂序的 - 最右邊的列標(biāo)題上的箭頭顯示了原因膳音。 我點(diǎn)擊該列進(jìn)行排序。 找到列的最大或最小铃诬，或者只是對數(shù)據(jù)進(jìn)行不同的查看非常方便祭陷。 順便說一句，該功能與僅顯示一些列無關(guān)趣席，它總是可用的兵志。
console.table() 只能處理最多 1000 行，因此它可能不適合所有數(shù)據(jù)集宣肚。
console.assert()
assert() 與 log() 是相同的函數(shù)想罕，assert()是對輸入的表達(dá)式進(jìn)行斷言，只有表達(dá)式為 false 時霉涨，才輸出相應(yīng)的信息到控制臺按价，示例如下：
var arr = [1, 2, 3];
console.assert(arr.length === 4);
有時我們需要更復(fù)雜的條件句。例如笙瑟，我們已經(jīng)看到了用戶 WAL0412 的數(shù)據(jù)問題楼镐，并希望僅顯示來自這些數(shù)據(jù)的事務(wù)，這是直觀的解決方案往枷。
console.assert(tx.buyer === "WAL0412", tx);
這看起來不錯框产，但行不通。記住错洁，條件必須為false茅信，斷言才會執(zhí)行，更改如下：
console.assert(tx.buyer !== "WAL0412", tx);
與其中一些類似墓臭，console.assert() 并不總是特別有用。但在特定的情況下妖谴，它可能是一個優(yōu)雅的解決方案窿锉。
console.count()
另一個具有特殊用途的計數(shù)器酌摇，count 只是作為一個計數(shù)器，或者作為一個命名計數(shù)器嗡载，可以統(tǒng)計代碼被執(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í)行后我們會得到一個列表：
odds: 1
odds: 2
prime: 1
odds: 3
multiplesOfFive: 1
prime: 2
odds: 4
prime: 3
odds: 5
multiplesOfFive: 2
...
還有一個相關(guān)的 console.countReset()遥巴，可以使用它重置計數(shù)器千康。
console.trace()
trace() 在簡單的數(shù)據(jù)中很難演示。當(dāng)您試圖在類或庫中找出是哪個實際調(diào)用者導(dǎo)致了這個問題時铲掐，它的優(yōu)勢就顯現(xiàn)出來了拾弃。
例如，可能有 12 個不同的組件調(diào)用一個服務(wù)摆霉，但是其中一個組件沒有正確地設(shè)置依賴項豪椿。
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() 會非常清楚地告訴我們問題出在 Dashboard.js，我們可以看到是 new CupcakeService(false) 導(dǎo)致錯誤婉支。
console.time()
console.time() 是一個用于跟蹤操作時間的專用函數(shù)鸯隅，它是跟蹤 JavaScript 執(zhí)行時間的好方法。
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() 來簡化以上代碼滋迈。
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)在不再需要做任何計算或設(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)試信息的代碼，可能不是那么有用帝美。 但它仍然是一個有趣的想法碍彭，這樣寫使你的日志記錄更加清晰。
選擇 DOM 元素
如果熟悉 jQuery悼潭，就會知道 $(‘.class’) 和 $(‘#id’) 選擇器有多么重要庇忌。它們根據(jù)與之關(guān)聯(lián)的類或 ID 選擇 DOM 元素。
但是當(dāng)你沒有引用 jQuery 時舰褪，你仍然可以在谷歌開發(fā)控制臺中進(jìn)行同樣的操作皆疹。
(‘.class’)
(‘.class #id’) 等效于
document.querySelector(‘ ‘)，這將返回 DOM 中與選擇器匹配的第一個元素占拍。
可以使用 \$\$(tagName) 或 \$\$(.class), 注意雙元符號略就，根據(jù)特定的選擇器選擇 DOM 的所有元素捎迫。這也將它們放入數(shù)組中，你也可以通過指定數(shù)組中該元素的位置來從中選擇特定的元素表牢。
例如窄绒，$$(‘.className’) 獲取具有類 className 的所有元素，而\$\$(‘.className’)[0]和 \$\$(‘.className’)[1]獲取到分別是第一個和第二個元素崔兴。
將瀏覽器轉(zhuǎn)換為編輯器
你有多少次想知道你是否可以在瀏覽器中編輯一些文本彰导？ 答案是肯定的，你可以將瀏覽器轉(zhuǎn)換為文本編輯器敲茄。 你可以在 DOM 中的任何位置添加文本和從中刪除文本位谋。
你不再需要檢查元素并編輯 HTML。相反折汞，進(jìn)入開發(fā)人員控制臺并輸入以下內(nèi)容:
document.body.contentEditable = true;
這將使內(nèi)容可編輯【笥祝現(xiàn)在，你幾乎可以編輯 DOM 中的任何內(nèi)容爽待。
查找與 DOM 中的元素關(guān)聯(lián)的事件
調(diào)試時损同，需要查找 DOM 中某個元素的事件偵聽器感時，谷歌控制臺了 getEventListeners使找到這些事件更加容易且直觀鸟款。
getEventListeners($(‘selector’)) 返回一個對象數(shù)組膏燃，其中包含綁定到該元素的所有事件。你可以展開對象來查看事件:
要找到特定事件的偵聽器何什，可以這樣做:
getEventListeners($(‘selector’)).eventName[0].listener
這將顯示與特定事件關(guān)聯(lián)的偵聽器组哩。這里 eventName[0] 是一個數(shù)組，它列出了特定事件的所有事件处渣。例如:
getEventListeners($(‘firstName’)).click[0].listener
將顯示與 ID 為 ‘firstName’ 的元素的單擊事件關(guān)聯(lián)的偵聽器伶贰。
監(jiān)控事件
如果希望在執(zhí)行綁定到 DOM 中特定元素的事件時監(jiān)視它們，也可以在控制臺中這樣做罐栈。你可以使用不同的命令來監(jiān)控其中的一些或所有事件:
如果希望在執(zhí)行綁定到 DOM 中特定元素的事件時監(jiān)視它們黍衙，也可以在控制臺中這樣做。你可以使用不同的命令來監(jiān)控其中的一些或所有事件:
-
monitorEvents($(‘selector’))將監(jiān)視與選擇器的元素關(guān)聯(lián)的所有事件荠诬，然后在它們被觸發(fā)時將它們打印到控制臺琅翻。例如，monitore($(#firstName))將打印 ID 為firstName元素的所有事件柑贞。 -
monitorEvents($(‘selector’),’eventName’)將打印與元素綁定的特定事件方椎。 你可以將事件名稱作為參數(shù)傳遞給函數(shù)。 這將僅記錄綁定到特定元素的特定事件钧嘶。 例如棠众，monitorEvents($(‘#firstName’),’click’) 將打印綁定到 ID 為'firstName'的元素的所有click事件。 -
monitore($(selector)有决，[eventName1, eventName3'摄欲， .])將根據(jù)您自己的需求記錄多個事件轿亮。與其傳遞單個事件名作為參數(shù)，不如傳遞包含所有事件的字符串?dāng)?shù)組胸墙。例如monitore($(#firstName)，[click, focus])將記錄與 ID firstName 元素綁定的click事件和focus事件按咒。 -
unmonitorevent ($(selector)):這將停止監(jiān)視和打印控制臺中的事件迟隅。
檢查 DOM 中的一個元素
你可以直接從控制臺檢查一個元素:
- inspect($將檢查與選擇器匹配的元素，并轉(zhuǎn)到中的選項卡励七。例如智袭，(‘selector’)) 將檢查與選擇器匹配的元素，并轉(zhuǎn)到 Chrome Developer Tools 中的 **Elements** 選項卡掠抬。 例如吼野，
inspect($(‘#firstName’))將檢查 ID 為'firstName' 的元素，spect($(‘a(chǎn)’)[3])將檢查 DOM 中的第 4 個a元素两波。 -
1, $等可以幫助你獲取最近檢查過的元素瞳步。例如，2 等可以幫助你獲取最近檢查過的元素腰奋。 例如单起，
$0表示最后檢查的 DOM 元素，而$1倒數(shù)第二個檢查的 DOM 元素劣坊。
檢索最后一個結(jié)果的值
你可以將控制臺用作計算器嘀倒。當(dāng)你這樣做的時候，你可能需要用第二個來跟蹤一個計算局冰。以下是如何從內(nèi)存中檢索先前計算的結(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
清除控制臺和內(nèi)存
如果你想清除控制臺及其內(nèi)存测蘑，輸入如下：
clear();
原文：
關(guān)于Fundebug
Fundebug專注于JavaScript、微信小程序康二、微信小游戲碳胳、支付寶小程序、React Native赠摇、Node.js和Java線上應(yīng)用實時BUG監(jiān)控固逗。 自從2016年雙十一正式上線，F(xiàn)undebug累計處理了10億+錯誤事件藕帜，付費(fèi)客戶有陽光保險烫罩、荔枝FM、掌門1對1洽故、核桃編程贝攒、微脈、青團(tuán)社等眾多品牌企業(yè)时甚。歡迎免費(fèi)試用隘弊！
