Console的用法，以及Debug技巧
目錄
1.背景介紹
2.知識剖析
3.常見問題
4.解決方案
5.編碼實戰(zhàn)
6.擴展思考
7.參考文獻
8.更多討論
一.背景介紹
什么是console？
Chrome 中 Console 是用于顯示 JS和 DOM 對象信息的單獨窗口。并且向 JS 中注入1個 console 對象，使用該對象 可以輸出信息到
? ? ? ? ? ? ? ? Console 窗口中。在具備調(diào)試功能的瀏覽器上，window 對象中會注冊一個名為 console 的成員變量，指代調(diào)試工具中的控制臺，console 有很多方法，比如我們最常用的log()
二.知識剖析
常用console方法
1. console.log( )
普通輸出方法，參數(shù)可以為任何對象。
常量? ? ? ? ? ? console.log("常量");
? ? ? ? 變量? ? ? ? ? ? console.log(name);
? ? ? ? 表達式? ? ? ? ? console.log("名字：" + name);
? ? ? ? 方法? ? ? ? ? ? console.log(document.getElementsByTagName("code"));
2. console.table()
可將傳入的對象，或數(shù)組以表格形式輸出，相比傳統(tǒng)樹形輸出，這種輸出方案更適合內(nèi)部元素排列整齊的對象或數(shù)組，不然可能會出現(xiàn)很多的 undefined。
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);
3.console.count([label])
輸出執(zhí)行到該行的次數(shù)例如：
(function() {
for (var i = 0; i < 5; i++) {
console.count('count');
}
})();
// count: 1
// count: 2
// count: 3
// count: 4
// count: 5
4.console.time(name)
計時器，可以將成對的console.time()和console.timeEnd()之間代碼的運行時間輸出到控制臺上，name參數(shù)可作為標簽名。
console.time('計時器');
for (var i = 0; i < 1000; i++) {
for (var j = 0; j < 1000; j++) {}
}
console.timeEnd('計時器');
5.console.profile([profileLabel])
這是個挺高大上的東西，可用于性能分析。在 JS
? ? ? ? ? ? ? ? 開發(fā)中，我們常常要評估段代碼或是某個函數(shù)的性能。在函數(shù)中手動打印時間固然可以，但顯得不夠靈活而且有誤差。借助控制臺以及console.profile()方法我們可以很方便地監(jiān)控運行性能。
例如下面這段代碼：
function parent() {
for (var i = 0; i < 10000; i++) {
childA()
}
}
function childA(j) {
for (var i = 0; i < j; i++) {}
}
console.profile('性能分析');
parent();
console.profileEnd();
然后我們可以在 Profiles 面板下看到上述代碼運行過程中的消耗時間。
頁面加載過程的性能優(yōu)化是前端開發(fā)的一個重要部分，使用控制臺的 profiles 面板可以監(jiān)控所有 JS 的運行情況使用方法就像錄像機一樣，控制臺會把運行過程錄制下來。如圖，工具欄上有錄制和停止按鈕。
6. 其他方法
. 清除控制臺 clear()
. 將對象及子元素以目錄樹列出來 console.dir()
. 條件打?。〝嘌裕ヽonsole.assert()
3.常見問題
常用調(diào)試方法
4.解決方案
1. 斷點調(diào)試
斷點調(diào)試是最基礎(chǔ)的一個調(diào)試方法，在調(diào)試的過程中查看變量和函數(shù)的變化狀態(tài)，這使得不可見的程序運行過程變得可視化。
? ? ? ? ? ? ? ? 斷點調(diào)試都在source選項卡中進行，所以放在下面一起來討論。
2. sources 選項卡
a.
? ? ? ? ? ? 上圖source選項代碼序列上的藍色標簽即為斷點的標識，斷點也顯示在Breakpoint選項中，可以在Breakpoint選項卡中勾掉暫時不用的斷點，后面再使用的時候可以再勾選，這樣就不用再代碼中翻來翻去迷失方向了。
b.
? ? ? ? ? ? 這幾個小圖標前兩個和調(diào)試時頁面的兩個按鈕相同，
? ? ? ? ? ? 分別是暫停/開始和單步；往右邊兩個向上向下的箭頭意思是進入函數(shù)，和（執(zhí)行完）跳出函數(shù)；后面的一個是忽略所有斷點運行，這樣被避免更改完之后，點掉所有斷點執(zhí)行一遍在挨個加斷點的尷尬。
c. watch窗口：
? ? ? ? ? ? 點擊“+”添加一個想要監(jiān)視的變量，在整個調(diào)試過程中，這個變量會一直顯示在這里，就不用在函數(shù)之間苦苦尋找，然后再“hover”上去顯示它的值，非常適合全局變量的監(jiān)視。
5.編碼實戰(zhàn)
6.擴展思考
為什么不提倡用alert進行調(diào)試？
一方面，傳統(tǒng)的alert調(diào)試方式已經(jīng)漸漸不能滿足前端開發(fā)的種種場景。而且alert調(diào)試方式彈出的調(diào)試信息，那個窗口著實不太美觀，而且會遮擋部分頁面內(nèi)容，著實有些不太友好。
另一方面，alert的調(diào)試信息會中斷代碼，阻礙頁面的繼續(xù)渲染。這就意味著開發(fā)人員調(diào)試完成后，必須手動清除這些調(diào)試代碼，實在有些麻煩。
另外，如果在循環(huán)中使用alert，光關(guān)閉彈出的窗口就夠自己累的了，哈哈！
7.參考文獻
參考一：你真的了解console嗎
參考三：
? ? ? ? ? ? ? ? Developers官網(wǎng)
參考三：CSDN中文IT網(wǎng)
8.更多討論
大家在調(diào)試程序中有什么比較好的方法分享一下？
鳴謝
感謝大家觀看
今天的分享就到這里啦，歡迎大家點贊、轉(zhuǎn)發(fā)、留言、拍磚~
技能樹.IT修真院???
? “我們相信人人都可以成為一個工程師，現(xiàn)在開始，找個師兄，帶你入門，掌控自己學(xué)習的節(jié)奏，學(xué)習的路上不再迷?！?。
? ?這里是技能樹.IT修真院，成千上萬的師兄在這里找到了自己的學(xué)習路線，學(xué)習透明化，成長可見化，師兄1對1免費指導(dǎo)。
? ?快來與我一起學(xué)習吧~http://www.jnshu.com/login/1/21109035
