谷歌瀏覽器不為人知的console調(diào)試方法！

瀏覽器控制臺是前端調(diào)試中使用最頻繁的調(diào)試工具，沒有之一。但它實際上還有很多不為人所知的功能~

目錄

• console

• log
• info, warn, error
• table
• group
• dir
• count
• clear
• time
• assert

• chrome devtools

• $(selector, [startNode])
• $$(selector, [startNode])
• $
• copy(obj)
• inspect(object/function)
• getEventListeners(obj)
• monitor/unmonitor(function)
• monitorEvents/unmonitorEvents(object[, events])
• 別名

console

console 是瀏覽器提供的接口。它是一個對象，在控制臺中可以查看當前瀏覽器支持哪一些方法。下面介紹一些比較實用的 api:

log

console.log 這可能是學(xué)習(xí)前端調(diào)試技術(shù)最基礎(chǔ)的第一步了吧，你還記得最開始是從什么地方學(xué)習(xí)到使用這個方法來調(diào)試嗎？

console.log(obj1?[,?obj2,?...,?objN);
console.log(msg?[,?subst1,?...,?substN);

console.log 的功能就是向控制臺輸出一條信息。它可以傳入多個參數(shù)，輸出的行為取決于第一個參數(shù)是否是一個代替字符串。

如果是替換字符串，則后面的參數(shù)會依次替換掉字符串里的占位符; 如果不是替換字符串，則輸出每一個參數(shù)的值：

var?name?=?'anran758';

//?常規(guī)使用方式，輸出原始值
console.log('Hello');?//?Hello
console.log(name);?//?anran758
console.log(`Hello,?${name}`);?//?Hello,?anran758

//?第一個參數(shù)是替換字符串，后面是替換的規(guī)則
console.log('Hi,?%s.?what?are?you?doing',?name);?//?Hi,?anran758.?what?are?you?doing
console.log('%c?I?am?some?great?text',?'font-size:?50px;');?//?假裝?50px:?Hi,?anran758.?what?are?you?doing

下面是替換字符串所支持的參數(shù), 學(xué)習(xí)過 C 語言的同學(xué)是不是有種熟悉的感覺呀~

在使用時需要注意的一點是：不同占位符在傳入值時會預(yù)先針對類型的不同而進行格式化，比如:

//?我們在使用了數(shù)字占位符，卻傳入字符串.?內(nèi)部進行格式化時進行了類似?parseInt('anran758',?10)?的數(shù)據(jù)轉(zhuǎn)換
//?因此替換結(jié)果為?NaN
console.log('result:?%d',?'anran758');?//?result:?NaN

//?再比如，我們傳入一個浮點數(shù)，經(jīng)過數(shù)據(jù)格式化為 3。這一種是符合預(yù)期，因為我們要的就是整數(shù)
console.log('result:?%d',?3.25);?//?result:?3

了解了這些擴展方式后，我們可以來做一些有意思的事~

比如，如果你打開控制臺去訪問知乎、百度等網(wǎng)站時，可能會發(fā)現(xiàn)控制臺有一些開發(fā)者留下的彩蛋~ 如招聘信息或者自家公司的立體 logo：

嗶哩嗶哩控制臺輸出

知乎控制臺的輸出

不過值得一提的是，js 規(guī)范中并沒有規(guī)定 console 該如何實現(xiàn)，不同的瀏覽器調(diào)用 console 后的表現(xiàn)也會不一致。

這導(dǎo)致有一個常見的問題發(fā)生: 在調(diào)用接口時，明明請求的數(shù)據(jù)還沒回來，打印出來卻是有值的。實際上原因可能就是你所使用的瀏覽器，在實現(xiàn)時該 API 是異步的，它提前給你顯示了出來。這個問題我在 segmentfault 的問答區(qū)中看到有很多朋友問了這樣的問題，特意提一提這事。

解決的方法也很簡單，如果你覺得這個值不對勁的話，你可以先將對象轉(zhuǎn)為 json 字符串，然后再解析為對象, 這樣就能將原始值輸出。

console.log(JSON.parse(JSON.stringify(obj)));

info, warn, error

如果你使用過一些腳手架來搭建項目或者是使用過 SDK 的話，那么在控制臺中你能看到以下相關(guān)的使用信息。

比如在載入程序時會發(fā)出一些運行信息會通過 log 或者 info 來輸出信息。

或者你使用的框架中檢測到你使用了一些將來可能會被廢棄的 API，這時它可能會在控制拋出一個 warn 來警告你。

再或者你使用人家 SDK 的姿勢不對，程序內(nèi)部檢測到壓根不是這么用的，那么 SDK 內(nèi)部會拋出錯誤信息，我們可以通過錯誤信息來進行排查錯誤。

這三個 API 更多的是給開發(fā)人員提供額外的信息，來查看頁面的運行情況，更多用于被封裝過后的組件或框架中。

//?Info
console.info('Hi,?This?is?message')

//?warning?警告
console.warn('On,?Your?operation?may?cause?a?security?breach!')

//?Error?報錯
console.error('Shit!?Variable?does?not?exist!')

table

console.table只接受一個數(shù)組或者對象, 可以接受一個額外的參數(shù)來描述表格的列數(shù)。它會把數(shù)據(jù)通過表格的形式打印出來, 這樣我們看數(shù)據(jù)的時候就能直觀了很多:

var?array?=?[
??{?name:?'Jack',?age:?12?},
??{?name:?'Tome',?age:?18?},
??{?name:?'baka',?age:?15?}
];

console.table(array);

group

console.group 和 console.groupEnd 是成對出現(xiàn)的，就像我們使用的標簽一樣。group在控制臺創(chuàng)建一個新的分組, 輸出到控制臺上的內(nèi)容都會被添加一個縮進, 表示該內(nèi)容屬于當前分組, 直到調(diào)用 console.groupEnd() 之后, 當前分組才結(jié)束。

var?boys?=?[
??{?name:?'Jack',?age:?12?},
??{?name:?'Tome',?age:?18?},
??{?name:?'baka',?age:?15?}
]

boys.forEach(item?=>?{
??console.group(`${item.name}`)
??console.log(`This?is?${item.name}`);
??console.log(`${item.name}?is?${item.age}?years?old`);
??console.log(`${item.name}?is?${item.age?*?7}?years?old`);
??console.groupEnd(`${item.name}`)
})

dir

console.dir，在控制臺中顯示指定 JavaScript 對象的屬性，并通過類似文件樹樣式的交互列表

我們知道console.log實際上是可以輸出 DOM 節(jié)點的, 但很多時候我們想查看的不是 DOM 節(jié)點，而是該 DOM 節(jié)點下的屬性，這里就可以使用 dir 來代替 log 來輸出 DOM 節(jié)點對象.

var?head?=?document.getElementById('head');

console.log(head);
console.dir(head);

但需要注意的是，這個功能是非標準的，盡量不要在生產(chǎn)模式下使用。

count

count, 如同字面意思一樣. count()會輸出每一次被調(diào)用的次數(shù). 該方法的兼容性也需要注意, 不適用于生產(chǎn)模式.

console.count('anran758')
console.count('anran758')
console.count('zero')
console.count('anran758')
console.count('zero')
console.count('anran758')
console.count('zero')
console.count('anran758')

clear

clear可以清楚調(diào)用這個 API 之前的所有 log 信息，這在一個 log 很多很亂的情況下進行某個功能調(diào)試會很有作用。

//?something?info
console.clear();

time

啟動一個計時器（timer）來跟蹤某一個操作的占用時長。每一個計時器必須擁有唯一的名字。頁面中最多能同時運行 10,000 個計時器。跟 group 一樣, time 也是配套的。

當以此計時器名字為參數(shù)調(diào)用 console.timeEnd() 時，瀏覽器將以毫秒為單位，輸出對應(yīng)計時器所經(jīng)過的時間.

比如我們統(tǒng)計一下請求接口的時間:

console.time('fetching?data');
fetch('https://api.github.com/users/anran758')
??.then(data?=>?data.json())
??.then(data?=>?{
????console.timeEnd('fetching?data');
????console.log(data);
??});

這樣我們就輕易的知道了這次我們請求花費了多少時間啦~ 但值得注意的是，該方法的統(tǒng)計時間在微觀下不夠精準，更多時候我們還是需要使用更專業(yè)的測試工具后者網(wǎng)站來完成測試性能的工作。

assert

console.assert()還是蠻有意思的. 它第一個參數(shù)接受一個斷言(聲明), 第二個參數(shù)是一個message. 如果斷言為 false，則將一個錯誤消息寫入控制臺。如果斷言是 true，就當做沒發(fā)生。語法如下:

console.assert(assertion,?message?[,?subst1,?...,?substN]);

這里的斷言不一定是false才會觸發(fā)錯誤. 我特意去測試了一下, 觸發(fā)的規(guī)則也跟if的判斷里的邏輯相反. 只要是斷言是0, NaN, undefined, false, null, 空字符串（''）這些假值就會激活報錯.

//?Assertion?failed:?Here?is?the?"name"?can?not?be?empty
var?str?=?'';
console.assert(str,?'Here?is?the?"str"?can?not?be?empty');

//?Assertion?failed:?0?is?not?allowed!
var?num?=?0;
console.assert(0,?'0?is?not?allowed!');

//?Assertion?failed:?That?is?wrong!
console.assert(1?===?2,?'That?is?wrong!');

//?什么都不會發(fā)生
console.assert(1?===?1,?'That?is?wrong!');

以上是 18.01.30 分享出來的內(nèi)容，在這之后又發(fā)現(xiàn)了一些好用的功能，如果你跟筆者使用的都是 chrome 瀏覽器的話，可以繼續(xù)往下看，筆者將逐一進行介紹：

chrome devtools

下面介紹 chrome devtools 在控制臺提供的一些語法糖，這些方法只能控制臺使用，而不能直接在代碼里使用。區(qū)分是瀏覽器提供的還是我們自己代碼中定義的方法可以使用console.log(method)，如果打印出來的是 [Command Line API] 就是內(nèi)置方法。

$(selector, [startNode])

我相信做過前端的朋友都了解 jqeury 的 $ 選擇器，乃至于我們看到這個符號就能聯(lián)想到 DOM 相關(guān)的東西。

IE9+ 引入了 document.querySelector()，可以讓我們很方便找到對應(yīng)的 DOM 元素，但該 API 拼寫起來確實有點麻煩，并且該方法的使用頻率還不低。因此 chrome 開發(fā)工具提供一個$的別名給我們使用。

$ 接受兩個參數(shù)，第一個參數(shù)接受一個選擇器，第二個參數(shù)接受一個 DOM 元素表示從該元素下開始搜索，不傳默認為 document.

我們可以簡單做一個 demo 實驗一下：

<div?class="main?main.container">
??<div?class="start">div>
??<div?class="main?content">div>
??<div?class="end">div>
div>

將上面的 demo 保存至 html 中后，在 chrome 瀏覽器中打開該文件。輸入以下代碼查看實際效果:

//?查看是否是?Command?Line?API，如果不是的話那就意味著你在全局中引入了第三方庫，它會覆蓋瀏覽器默認的?API
$;

//?從?document?中獲取第一個?main?元素，
var?container?=?$('.main');

//?我們將上面獲取到的節(jié)點作為?startNode,?從該節(jié)點往下找可以找到?content
var?content?=?$('.main',?container);

console.log('container:?',?container,?'\n\n');
console.log('content:?',?content,?'\n\n');

$$(selector, [startNode])

$$ 相當于 document.querySelectorAll，但細節(jié)上看會有些不同。$$ 調(diào)用后會返回一個數(shù)組，而后者調(diào)用后返回的是一個 NodeList，缺少一些數(shù)組的方法。

$$ 與 $ 接受的參數(shù)的功能是一致的，就不過多介紹：

$_

說這個方法之前需要先科普一下返回值這個概念：js 每一個表達式都會有返回值，比如你定義一個函數(shù)，但是沒有 return 任何東西，那么調(diào)用這個函數(shù)后的返回值就是 undefined。這個知識點可以在 你不知道的 JavaScript 系列中了解更詳細的解析。

function?fn()?{}?//?返回值是?undefined
fn();?//?返回值是?undefined

var?n?=?0;?//?返回值是?undefined
n?+=?1;?//?返回值是?1
[1,?2,?3].map(n?=>?n?*?2);?//?[2,?4,?6]

好啦，話歸正題~有時候為了方便，我們會直接在控制臺進行運算，此時我們可以使用 $_ 獲取上一個表達式的值。在某些時候可以提供便利性。

clear、dir 分別是 console.clear、console.clear、dir 的別名。

copy(obj)

該方法可以將數(shù)據(jù) copy 至粘貼板。

當初發(fā)現(xiàn)這個 API 時還是挺意外的。當時需要將城市映射表數(shù)據(jù)改造為另一種結(jié)構(gòu)，就直接在控制臺中處理好了。接著就在想如何將數(shù)據(jù)弄出來，數(shù)據(jù)量很大，不好拷貝下來。然后突發(fā)奇想，看看控制臺有沒有支持復(fù)制數(shù)據(jù)的功能，隨便嘗試了以下，然后就成功了。

這就意味著以后我們做一些數(shù)據(jù)處理可以直接在控制臺中進行處理，在某些方面上會挺方便的，比如快速生成一個長度為 20 的數(shù)組，數(shù)組內(nèi)有 0 ~ 19 的數(shù)字：

//?要檢查一下有沒有全局變量覆蓋了默認的?API
//???copy(value)?{?[Command?Line?API]?}
copy;

var?arr?=?[];
for?(let?i?=?0;?i?20;?i++)?{
??arr.push(i);
}

//?此時可以檢查是否復(fù)制成功
console.log(arr);
copy(arr);

inspect(object/function)

inspect 接受一個對象或者函數(shù)。

如果這個參數(shù)是一個 DOM 元素的話，并且它是存在 DOM 樹中的，那么它會切換到 Elements 這個 tab。如果這個 DOM 元素沒有被插入 DOM 樹種的話，那僅僅會切換 tab。

如果傳入的是一個函數(shù)，會將這個函數(shù)傳入 source 面板，用以檢查函數(shù)(比起查看 DOM 的功能, 傳遞函數(shù)后的功能除了格式代碼外并沒有想到好的用處)

代碼格式前

代碼格式后

getEventListeners(obj)

getEventListeners(obj) 返回指定 DOM 綁定的事件監(jiān)聽器，有時候調(diào)試 DOM 時會挺方便的。以知乎首頁為例，這樣可以很清晰的看到 document.body 綁定的事件：

monitor/unmonitor(function)

調(diào)用指定的函數(shù)時，會向控制臺記錄一條消息，指示函數(shù)名稱以及調(diào)用時傳遞給函數(shù)的參數(shù)。使用unmonitor(function)停止監(jiān)控。

相當于在這個函數(shù)的頭部添加了一個 console.info 的信息，算是語法糖吧~ 主要是調(diào)試時使用。當

monitorEvents/unmonitorEvents(object[, events])

monitorEvents 監(jiān)控指定 DOM 的事件，如果不傳第二個參數(shù)，就監(jiān)聽所有事件的發(fā)生。

相對應(yīng)的是使用unmonitorEvents(object[, events])停止監(jiān)控事件。

//?監(jiān)控/停止監(jiān)控?window?中觸發(fā)的所有事件
monitorEvents(window);
unmonitorEvents(window);

//?or?監(jiān)控/停止監(jiān)控?window?中觸發(fā)的?mouseover?事件
monitorEvents(window,?'mouseover');
unmonitorEvents(window,?'mouseover');

//?or?監(jiān)控/停止監(jiān)控?window?中觸發(fā)的指定多個事件
monitorEvents(window,?['mouseover',?'mouseout']);
unmonitorEvents(window,?['mouseover',?'mouseout']);

別名

對于一些常用的方法， chrome tools 提供了別名以供我們快速使用：

參考資料:

• Console
• 從 console.log 說起（上）
• Console Utilities API Reference