一、 背景介紹
Chrome 中 Console 是用于顯示 JS和 DOM 對象信息的單獨(dú)窗口渡处。并且向 JS 中注入1個 console 對象，使用該對象 可以輸出信息到 Console 窗口中祟辟。在具備調(diào)試功能的瀏覽器上医瘫，window 對象中會注冊一個名為 console 的成員變量，指代調(diào)試工具中的控制臺旧困，console 有很多方法登下，比如我們最常用的log()。
二叮喳、知識剖析：常用CONSOLE方法
-
console.log(),普通打印方法； -
console.table()將函數(shù)和數(shù)組一表格的形式打印出來缰贝； -
console.trace()將傳入的對象馍悟，或數(shù)組以表格形式輸出.
案例分析
-
console.log()：
常亮 console.log("常量");
變量 console.log(name);
表達(dá)式 console.log("名字：" + name);
方法 console.log(document.getElementsByTagName("code"));
很常用，打印的結(jié)果就不多說了剩晴。
-
console.table():
var obj = {
fun: {
name: 'foo',
age: '18'
},
bar: {
name: 'bar',
age: '19'
}
};
var arr = [
['fun', '18'],
['bar', '19']
];
console.log(obj);
console.table(obj);
console.log(arr);
console.table(arr);
打印出的結(jié)果如下：
console.table(obj)打印的是obj對象锣咒，其中兩個對象的樹行分別被按順序打印出來，形成一個表格赞弥，方便篩選數(shù)據(jù)毅整。（點(diǎn)擊頂欄的index name age，都可以實(shí)現(xiàn)按順序排列）绽左；console.table(arr)打印的也大同小異悼嫉，因?yàn)閿?shù)組本身就是一個對象，只是數(shù)組里面的數(shù)組（對象）名稱為數(shù)組的索引而已拼窥。
-
console.trace()：
function traceEnd(i) {
console.log(i);
console.trace();
}
function thirdTrace(i) {
traceEnd(++i);
}
function secondTrace(i) {
thirdTrace(++i);
}
function traceBegin(i){
secondTrace(++i);
}
function fun3() {
var i = 0;
traceBegin(i);
}
這個demo 中四個函數(shù)依次調(diào)用戏蔑，在最后一個函數(shù)traceEnd()中添加console.trace()方法，即可以打印出函數(shù)的調(diào)用鏈鲁纠，打印的結(jié)果為:
demo.html:202 console.trace
traceEnd @ demo.html:202
thirdTrace @ demo.html:206
secondTrace @ demo.html:210
traceBegin @ demo.html:214
fun3 @ demo.html:219
onclick @ demo.html:128
由于我們使用的是onclick()函數(shù)調(diào)用fun4()然后一次調(diào)用总棵，所以總共返回6個函數(shù)。
console.trace()的遍歷之處在于改含，當(dāng)項(xiàng)目足夠復(fù)雜情龄，函數(shù)之間的調(diào)用連自己都記不清楚的時候，很難發(fā)現(xiàn)那個調(diào)用出現(xiàn)問題，通過trace()方法返回調(diào)用函數(shù)之后就可以按照調(diào)用去排查骤视。非常方便鞍爱。
- 其他方法：
. 清除控制臺clear()
. 將對象及子元素以目錄樹列出來console.dir()
. 條件打印（斷言）console.assert()
三尚胞、常用debug方法
斷點(diǎn)調(diào)試
斷點(diǎn)調(diào)試時最基礎(chǔ)的一個調(diào)試方法硬霍，在調(diào)試的過程中查看變量和函數(shù)的變化狀態(tài)，這使得不可見的程序運(yùn)行過程變得可視化笼裳。
斷點(diǎn)調(diào)試都在source選項(xiàng)卡中進(jìn)行唯卖，所以放在下面一起來討論。-
source選項(xiàng)卡：
除了網(wǎng)絡(luò)和DOM大部分的js調(diào)試都在source選項(xiàng)卡中進(jìn)行躬柬。
a. 上圖source選項(xiàng)代碼序列上的藍(lán)色標(biāo)簽即為斷點(diǎn)的標(biāo)識拜轨，斷點(diǎn)也顯示在Breakpoint選項(xiàng)中，可以在Breakpoint選項(xiàng)卡中勾掉暫時不用的斷點(diǎn)允青，后面再使用的時候可以再勾選橄碾，這樣就不用再代碼中翻來翻去迷失方向了。
b.
這幾個小圖標(biāo)前兩個和調(diào)試時頁面的兩個按鈕相同颠锉， 分別是暫停/開始和單步法牲；往右邊兩個向上向下的箭頭意思是進(jìn)入函數(shù)，和（執(zhí)行完）跳出函數(shù)琼掠；后面的一個是忽略所有斷點(diǎn)運(yùn)行拒垃，這樣被避免更改完之后，點(diǎn)掉所有斷點(diǎn)執(zhí)行一遍在挨個加斷點(diǎn)的尷尬。
c. watch窗口：
點(diǎn)擊“+”添加一個想要監(jiān)視的變量，在整個調(diào)試過程中笛钝，這個變量會一直顯示在這里，就不用在函數(shù)之間苦苦尋找横堡，然后再“hover”上去顯示它的值，非常適合全局變量的監(jiān)視冠桃。
d. Call Stack窗口：
這個就是堆棧窗口命贴，顯示當(dāng)前堆棧中的內(nèi)容，一般為函數(shù)調(diào)用和對象食听。這里可以查看想要調(diào)用的函數(shù)是否被掉用套么。在被調(diào)用函數(shù)中打一個斷點(diǎn)，Call stack窗口就就會顯示當(dāng)前堆棧中的函數(shù)碳蛋，調(diào)用函數(shù)在下面胚泌，被調(diào)用函數(shù)在上面，用藍(lán)色圓點(diǎn)標(biāo)記肃弟。
四玷室、參考文獻(xiàn)
你真的了解 console 嗎：
https://segmentfault.com/a/1190000000481884
Chrome開發(fā)者工具不完全指南
http://web.jobbole.com/82562/
最全面的JavaScript調(diào)試技巧總結(jié)
http://ms.csdn.net/geek/67969?hmsr=toutiao.io&utm_medium=toutiao.io&utm_source=toutiao.io
更多討論：
- 手機(jī)端調(diào)試只能使用
alert()嗎零蓉？
聽起來好像是這樣的，手機(jī)端沒有console穷缤，貌似只能通過alert來調(diào)試敌蜂，實(shí)際上還是有方法的：使用工具 m-console具體方法參考：
https://segmentfault.com/a/1190000005173779 - 如何查看一段js代碼執(zhí)行的時間？
比較坑的一個方法是：
function test(func){
var start = new Date().getTime();//起始時間
func();//執(zhí)行待測函數(shù)
var end = new Date().getTime();//接受時間
return (end - start)+"ms";//返回函數(shù)執(zhí)行需要時間
}
其實(shí)不坑津肛，可以用章喉。
另一個一個方法是查看開發(fā)工具中的timeline選項(xiàng)卡，可是我的瀏覽器中怎么找不到這個選項(xiàng)卡身坐，大家可以看看自己的有沒有這個選項(xiàng)卡秸脱。
