Chrome的開(kāi)發(fā)者工具已經(jīng)強大到?jīng)]朋友的地步了，特別是其功能豐富界面友好的console，使用得當可以有如下功效：
大家都會(huì )用log，但鮮有人很好地利用console.error , console.warn 等將輸出到控制臺的信息進(jìn)行分類(lèi)整理。
他們功能區別不大，意義在于將輸出到控制臺的信息進(jìn)行歸類(lèi)，或者說(shuō)讓它們更語(yǔ)義化。
各個(gè)所代表的語(yǔ)義如下：
console.log：普通信息console.info：提示類(lèi)信息console.error：錯誤信息console.warn：警示信息當合理使用上述log方法后，可以很方便地在控制臺選擇查看特定類(lèi)型的信息。
console.log('一顆紅心向太陽(yáng)','吼吼~');console.info('樓上藥不能停！');console.warn('樓上嘴太賤！');console.error('樓上關(guān)你毛事？');
如果再配合console.group 與console.groupEnd，可以將這種分類(lèi)管理的思想發(fā)揮到極致。這適合于在開(kāi)發(fā)一個(gè)規模很大模塊很多很復雜的Web APP時(shí)，將各自的log信息分組到以各自命名空間為名稱(chēng)的組里面。
console.group("app.foo");console.log("來(lái)自foo模塊的信息 blah blah blah...");console.groupEnd();console.group("app.bar");console.log("來(lái)自bar模塊的信息 blah blah blah...");console.groupEnd();
而關(guān)于console.log，早已被玩兒壞了。一切都源于Chrome提供了這么一個(gè)API：第一個(gè)參數可以包含一些格式化的指令比如%c。
比如給hello world 做件漂亮的嫁衣再拉出來(lái)見(jiàn)人：
console.log('%chello world','font-size:25px;color:red;');
如果你覺(jué)得不夠過(guò)癮，那就把你能寫(xiě)出來(lái)的最華麗的CSS樣式都應用上吧，比如漸變。于是你可以得到如下華麗麗的效果：
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;');
各種招大招的節奏啊~
看著(zhù)上面密集的代碼不用驚慌，上面console.log()第二個(gè)參數全是純CSS用來(lái)控制樣式的，你不會(huì )陌生。而第一個(gè)參數里可以帶用百分號開(kāi)頭的轉義指令，如上面輸出帶樣式的文字時(shí)使用的%c指令。更詳細的指令參見(jiàn)官方API文檔的這個(gè)表格。
如果還不夠過(guò)癮，那咱們來(lái)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;");
看著(zhù)上面搖擺的豆比兔是不是有種抽它一臉的沖動(dòng)。
除此，console.table 更是直接以表格的形式將數據輸出，不能贊得太多！
借用之前寫(xiě)過(guò)的一篇博文里的例子：
var data = [{'品名': '杜雷斯', '數量': 4}, {'品名': '岡本', '數量': 3}];console.table(data);
另外，console.log() 接收不定參數，參數間用逗號分隔，最終會(huì )輸出會(huì )將它們以空白字符連接。
console.log('%c你好','color:red;','小明','你知道小紅被媽媽打了么');當你想代碼滿(mǎn)足某些條件時(shí)才輸出信息到控制臺，那么你大可不必寫(xiě)if或者三元表達式來(lái)達到目的，cosole.assert便是這樣場(chǎng)景下一種很好的工具，它會(huì )先對傳入的表達式進(jìn)行斷言，只有表達式為假時(shí)才輸出相應信息到控制臺。
var isDebug=false;console.assert(isDebug,'開(kāi)發(fā)中的log信息。。。');除了條件輸出的場(chǎng)景，還有常見(jiàn)的場(chǎng)景是計數。
當你想統計某段代碼執行了多少次時(shí)也大可不必自己去寫(xiě)相關(guān)邏輯，內置的console.count可以很地勝任這樣的任務(wù)。
function foo(){ //其他函數邏輯blah blah。。。 console.count('foo 被執行的次數：');}foo();foo();foo();將DOM結點(diǎn)以JavaScript對象的形式輸出到控制臺
而console.log是直接將該DOM結點(diǎn)以DOM樹(shù)的結構進(jìn)行輸出，與在元素審查時(shí)看到的結構是一致的。不同的展現形式，同樣的優(yōu)雅，各種體位任君選擇反正就是方便與體貼。
console.dir(document.body);console.log(document.body);輸出一些調試信息是控制臺最常用的功能，當然，它的功能遠不止于此。當做一些性能測試時(shí)，同樣可以在這里很方便地進(jìn)行。
比如需要考量一段代碼執行的耗時(shí)情況時(shí)，可以用console.time與 console.timeEnd來(lái)做此事。
這里借用官方文檔的例子：
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");當然，我們也可以選擇自己寫(xiě)代碼來(lái)計時(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);相信你也看到了，用內置的console.time是多么地方便，省去了自己寫(xiě)代碼來(lái)計算的工作量。另外值得一提的是，通過(guò)調用內置的console.time得到的結果要比自己手動(dòng)計算的時(shí)間差更精確可靠。
當想要查看CPU使用相關(guān)的信息時(shí)，可以使用console.profile配合 console.profileEnd來(lái)完成這個(gè)需求。
這一功能可以通過(guò)UI界面來(lái)完成，Chrome 開(kāi)發(fā)者工具里面有個(gè)tab便是Profile。
與此類(lèi)似的功能還有console.timeLine配合 console.timeLineEnd,它的作用是開(kāi)始記錄一段時(shí)間軸，同樣可以通過(guò)Chrome開(kāi)發(fā)者工具里的Timeline 標簽來(lái)進(jìn)行相應操作。
所以在我看來(lái)這兩個(gè)方法有點(diǎn)雞肋，因為都可以通過(guò)操作界面來(lái)完成。但至少他提供了一種命令行方式的交互，還是多了種姿勢供選擇吧。
堆棧跟蹤相關(guān)的調試可以使用console.trace。這個(gè)同樣可以通過(guò)UI界面完成。當代碼被打斷點(diǎn)后，可以在Call Stack面板中查看相關(guān)堆棧信息。
上面介紹的都是掛在window.console這個(gè)對象下面的方法，統稱(chēng)為Console API，接下來(lái)的這些方法確切地說(shuō)應該叫命令，是Chrome內置提供，在控制臺中使用的，他們統稱(chēng)為Command Line API。
似乎美刀總是被程序員及各種編程語(yǔ)言所青睞「你看看PHP代碼就知道PHPer有多愛(ài)錢(qián)了」，在Chrome的控制臺里，$用處還真是蠻多且方便的。$_命令返回最近一次表達式執行的結果，功能跟按向上的方向鍵再回車(chē)是一樣的，但它可以做為一個(gè)變量使用在你接下來(lái)的表達式中：
2+2//回車(chē)，再$_+1//回車(chē)得5上面的$_需要領(lǐng)悟其奧義才能使用得當，而$0~$4則代表了最近5個(gè)你選擇過(guò)的DOM節點(diǎn)。
什么意思？在頁(yè)面右擊選擇審查元素，然后在彈出來(lái)的DOM結點(diǎn)樹(shù)上面隨便點(diǎn)選，這些被點(diǎn)過(guò)的節點(diǎn)會(huì )被記錄下來(lái)，而$0會(huì )返回最近一次點(diǎn)選的DOM結點(diǎn)，以此類(lèi)推，$1返回的是上上次點(diǎn)選的DOM節點(diǎn)，最多保存了5個(gè)，如果不夠5個(gè)，則返回undefined。
另外值得一贊的是，Chrome 控制臺中原生支持類(lèi)jQuery的選擇器，也就是說(shuō)你可以用$加上熟悉的css選擇器來(lái)選擇DOM節點(diǎn)，多么滴熟悉。
$('body')$(selector)返回的是滿(mǎn)足選擇條件的首個(gè)DOM元素。
剝去她偽善的外衣，其實(shí)$(selector)是原生JavaScript document.querySelector() 的封裝。
同時(shí)另一個(gè)命令$$(selector)返回的是所有滿(mǎn)足選擇條件的元素的一個(gè)集合，是對document.querySelectorAll() 的封裝。
$$('div')通過(guò)此命令可以將在控制臺獲取到的內容復制到剪貼板。
copy(document.body)然后你就可以到處粘了：
看完此條命令行，機智的你是不是跟腦洞全開(kāi)的我一樣，冒出了這樣一個(gè)想法：那就是通過(guò)這個(gè)命令可以在JavaScript里進(jìn)行復制操作從而不用依賴(lài)Flash插件了。
But現實(shí)是殘酷的，如之前所述的，這里的控制臺命令只能在控制臺中環(huán)境中執行，因為他不依附于任何全局變量比如window，所以其實(shí)在JS代碼里是訪(fǎng)問(wèn)不了這個(gè)copy方法的，所以從代碼層面來(lái)調用復制功能也就無(wú)從談起。但愿有天瀏覽器會(huì )提供相應的JS實(shí)現吧~
這是一對基友。前者返回傳入對象所有屬性名組成的數據，后者返回所有屬性值組成的數組。具體請看下面的例子：
var tboy={name:'wayou',gender:'unknown',hobby:'opposite to the gender'};keys(tboy);values(tboy);monitor(function)，它接收一個(gè)函數名作為參數，比如function a,每次a被執行了，都會(huì )在控制臺輸出一條信息，里面包含了函數的名稱(chēng)a及執行時(shí)所傳入的參數。
而unmonitor(function)便是用來(lái)停止這一監聽(tīng)。
function sayHello(name){ alert('hello,'+name);}monitor(sayHello);sayHello('wayou');unmonitor(sayHello);sayHello('wayou');debug同樣也是接收一個(gè)函數名作為參數。當該函數執行時(shí)自動(dòng)斷下來(lái)以供調試，類(lèi)似于在該函數的入口處打了個(gè)斷點(diǎn)，可以通過(guò)debugger來(lái)做到，同時(shí)也可以通過(guò)在Chrome開(kāi)發(fā)者工具里找到相應源碼然后手動(dòng)打斷點(diǎn)。
而undebug 則是解除該斷點(diǎn)。
而其他還有好些命令則讓人沒(méi)有說(shuō)的欲望，因為好些都可以通過(guò)Chrome開(kāi)發(fā)者工具的UI界面來(lái)操作并且比用在控制臺輸入要方便。
大家都會(huì )用log，但鮮有人很好地利用console.error , console.warn 等將輸出到控制臺的信息進(jìn)行分類(lèi)整理。
他們功能區別不大，意義在于將輸出到控制臺的信息進(jìn)行歸類(lèi)，或者說(shuō)讓它們更語(yǔ)義化。
各個(gè)所代表的語(yǔ)義如下：
console.log：普通信息console.info：提示類(lèi)信息console.error：錯誤信息console.warn：警示信息當合理使用上述log方法后，可以很方便地在控制臺選擇查看特定類(lèi)型的信息。
console.log('一顆紅心向太陽(yáng)','吼吼~');console.info('樓上藥不能停！');console.warn('樓上嘴太賤！');console.error('樓上關(guān)你毛事？');如果再配合console.group 與console.groupEnd，可以將這種分類(lèi)管理的思想發(fā)揮到極致。這適合于在開(kāi)發(fā)一個(gè)規模很大模塊很多很復雜的Web APP時(shí)，將各自的log信息分組到以各自命名空間為名稱(chēng)的組里面。
console.group("app.foo");console.log("來(lái)自foo模塊的信息 blah blah blah...");console.groupEnd();console.group("app.bar");console.log("來(lái)自bar模塊的信息 blah blah blah...");console.groupEnd();而關(guān)于console.log，早已被玩兒壞了。一切都源于Chrome提供了這么一個(gè)API：第一個(gè)參數可以包含一些格式化的指令比如%c。
比如給hello world 做件漂亮的嫁衣再拉出來(lái)見(jiàn)人：
console.log('%chello world','font-size:25px;color:red;');如果你覺(jué)得不夠過(guò)癮，那就把你能寫(xiě)出來(lái)的最華麗的CSS樣式都應用上吧，比如漸變。于是你可以得到如下華麗麗的效果：
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;');各種招大招的節奏啊~
看著(zhù)上面密集的代碼不用驚慌，上面console.log()第二個(gè)參數全是純CSS用來(lái)控制樣式的，你不會(huì )陌生。而第一個(gè)參數里可以帶用百分號開(kāi)頭的轉義指令，如上面輸出帶樣式的文字時(shí)使用的%c指令。更詳細的指令參見(jiàn)官方API文檔的這個(gè)表格。
如果還不夠過(guò)癮，那咱們來(lái)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;");看著(zhù)上面搖擺的豆比兔是不是有種抽它一臉的沖動(dòng)。
除此，console.table 更是直接以表格的形式將數據輸出，不能贊得太多！
借用之前寫(xiě)過(guò)的一篇博文里的例子：
var data = [{'品名': '杜雷斯', '數量': 4}, {'品名': '岡本', '數量': 3}];console.table(data);另外，console.log() 接收不定參數，參數間用逗號分隔，最終會(huì )輸出會(huì )將它們以空白字符連接。
console.log('%c你好','color:red;','小明','你知道小紅被媽媽打了么');當你想代碼滿(mǎn)足某些條件時(shí)才輸出信息到控制臺，那么你大可不必寫(xiě)if或者三元表達式來(lái)達到目的，cosole.assert便是這樣場(chǎng)景下一種很好的工具，它會(huì )先對傳入的表達式進(jìn)行斷言，只有表達式為假時(shí)才輸出相應信息到控制臺。
var isDebug=false;console.assert(isDebug,'開(kāi)發(fā)中的log信息。。。');除了條件輸出的場(chǎng)景，還有常見(jiàn)的場(chǎng)景是計數。
當你想統計某段代碼執行了多少次時(shí)也大可不必自己去寫(xiě)相關(guān)邏輯，內置的console.count可以很地勝任這樣的任務(wù)。
function foo(){ //其他函數邏輯blah blah。。。 console.count('foo 被執行的次數：');}foo();foo();foo();將DOM結點(diǎn)以JavaScript對象的形式輸出到控制臺
而console.log是直接將該DOM結點(diǎn)以DOM樹(shù)的結構進(jìn)行輸出，與在元素審查時(shí)看到的結構是一致的。不同的展現形式，同樣的優(yōu)雅，各種體位任君選擇反正就是方便與體貼。
console.dir(document.body);console.log(document.body);輸出一些調試信息是控制臺最常用的功能，當然，它的功能遠不止于此。當做一些性能測試時(shí)，同樣可以在這里很方便地進(jìn)行。
比如需要考量一段代碼執行的耗時(shí)情況時(shí)，可以用console.time與 console.timeEnd來(lái)做此事。
這里借用官方文檔的例子：
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");當然，我們也可以選擇自己寫(xiě)代碼來(lái)計時(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);相信你也看到了，用內置的console.time是多么地方便，省去了自己寫(xiě)代碼來(lái)計算的工作量。另外值得一提的是，通過(guò)調用內置的console.time得到的結果要比自己手動(dòng)計算的時(shí)間差更精確可靠。
當想要查看CPU使用相關(guān)的信息時(shí)，可以使用console.profile配合 console.profileEnd來(lái)完成這個(gè)需求。
這一功能可以通過(guò)UI界面來(lái)完成，Chrome 開(kāi)發(fā)者工具里面有個(gè)tab便是Profile。
與此類(lèi)似的功能還有console.timeLine配合 console.timeLineEnd,它的作用是開(kāi)始記錄一段時(shí)間軸，同樣可以通過(guò)Chrome開(kāi)發(fā)者工具里的Timeline 標簽來(lái)進(jìn)行相應操作。
所以在我看來(lái)這兩個(gè)方法有點(diǎn)雞肋，因為都可以通過(guò)操作界面來(lái)完成。但至少他提供了一種命令行方式的交互，還是多了種姿勢供選擇吧。
堆棧跟蹤相關(guān)的調試可以使用console.trace。這個(gè)同樣可以通過(guò)UI界面完成。當代碼被打斷點(diǎn)后，可以在Call Stack面板中查看相關(guān)堆棧信息。
上面介紹的都是掛在window.console這個(gè)對象下面的方法，統稱(chēng)為Console API，接下來(lái)的這些方法確切地說(shuō)應該叫命令，是Chrome內置提供，在控制臺中使用的，他們統稱(chēng)為Command Line API。
似乎美刀總是被程序員及各種編程語(yǔ)言所青睞「你看看PHP代碼就知道PHPer有多愛(ài)錢(qián)了」，在Chrome的控制臺里，$用處還真是蠻多且方便的。$_命令返回最近一次表達式執行的結果，功能跟按向上的方向鍵再回車(chē)是一樣的，但它可以做為一個(gè)變量使用在你接下來(lái)的表達式中：
2+2//回車(chē)，再$_+1//回車(chē)得5上面的$_需要領(lǐng)悟其奧義才能使用得當，而$0~$4則代表了最近5個(gè)你選擇過(guò)的DOM節點(diǎn)。
什么意思？在頁(yè)面右擊選擇審查元素，然后在彈出來(lái)的DOM結點(diǎn)樹(shù)上面隨便點(diǎn)選，這些被點(diǎn)過(guò)的節點(diǎn)會(huì )被記錄下來(lái)，而$0會(huì )返回最近一次點(diǎn)選的DOM結點(diǎn)，以此類(lèi)推，$1返回的是上上次點(diǎn)選的DOM節點(diǎn)，最多保存了5個(gè)，如果不夠5個(gè)，則返回undefined。
另外值得一贊的是，Chrome 控制臺中原生支持類(lèi)jQuery的選擇器，也就是說(shuō)你可以用$加上熟悉的css選擇器來(lái)選擇DOM節點(diǎn)，多么滴熟悉。
$('body')$(selector)返回的是滿(mǎn)足選擇條件的首個(gè)DOM元素。
剝去她偽善的外衣，其實(shí)$(selector)是原生JavaScript document.querySelector() 的封裝。
同時(shí)另一個(gè)命令$$(selector)返回的是所有滿(mǎn)足選擇條件的元素的一個(gè)集合，是對document.querySelectorAll() 的封裝。
$$('div')通過(guò)此命令可以將在控制臺獲取到的內容復制到剪貼板。
copy(document.body)然后你就可以到處粘了：
看完此條命令行，機智的你是不是跟腦洞全開(kāi)的我一樣，冒出了這樣一個(gè)想法：那就是通過(guò)這個(gè)命令可以在JavaScript里進(jìn)行復制操作從而不用依賴(lài)Flash插件了。
But現實(shí)是殘酷的，如之前所述的，這里的控制臺命令只能在控制臺中環(huán)境中執行，因為他不依附于任何全局變量比如window，所以其實(shí)在JS代碼里是訪(fǎng)問(wèn)不了這個(gè)copy方法的，所以從代碼層面來(lái)調用復制功能也就無(wú)從談起。但愿有天瀏覽器會(huì )提供相應的JS實(shí)現吧~
這是一對基友。前者返回傳入對象所有屬性名組成的數據，后者返回所有屬性值組成的數組。具體請看下面的例子：
var tboy={name:'wayou',gender:'unknown',hobby:'opposite to the gender'};keys(tboy);values(tboy);monitor(function)，它接收一個(gè)函數名作為參數，比如function a,每次a被執行了，都會(huì )在控制臺輸出一條信息，里面包含了函數的名稱(chēng)a及執行時(shí)所傳入的參數。
而unmonitor(function)便是用來(lái)停止這一監聽(tīng)。
function sayHello(name){ alert('hello,'+name);}monitor(sayHello);sayHello('wayou');unmonitor(sayHello);sayHello('wayou');debug同樣也是接收一個(gè)函數名作為參數。當該函數執行時(shí)自動(dòng)斷下來(lái)以供調試，類(lèi)似于在該函數的入口處打了個(gè)斷點(diǎn)，可以通過(guò)debugger來(lái)做到，同時(shí)也可以通過(guò)在Chrome開(kāi)發(fā)者工具里找到相應源碼然后手動(dòng)打斷點(diǎn)。
而undebug 則是解除該斷點(diǎn)。
而其他還有好些命令則讓人沒(méi)有說(shuō)的欲望，因為好些都可以通過(guò)Chrome開(kāi)發(fā)者工具的UI界面來(lái)操作并且比用在控制臺輸入要方便。
聯(lián)系客服
