大家好缀旁，我是IT修真院鄭州分院第6期的學(xué)員王棟记劈，一枚正直、純潔并巍、善良的前端程序員今天給大家分享一下目木，修真院官網(wǎng)js任務(wù)1，深度思考中的知識(shí)點(diǎn)——F12Console的用法懊渡，以及如何Debug程序刽射。
1.背景介紹
什么是console剃执？
Console 是用于顯示 JS和 DOM 對(duì)象信息的單獨(dú)窗口誓禁。
并且向 JS 中注入1個(gè) console 對(duì)象，使用該對(duì)象 可以輸出信息到 Console 窗口中肾档。
Chrome和FireFox都支持console摹恰。
控制臺(tái)以及瀏覽器內(nèi)置Console對(duì)象的出現(xiàn)，給前端開(kāi)發(fā)調(diào)試帶來(lái)了極大的便利怒见。
2.知識(shí)剖析
console的用法
console.log 用于輸出普通信息
console.info 用于輸出提示性信息
console.error用于輸出錯(cuò)誤信息
console.warn用于輸出警示信息
console.groupEnd結(jié)束一組輸出信息
console.assert對(duì)輸入的表達(dá)式進(jìn)行斷言戒祠，只有表達(dá)式為false時(shí)，才輸出相應(yīng)的信息到控制臺(tái)速种。
console.count當(dāng)你想統(tǒng)計(jì)代碼被執(zhí)行的次數(shù)(經(jīng)常用到)
console.dir 直接將該DOM結(jié)點(diǎn)以DOM樹(shù)的結(jié)構(gòu)進(jìn)行輸出，可以詳細(xì)查對(duì)象的方法發(fā)展等等低千。
console.time/console.timeEnd用于函數(shù)的計(jì)時(shí)
console.table 將傳入的值以表格形式展示
如何使用斷點(diǎn)調(diào)試配阵？
Pause/Resume script execution：暫停/恢復(fù)腳本執(zhí)行（程序執(zhí)行到下一斷點(diǎn)停止）馏颂。
Step over next function call：執(zhí)行到下一步的函數(shù)調(diào)用（跳到下一行）。
Step into next function call：進(jìn)入當(dāng)前函數(shù)棋傍。
? Step out of current function：跳出當(dāng)前執(zhí)行函數(shù)救拉。
Deactive/Active all breakpoints：關(guān)閉/開(kāi)啟所有斷點(diǎn)（不會(huì)取消）。
Pause on exceptions：異常情況自動(dòng)斷點(diǎn)設(shè)置瘫拣。
3.常見(jiàn)問(wèn)題
什么是斷點(diǎn)調(diào)試亿絮？
如何Debug？
4.解決方案
什么是斷點(diǎn)調(diào)試
斷點(diǎn)麸拄，調(diào)試器的功能之一派昧，可以讓程序中斷在需要的地方，從而方便其分析拢切。也可以在一次調(diào)試中設(shè)置斷點(diǎn)蒂萎，
下一次只需讓程序自動(dòng)運(yùn)行到設(shè)置斷點(diǎn)位置，便可在上次設(shè)置斷點(diǎn)的位置中斷下來(lái)淮椰，
極大的方便了操作五慈，同時(shí)節(jié)省了時(shí)間。
——百度百科
簡(jiǎn)單地說(shuō)主穗，斷點(diǎn)調(diào)試是指自己在程序的某一行設(shè)置一個(gè)斷點(diǎn)泻拦，調(diào)試時(shí)，程序運(yùn)行到這一行就會(huì)停住忽媒，然后你可以一步一步往下調(diào)試争拐，調(diào)試過(guò)程中可以看各個(gè)變量當(dāng)前的值，出錯(cuò)的話(huà)猾浦，調(diào)試到出錯(cuò)的代碼行即顯示錯(cuò)誤陆错，停下。
如何Debug金赦？
使用cosole.log
使用斷點(diǎn)調(diào)試
5.編碼實(shí)戰(zhàn)
console.log("%c", "padding:200px 300px;line-height:120px;" +
"background:url('http://img.zcool.cn/community/012d6b573bc18d6ac7253f9adca1fd.gif') no-repeat;");
console.error("error");
console.warn("warn")
var data = [{'品名': '面包', '數(shù)量': 4}, {'品名': '牛奶', '數(shù)量': 3}];
console.table(data);
(function() {for (var i = 0; i < 5; i++) {console.count('count');}})();
console.time('計(jì)時(shí)器1');
for (var i = 0;i < 100; i++) {for (var j = 0; j < 100; j++) {}}
console.timeEnd('計(jì)時(shí)器1');
console.time('計(jì)時(shí)器2');
for (var i = 0; i < 1000; i++) {for (var j = 0; j < 1000; j++) {}};console.timeEnd('計(jì)時(shí)器2');
console.log('這是第一層');console.group();console.log('這是第二層');console.log('依然第二層');console.group();console.log('第三層了');console.groupEnd();console.log('回到第二層');
console.groupEnd();console.log('回到第一層');console.groupCollapsed('第一層');console.groupCollapsed('第二層');console.log('error');console.error('error');console.warn('error');console.groupEnd();
console.groupEnd();var obj = {name: 'c';age: '20',type: '1'};
console.dir(obj);
var arr = [1,2,3]
console.dir(arr)
var s = 'sdfs'
console.dir(s)
var n = '123'
console.dir(n)
6.擴(kuò)展思考
為什么不用alert音瓷？（console的優(yōu)點(diǎn)）
用alert調(diào)試方式對(duì)開(kāi)發(fā)者太不友好；每次執(zhí)行結(jié)束都需要點(diǎn)擊一次彈窗夹抗；
而且有時(shí)候彈窗會(huì)遮住一些頁(yè)面效果
alert的調(diào)試信息會(huì)中斷代碼绳慎，阻礙頁(yè)面的繼續(xù)渲染。這就意味著開(kāi)發(fā)人員調(diào)試完成后漠烧，必須手動(dòng)清除這些調(diào)試代碼杏愤，實(shí)在有些麻煩。
另外已脓，如果在循環(huán)中使用alert珊楼，會(huì)彈出很多個(gè)窗口
7.參考文獻(xiàn)
前端開(kāi)發(fā)中的JS調(diào)試技巧
http://blog.csdn.net/yin767833376/article/details/51656402
你真的了解 console 嗎
https://segmentfault.com/a/1190000000481884
超完整的 Chrome 瀏覽器客戶(hù)端調(diào)試大全
http://web.jobbole.com/89344/?utm_source=blog.jobbole.com&utm_medium=relatedPosts
chrome developer tool—— 斷點(diǎn)調(diào)試篇
https://www.cnblogs.com/yzg1/p/5578363.html
8.更多討論
還有那些debug技巧？
使用sources里面的
這個(gè)面板度液，也可以幫助快速debug厕宗。
更多問(wèn)題1：如何在控制臺(tái)進(jìn)行代碼格式化画舌？
在sources面板選中需要格式化的js文件，然后點(diǎn)擊pretty print已慢。
更多問(wèn)題2：alert的更多缺點(diǎn)曲聂？
1）.alert()是一種破壞性的方法，執(zhí)行的時(shí)候彈出彈窗之后的代碼就不會(huì)執(zhí)行佑惠。
2）.alert()還有一個(gè)缺點(diǎn)就是會(huì)將參數(shù)message轉(zhuǎn)換為字符串朋腋。改變?cè)畔⒏袷健?/p>
更多問(wèn)題3：console和打斷點(diǎn)哪個(gè)更好用？
各有特長(zhǎng)吧膜楷，如果你要驗(yàn)證一個(gè)特定的函數(shù)旭咽，是不是自己想要的效果，就用console把将，如果不確定頁(yè)面的問(wèn)題出在哪兒轻专，就用斷點(diǎn)調(diào)試。
