摘要：當(dāng)做一些性能測(cè)試時(shí)，同樣可以在這里很方便地進(jìn)行。前者返回傳入對(duì)象所有屬性名組成的數(shù)據(jù)，后者返回所有屬性值組成的數(shù)組。而便是用來停止這一監(jiān)聽。而則是解除該斷點(diǎn)。

Chrome瀏覽器我想是每一個(gè)前端er必用工具之一吧，一部分原因是它速度快，體積不大，支持的新特性也比其它瀏覽器多，還有一部分我想就是因?yàn)樗目刂婆_(tái)功能強(qiáng)大了吧，說它是神器一點(diǎn)也不過分，很方便。但其實(shí)很多開發(fā)者并沒有用出控制臺(tái)的精髓，只是使用簡(jiǎn)單的console.log();其實(shí)控制臺(tái)功能遠(yuǎn)遠(yuǎn)不止這么簡(jiǎn)單哦。

1.console.clear

console.clear();清空控制臺(tái)，這個(gè)應(yīng)該和console.log知名度一樣高吧。

2.console.log ("普通信息")

3.console.info ("提示性信息")

4.console.error ("錯(cuò)誤信息")

5.console.warn ("警示信息")

大家都會(huì)用log，但很少有人能夠很好地利用console.error，console.warn 等將輸出到控制臺(tái)的信息進(jìn)行分類整理。他們功能區(qū)別不大，意義在于將輸出到控制臺(tái)的信息進(jìn)行歸類，或者說讓它們更語義化。

6.console.group 與console.groupEnd

如果再配合console.group 與console.groupEnd，可以將這種分類管理的思想發(fā)揮到極致。這適合于在開發(fā)一個(gè)規(guī)模很大模塊很多很復(fù)雜的Web APP時(shí)，將各自的log信息分組到以各自命名空間為名稱的組里面。

這樣的控制臺(tái)信息看上去就一目了然了，就不用再為了找這是屬于那一行代碼輸出的再翻一遍源碼了。

另外，console.log家族還給我們提供了一個(gè)的API：第一個(gè)參數(shù)可以帶一些格式化指令，比如%c,n;看下面這個(gè)炫酷的效果：

當(dāng)然，圖片也是可以的，讀者可以自行嘗試，修改上述代碼即可。

另外，console.log() 接收不定參數(shù)，參數(shù)間用逗號(hào)分隔，最終會(huì)輸出會(huì)將它們以空白字符連接。

7.console.table

看著這種“黑魔法”是不是有種坑分的感覺呢，其實(shí)還不止哦！console.table可以讓我們輸出表格,示例：

有的時(shí)候后端傳回來一大串?dāng)?shù)據(jù)，是不是覺得直接console.log或是通過抓包工具查看都會(huì)讓人暈頭轉(zhuǎn)向呢，這個(gè)時(shí)候正事console.table發(fā)揮作用的時(shí)候了，以表格的形式呈現(xiàn)數(shù)據(jù)，自然一目了然。例如下面：

8.console.assert

當(dāng)你想代碼滿足某些條件時(shí)才輸出信息到控制臺(tái)，那么你大可不必寫if或者三元表達(dá)式來達(dá)到目的，cosole.assert便是這樣場(chǎng)景下一種很好的工具，它會(huì)先對(duì)傳入的表達(dá)式進(jìn)行斷言，只有表達(dá)式為假時(shí)才輸出相應(yīng)信息到控制臺(tái)。

9.console.count

除了條件輸出的場(chǎng)景，還有常見的場(chǎng)景是計(jì)數(shù)。

當(dāng)你想統(tǒng)計(jì)某段代碼執(zhí)行了多少次時(shí)也大可不必自己去寫相關(guān)邏輯，內(nèi)置的console.count可以很地勝任這樣的任務(wù).

10.console.dir

將DOM結(jié)點(diǎn)以JavaScript對(duì)象的形式輸出到控制臺(tái)，而console.log是直接將該DOM結(jié)點(diǎn)以DOM樹的結(jié)構(gòu)進(jìn)行輸出，與在元素審查時(shí)看到的結(jié)構(gòu)是一致的。不同的展現(xiàn)形式，同樣的優(yōu)雅，各種體位任君選擇反正就是方便與體貼。

11.console.time & console.timeEnd

輸出一些調(diào)試信息是控制臺(tái)最常用的功能，當(dāng)然，它的功能遠(yuǎn)不止于此。當(dāng)做一些性能測(cè)試時(shí)，同樣可以在這里很方便地進(jìn)行。比如需要考量一段代碼執(zhí)行的耗時(shí)情況時(shí)，可以用console.time與 console.timeEnd來做此事。

測(cè)出for循環(huán)1000次的時(shí)間

12.console.profile與 console.profileEnd

當(dāng)想要查看CPU使用相關(guān)的信息時(shí)，可以使用console.profile配合 console.profileEnd來完成這個(gè)需求。

這一功能可以通過UI界面來完成，Chrome 開發(fā)者工具里面有個(gè)tab便是Profile。使用方法和console.time基本一樣，其實(shí)time開發(fā)者工具里也有個(gè)tab就是timeline。

可以通過火狐的firebug插件查看用兩種不同方式創(chuàng)建1000個(gè)數(shù)組的cpu占用情況以及花費(fèi)時(shí)間

目前測(cè)試了一下火狐的firebug插件好用的只有火狐的49版本瀏覽器

瀏覽器下載地址：http://mydown.yesky.com/pcsof...

$

講真，米國(guó)程序員們真的很喜歡money啊（誰又不是呢），看看PHP就知道了，滿屏的$。而在Chrome的控制臺(tái)里，$用處同樣是蠻多且方便的。

上面的$_需要領(lǐng)悟其奧義才能使用得當(dāng)，而$0~$4則代表了最近5個(gè)你選擇過的DOM節(jié)點(diǎn)。

什么意思呢？在頁面右擊選擇審查元素，然后在彈出來的DOM結(jié)點(diǎn)樹上面隨便點(diǎn)選，這些被點(diǎn)過的節(jié)點(diǎn)會(huì)被記錄下來，而$0會(huì)返回最近一次點(diǎn)選的DOM結(jié)點(diǎn)，以此類推，$1返回的是上上次點(diǎn)選的DOM節(jié)點(diǎn)，最多保存了5個(gè)，如果不夠5個(gè)，則返回undefined。

$和document.querySelector()一樣，萬能選擇器，選取符合要求的第一個(gè)元素

15.$$和document.querySelectorAll()一樣，萬能選擇器，選取符合要求的所有元素

16.$x(path)

將所匹配的節(jié)點(diǎn)放在一個(gè)數(shù)組里返回

$x("http://div[a]");返回所有子節(jié)點(diǎn)包含a的div

注意：必須帶雙斜杠

17.copy

copy(document.body)

然后你就可以Ctrl+v了。

注意：他不依附于任何全局變量比如window，所以其實(shí)在JS代碼里是訪問不了這個(gè)copy方法的，所以從代碼層面來調(diào)用復(fù)制功能也就無從談起。但愿有天瀏覽器會(huì)提供相應(yīng)的JS實(shí)現(xiàn)吧~這樣我們就可以通過js代碼進(jìn)行復(fù)制操作而不用再依賴Flash插件了。

18.keys & values

這是一對(duì)基友。前者返回傳入對(duì)象所有屬性名組成的數(shù)據(jù)，后者返回所有屬性值組成的數(shù)組。具體請(qǐng)看下面的例子：

19.monitor & unmonitor

monitor(function)，它接收一個(gè)函數(shù)名作為參數(shù)，比如function a，每次a被執(zhí)行了，都會(huì)在控制臺(tái)輸出一條信息，里面包含了函數(shù)的名稱a及執(zhí)行時(shí)所傳入的參數(shù)。而unmonitor(function)便是用來停止這一監(jiān)聽。

20.debug & undebug

debug同樣也是接收一個(gè)函數(shù)名作為參數(shù)。當(dāng)該函數(shù)執(zhí)行時(shí)自動(dòng)斷下來以供調(diào)試，類似于在該函數(shù)的入口處打了個(gè)斷點(diǎn)，可以通過debugger來做到，同時(shí)也可以通過在Chrome開發(fā)者工具里找到相應(yīng)源碼然后手動(dòng)打斷點(diǎn)。而undebug 則是解除該斷點(diǎn)。而其他還有好些命令則讓人沒有說的欲望，因?yàn)楹眯┒伎梢酝ㄟ^Chrome開發(fā)者工具的UI界面來操作并且比用在控制臺(tái)輸入要方便。

chrome開發(fā)者工具文檔地址：

http://www.css88.com/doc/chro...

?大家感興趣可以去看看chrome開發(fā)者工具文檔，對(duì)于調(diào)試有很大幫助
文章鏈接：原文地址