Chrome控制台函數


你是光你是電,你是唯一的神話。

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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM