你是光你是電,你是唯一的神話。
Chrome的出現簡直拯救了廣大前端,不僅僅是因為其V8引擎的速度,更是因為其強大的控制台。為調試前端提供了強大的武器。
當然Firefox下的firebug也很強大,不過我寫前端最早接觸的就是Chrome,所以就基本上沒怎么用過firebug。
我這里把一些Chrome控制台下一些經典的函數總結一下,幫助我們更好地調試頁面。
console.table()
通過console.table()輸出二維數據
console.table()是一個能將你的數據格式化輸出的函數。想象一下平時查看二維數組的結構,是這樣的:
var a=[[1,2,3],[4,5,6],[7,8,9]];
console.log(a);

很不直觀,查看也很麻煩。
但是現在,如果你用console.table(),則可輸出以下表格:

數據內容立馬變得直觀、清晰。
不僅是數組,它同樣適用於對象:
var school = {
hust: { name: "華中科技大學", rank: "9",students:"50000" },
whu: { name: "武漢大學", rank: "7", students:"40000"}
};
console.table(school);

此處需要注意的是如果各對象中** 鍵名 **有不一樣的,會在所有對象中均顯示出來,但不存在該鍵的對象顯示其值為 undefined 。
var school = {
hust: { name: "華中科技大學", history: "61",students:"50000" },
whu: { name: "武漢大學", rank: "7", students:"40000"}
};
console.table(school);

所以如果對象的鍵名差異很大,則會存在很多 undefined,則此處用 console.table() 不是很適合。
要注意的是,既然是表格,那就是二維的數據,console.table()無法用來展示一維數據,如果直接傳入某一維的數據(對象、數組),則會無輸出。
var b=[1,2,3]
console.table(b)

其實對於一位數據,直接用 console.log() 就ok了,不需要用table()
如果某變量既有一維數據,又有二維數據,則一維數據會被忽略,只顯示二維數據。
var c=[1,[2,3,4],5,5];
console.table(c);

指定輸出某列或多列(嵌套在內層的鍵、數組下標)
var school = {
hust: { name: "華中科技大學", rank: "9",students:"50000" },
whu: { name: "武漢大學", rank: "7", students:"40000"}
};
console.table(school,'rank');
console.table(school,['rank','name']);

$(selector)和$$(selector)
你可能會想,這不是Jquery的選擇器嘛?和控制台有什么關系?
其實Chrome原生支持 類jQuery 選擇器。
$(selector)返回滿足條件的第一個DOM元素
$$(selector)返回滿足條件的所有DOM元素

前面之所以說是 類Jquery 選擇器,是因為Chrome並沒有引入Jquery,而是對於一些函數的封裝。
實際上$(selector)是對 原生JavaScriptdocument.querySelector()的封裝
實際上$$(selector)是對 原生JavaScriptdocument.querySelectorAll()的封裝
copy()
通過此命令可以將在控制台獲取到的內容(DOM對象,基本類型、引用類型等等,任何變量都可以)復制到剪貼板,然后可以到處粘貼了。
copy($('div'));
copy(school);
copy(b);

注意:該函數是控制台函數,不屬於JS原生函數,所以只能在控制台調試時使用,無法在JS代碼里使用
console.time()和console.timeEnd()
在統計某段代碼執行耗時情況時,如果自己手寫計時函數,不僅麻煩,還容易出錯。
這里借助控制台函數console.time()和console.timeEnd()可以非常方便地完成這一工作。
console.time("Time is ");
for (var i = 1000000; i >= 0; i--) {
};
console.timeEnd("Time is ");

水平所限,難免掛一漏萬。這里只是列出了一些平時用處比較大,且方便的函數。還有一些更為高階的函數沒有說,一來可以通過圖形界面進行操作,更為方便,二來要講清楚的話需要更多時間,所以這里暫且不提,以后有機會再說。
要了解更多,可以查看后面的鏈接。
Reference:
Command Line API Reference
Console API Reference
