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

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

console.log

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

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

當合理使用上述log方法后奶栖，可以很方便地在控制臺選擇查看特定類型的信息袍镀。

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

如果再配合console.group與console.groupEnd歼捏，可以將這種分類管理的思想發(fā)揮到極致瞳秽。這適合于在開發(fā)一個規(guī)模很大模塊很多很復雜的Web APP時练俐，將各自的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();

而關于console.log丘喻，早已被玩兒壞了。一切都源于Chrome提供了這么一個API：第一個參數(shù)可以包含一些格式化的指令比如%c榴芳。
比如給hello world做件漂亮的嫁衣再拉出來見人：

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

如果你覺得不夠過癮窟感，那就把你能寫出來的最華麗的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;');

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

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

如果還不夠過癮被啼，那咱們來log一些圖片吧浓体，甚至命浴。。碍讯。動圖捉兴？對，你得先有圖禾乘，我們拿[這張圖]
(http://wayou.github.io/2014/09/10/chrome-console-tips-and-tricks/rabbit.gif)為例。

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;");

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

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

console.assert

當你想代碼滿足某些條件時才輸出信息到控制臺隔崎，那么你大可不必寫if或者三元表達式來達到目的，cosole.assert
便是這樣場景下一種很好的工具撵彻，它會先對傳入的表達式進行斷言轴合，只有表達式為假時才輸出相應信息到控制臺受葛。
var isDebug=false;console.assert(isDebug,'開發(fā)中的log信息总滩。闰渔。冈涧。');

console.count

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

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

console.dir

將DOM結點以JavaScript對象的形式輸出到控制臺而console.log是直接將該DOM結點以DOM樹的結構進行輸出假哎，與在元素審查時看到的結構是一致的舵抹。不同的展現(xiàn)形式扇救，同樣的優(yōu)雅迅腔，各種體位任君選擇反正就是方便與體貼钾挟。

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

console.time & console.timeEnd

輸出一些調(diào)試信息是控制臺最常用的功能掺出，當然，它的功能遠不止于此百框。當做一些性能測試時柬泽，同樣可以在這里很方便地進行锨并。比如需要考量一段代碼執(zhí)行的耗時情況時第煮，可以用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");

當然，我們也可以選擇自己寫代碼來計時：

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.profile & console.timeLime

當想要查看CPU使用相關的信息時嫌套，可以使用console.profile配合 console.profileEnd來完成這個需求踱讨。這一功能可以通過UI界面來完成痹筛，Chrome 開發(fā)者工具里面有個tab便是Profile帚稠。與此類似的功能還有console.timeLine配合 console.timeLineEnd,它的作用是開始記錄一段時間軸，同樣可以通過Chrome開發(fā)者工具里的Timeline 標簽來進行相應操作馆衔。所以在我看來這兩個方法有點雞肋角溃，因為都可以通過操作界面來完成减细。但至少他提供了一種命令行方式的交互未蝌，還是多了種姿勢供選擇吧左冬。

console.trace

堆棧跟蹤相關的調(diào)試可以使用console.trace拇砰。這個同樣可以通過UI界面完成除破。當代碼被打斷點后瑰枫，可以在Call Stack面板中查看相關堆棧信息光坝。上面介紹的都是掛在window.console
這個對象下面的方法，統(tǒng)稱為Console API土铺，接下來的這些方法確切地說應該叫命令悲敷，是Chrome內(nèi)置提供后德，在控制臺中使用的瓢湃，他們統(tǒng)稱為Command Line API绵患。

$

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

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

$('body')

$$('div')

copy

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

copy(document.body)

然后你就可以到處粘了：

keys & values

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

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

monitor & unmonitor

monitor(function)李根，它接收一個函數(shù)名作為參數(shù)，比如function a,每次a被執(zhí)行了冀续，都會在控制臺輸出一條信息洪唐，里面包含了函數(shù)的名稱a及執(zhí)行時所傳入的參數(shù)凭需。而unmonitor(function)便是用來停止這一監(jiān)聽粒蜈。

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

debug & undebug

debug同樣也是接收一個函數(shù)名作為參數(shù)。當該函數(shù)執(zhí)行時自動斷下來以供調(diào)試度硝，類似于在該函數(shù)的入口處打了個斷點蕊程，可以通過debugger來做到，同時也可以通過在Chrome開發(fā)者工具里找到相應源碼然后手動打斷點捌治。而undebug
則是解除該斷點肖油。
而其他還有好些命令則讓人沒有說的欲望森枪，因為好些都可以通過Chrome開發(fā)者工具的UI界面來操作并且比用在控制臺輸入要方便县袱。

REFERENCE

Styled console logging in the Chrome DevTools (Canary)
Chrome Console API
Chrome Console Command Line API

轉載自:劉哇勇的部落格