轉(zhuǎn)自：http://blog.jobbole.com/76985/

Chrome的開發(fā)者工具已經(jīng)強(qiáng)大到?jīng)]朋友的地步了，特別是其功能豐富界面友好的console，使用得當(dāng)可以有如下功效：

• 更高「逼格」更快「開發(fā)調(diào)試」更強(qiáng)「進(jìn)階級的Frontender」
• Bug無處遁形「Console大法好」

console.log

大家都會用log，但鮮有人很好地利用console.error?,?console.warn?等將輸出到控制臺的信息進(jìn)行分類整理。
他們功能區(qū)別不大，意義在于將輸出到控制臺的信息進(jìn)行歸類，或者說讓它們更語義化。
各個(gè)所代表的語義如下：

• console.log：普通信息
• console.info：提示類信息
• console.error：錯(cuò)誤信息
• console.warn：警示信息

當(dāng)合理使用上述log方法后，可以很方便地在控制臺選擇查看特定類型的信息。

console.log('一顆紅心向太陽','吼吼~'); console.info('樓上藥不能停！'); console.warn('樓上嘴太賤！'); console.error('樓上關(guān)你毛事？');

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

console.group("app.foo"); console.log("來自foo模塊的信息 blah blah blah..."); console.groupEnd(); console.group("app.bar"); console.log("來自bar模塊的信息 blah blah blah..."); console.groupEnd();

而關(guān)于console.log，早已被玩兒壞了。一切都源于Chrome提供了這么一個(gè)API：第一個(gè)參數(shù)可以包含一些格式化的指令比如%c。

比如給hello world?做件漂亮的嫁衣再拉出來見人：

console.log('%chello world','font-size:25px;color:red;');

如果你覺得不夠過癮，那就把你能寫出來的最華麗的CSS樣式都應(yīng)用上吧，比如漸變。于是你可以得到如下華麗麗的效果：

console.log('%chello world', 'background-image:-webkit-gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );color:transparent;-webkit-background-clip: text;font-size:5em;');

各種招大招的節(jié)奏啊~

看著上面密集的代碼不用驚慌，上面console.log()第二個(gè)參數(shù)全是純CSS用來控制樣式的，你不會陌生。而第一個(gè)參數(shù)里可以帶用百分號開頭的轉(zhuǎn)義指令，如上面輸出帶樣式的文字時(shí)使用的%c指令。更詳細(xì)的指令參見官方API文檔的這個(gè)表格。

如果還不夠過癮，那咱們來log一些圖片吧，甚至。。。動(dòng)圖？
對，你得先有圖，我們拿這張圖為例。

console.log("%c", "padding:50px 300px;line-height:120px;background:url('http://wayou.github.io/2014/09/10/chrome-console-tips-and-tricks/rabbit.gif') no-repeat;");

看著上面搖擺的豆比兔是不是有種抽它一臉的沖動(dòng)。

除此，console.table?更是直接以表格的形式將數(shù)據(jù)輸出，不能贊得太多！
借用之前寫過的一篇博文里的例子：

var data = [{'品名': '杜雷斯', '數(shù)量': 4}, {'品名': '岡本', '數(shù)量': 3}]; console.table(data);

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

console.log('%c你好','color:red;','小明','你知道小紅被媽媽打了么');

console.assert

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

var isDebug=false; console.assert(isDebug,'開發(fā)中的log信息。。。');

console.count

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

function foo(){//其他函數(shù)邏輯blah blah。。。console.count('foo 被執(zhí)行的次數(shù)：'); } foo(); foo(); foo();

console.dir

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

console.dir(document.body); console.log(document.body);

console.time & console.timeEnd

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

這里借用官方文檔的例子：

console.time("Array initialize"); var array= new Array(1000000); for (var i = array.length - 1; i >= 0; i--) {array[i] = new Object(); }; console.timeEnd("Array initialize");

當(dāng)然，我們也可以選擇自己寫代碼來計(jì)時(shí)：

var start=new Date().getTime(); var array= new Array(1000000); for (var i = array.length - 1; i >= 0; i--) {array[i] = new Object(); }; console.log(new Date().getTime()-start);

相信你也看到了，用內(nèi)置的console.time是多么地方便，省去了自己寫代碼來計(jì)算的工作量。另外值得一提的是，通過調(diào)用內(nèi)置的console.time得到的結(jié)果要比自己手動(dòng)計(jì)算的時(shí)間差更精確可靠。

console.profile & console.timeLime

當(dāng)想要查看CPU使用相關(guān)的信息時(shí)，可以使用console.profile配合?console.profileEnd來完成這個(gè)需求。
這一功能可以通過UI界面來完成，Chrome 開發(fā)者工具里面有個(gè)tab便是Profile。

與此類似的功能還有console.timeLine配合?console.timeLineEnd,它的作用是開始記錄一段時(shí)間軸，同樣可以通過Chrome開發(fā)者工具里的Timeline?標(biāo)簽來進(jìn)行相應(yīng)操作。

所以在我看來這兩個(gè)方法有點(diǎn)雞肋，因?yàn)槎伎梢酝ㄟ^操作界面來完成。但至少他提供了一種命令行方式的交互，還是多了種姿勢供選擇吧。

console.trace

堆棧跟蹤相關(guān)的調(diào)試可以使用console.trace。這個(gè)同樣可以通過UI界面完成。當(dāng)代碼被打斷點(diǎn)后，可以在Call Stack面板中查看相關(guān)堆棧信息。

上面介紹的都是掛在window.console這個(gè)對象下面的方法，統(tǒng)稱為Console API，接下來的這些方法確切地說應(yīng)該叫命令，是Chrome內(nèi)置提供，在控制臺中使用的，他們統(tǒng)稱為Command Line API。

$

似乎美刀總是被程序員及各種編程語言所青睞「你看看PHP代碼就知道PHPer有多愛錢了」，在Chrome的控制臺里，$用處還真是蠻多且方便的。
$_命令返回最近一次表達(dá)式執(zhí)行的結(jié)果，功能跟按向上的方向鍵再回車是一樣的，但它可以做為一個(gè)變量使用在你接下來的表達(dá)式中：

2+2//回車，再 $_+1//回車得5

上面的$_需要領(lǐng)悟其奧義才能使用得當(dāng)，而$0~$4則代表了最近5個(gè)你選擇過的DOM節(jié)點(diǎn)。
什么意思？在頁面右擊選擇審查元素，然后在彈出來的DOM結(jié)點(diǎn)樹上面隨便點(diǎn)選，這些被點(diǎn)過的節(jié)點(diǎn)會被記錄下來，而$0會返回最近一次點(diǎn)選的DOM結(jié)點(diǎn)，以此類推，$1返回的是上上次點(diǎn)選的DOM節(jié)點(diǎn)，最多保存了5個(gè)，如果不夠5個(gè)，則返回undefined。

另外值得一贊的是，Chrome 控制臺中原生支持類jQuery的選擇器，也就是說你可以用$加上熟悉的css選擇器來選擇DOM節(jié)點(diǎn)，多么滴熟悉。

$('body')

$(selector)返回的是滿足選擇條件的首個(gè)DOM元素。
剝?nèi)ニ齻紊频耐庖?#xff0c;其實(shí)$(selector)是原生JavaScript?document.querySelector()?的封裝。
同時(shí)另一個(gè)命令?$ $(selector)?返回的是所有滿足選擇條件的元素的一個(gè)集合，是對document.querySelectorAll()?的封裝。

$$('div')

copy

通過此命令可以將在控制臺獲取到的內(nèi)容復(fù)制到剪貼板。

copy(document.body)

然后你就可以到處粘了：

看完此條命令行，機(jī)智的你是不是跟腦洞全開的我一樣，冒出了這樣一個(gè)想法：那就是通過這個(gè)命令可以在JavaScript里進(jìn)行復(fù)制操作從而不用依賴Flash插件了。
But現(xiàn)實(shí)是殘酷的，如之前所述的，這里的控制臺命令只能在控制臺中環(huán)境中執(zhí)行，因?yàn)樗灰栏接谌魏稳肿兞勘热鐆indow，所以其實(shí)在JS代碼里是訪問不了這個(gè)copy方法的，所以從代碼層面來調(diào)用復(fù)制功能也就無從談起。但愿有天瀏覽器會提供相應(yīng)的JS實(shí)現(xiàn)吧~

keys & values

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

var tboy={name:'wayou',gender:'unknown',hobby:'opposite to the gender'}; keys(tboy); values(tboy);

monitor & unmonitor

monitor(function)，它接收一個(gè)函數(shù)名作為參數(shù)，比如function a,每次a被執(zhí)行了，都會在控制臺輸出一條信息，里面包含了函數(shù)的名稱a及執(zhí)行時(shí)所傳入的參數(shù)。

而unmonitor(function)便是用來停止這一監(jiān)聽。

function sayHello(name){alert('hello,'+name); } monitor(sayHello); sayHello('wayou'); unmonitor(sayHello); sayHello('wayou');

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界面來操作并且比用在控制臺輸入要方便。

轉(zhuǎn)載于:https://www.cnblogs.com/CraryPrimitiveMan/p/3974213.html

總結(jié)

以上是生活随笔為你收集整理的Chrome 控制台指南的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。