===============
1 問題
Console是什么愈腾？
console是什么
Console 對象用于 JavaScript 調(diào)試蔬浙。
JavaScript 原生中默認是沒有 Console
對象,這是宿主對象（也就是游覽器）提供的內(nèi)置對象。 用于訪問調(diào)試控制臺,
在不同的瀏覽器里效果可能不同誊爹。
console知識點
控制臺輸入console蹬刷，然后就可看到：
01．基礎(chǔ)用法——console.log()
打印一段文本
console.log('Is this working?');
打印對象
const foo = { id: 1, verified: true, color: 'green' };
const bar = { id: 2, verified: false, color: 'red' };
接著我們看控制臺的輸出展現(xiàn)：
從圖中我們看出，無法看出對應(yīng)的變量名频丘；如果想讓兩個對象一起輸出办成，我們可以使用console.log({
foo, bar
})，由于一行內(nèi)容顯示有限搂漠，對象內(nèi)容部分進行了省略迂卢，我們必須點擊左邊的小箭頭看更詳細的內(nèi)容，如下圖所示：
02. **console.info **用于輸出提示性信息
03．console.error()用于輸出錯誤信息
04.console.warn() 用于輸出錯誤信息
一些特別的信息我們需要特別強調(diào)醒目的輸出出來桐汤，比如警告和錯誤信息而克，你可以使用console.warn()
& console.error()，輸出的展示形式如下圖所示怔毛，是不是更醒目：
你還可以更進一步员萍，自定義打印輸出的樣式，你可以使用**%c **語法拣度。你可以使用這個方法更好的區(qū)分定義來源你的哪個API調(diào)用充活，用戶事件，示例如下：
console.log('%c Auth ',
'color: white; background-color: #2274A5',
'登錄驗證通過');
console.log('%c GraphQL ',
'color: white; background-color: #95B46A',
'獲取用戶信息');
console.log('%c Error ',
'color: white; background-color: #D33F49',
'獲取用戶信息失敗');
05.console.debug用于輸出調(diào)試信息
console對象的上面5種方法，都可以使用printf風格的占位符。不過塘淑，占位符的種類比較少刹勃，只支持字符（%s）、整數(shù)（%d或%i）、浮點數(shù)（%f）和對象（%o）四種。
console.log("%d年%d月%d日",2011,3,26);
console.log("圓周率是%f",3.1415926);
%o占位符焦匈，可以用來查看一個對象內(nèi)部情況
var dog = {};
dog.name = "大毛";
dog.color = "黃色";
console.log("%o", dog);
06．console.dir()
console.dir()可以直觀展示一個對象的所有屬性和方法赘淮，示例代碼如下：
(這個方法是我經(jīng)常使用的 可不知道比for
in方便了多少)直接將該DOM結(jié)點以DOM樹的結(jié)構(gòu)進行輸出辕录，可以詳細查對象的方法發(fā)展等等
function cat(name, age, score){
this.name = name;
this.age = age;
this.score = score;
}
var c = new cat("miao", 2, [6,8,7]);
console.dir(c);
07．console.dirxml用來顯示網(wǎng)頁的某個節(jié)點（node）所包含的html/xml代碼
08．console.group() 輸出一組信息的開頭
有時候，為了方便分析梢卸，你需要將一些對象變量等信息進行分組打印輸出走诞，示例如下：
console.group('User Details');
console.log('name: John Doe');
console.log('job: Software Developer');
// Nested Group
console.group('Address');
console.log('Street: 123 Townsend Street');
console.log('City: San Francisco');
console.log('State: CA');
console.groupEnd();
console.groupEnd();
09.console.groupEnd結(jié)束一組輸出信息
看你需求選擇不同的輸出方法來使用，如果上述四個方法再配合group和groupEnd方法來一起使用就可以輸入各種各樣的不同形式的輸出信息蛤高。
10.console.assert對輸入的表達式進行斷言蚣旱，只有表達式為false時，才輸出相應(yīng)的信息到控制臺
11.console.count（這個方法非常實用哦）當你想統(tǒng)計代碼被執(zhí)行的次數(shù)
假如你在寫一個React應(yīng)用戴陡，然后你想要知道某個組件渲染的次數(shù)塞绿，你會怎么做？去查看源代碼恤批，然后一個一個數(shù)异吻？這真的是太麻煩了。你可以用console.count(“Counter”)來查詢渲染次數(shù)喜庞，我們還有一個相應(yīng)的函數(shù)來清零計數(shù)器：console.countReset（'Counter'）
12．console.time()诀浪，console.timeEnd 計時結(jié)束（看了下面的圖你瞬間就感受到它的厲害了）
console.time()啟動一個計時器，并用timeEnd()結(jié)束計時延都，它們一般用于性能檢查時雷猪。你也可以將一個字符串傳遞給time和timeEnd，它將啟動名稱為該字符串的計時器窄潭。
我們在開發(fā)過程中，經(jīng)常需要知道一個方法運行了多長時間酵颁，方便我們做出修改完善的判斷嫉你，我們可以使用console.time()，示例如下：
let i = 0;
console.time("While loop");
while (i < 1000000) {
i++;
}
console.timeEnd("While loop");
console.time("For loop");
for (i = 0; i < 1000000; i++) {
// For Loop
}
console.timeEnd("For loop");
13.console.profile和console.profileEnd配合一起使用來查看CPU使用相關(guān)信息
在Profiles面板里面查看就可以看到cpu相關(guān)使用信息
14.console.timeLine和console.timeLineEnd配合一起記錄一段時間軸
15．console.trace()
console.trace()方法用于顯示當前執(zhí)行的代碼在堆棧中的調(diào)用路徑躏惋。如下段代碼所示幽污，在控制臺里清晰了展示了add()的調(diào)用軌跡
function add(a,b){
console.trace();
return a+b;
}
function add3(a,b){return add2(a,b);}
function add2(a,b){return add1(a,b);}
function add1(a,b){return add(a,b);}
var x = add3(1,1);
16.console.table()
它打印出一個可交互的表格，而您僅需傳入一個對象數(shù)組簿姨。
為了增加輸出的可讀性距误，我們可以使用console.table()讓其通過表格的形式進行展示，比如我們在控制臺輸出console.table({
foo, bar})扁位，如下圖所示：
17. console.clear()
實現(xiàn)清空控制臺信息准潭。如下圖所示
現(xiàn)在假設(shè)一個場景，如果一個數(shù)組里面有成百上千的元素域仇，但是你想知道每個元
使用Console有什么好處【優(yōu)點】刑然？
console和alert對比。
| 對比 | console.log | alert |
|---|---|---|
| 是否能看到內(nèi)部結(jié)構(gòu) | console能看到結(jié)構(gòu)話的東西暇务，console能看到對象的內(nèi)容泼掠。 | 彈出一個對象就是[object object], |
| 是否打斷頁面 | 不會打斷你頁面的操作怔软，輸出內(nèi)容后你頁面還可以正常操作 | 彈出來內(nèi)容，那么頁面就死了 |
| 優(yōu)點 | 方便你調(diào)式j(luò)avascript用的择镇。 |
3）使用Console有什么壞處【缺點】挡逼？
調(diào)用Console畢竟是調(diào)用了函數(shù)，多少會影響系統(tǒng)性能腻豌，所以在發(fā)布版本中盡量把Console注釋掉家坎。
利用一下函數(shù)可以分析具體調(diào)用多少時間。console.time來測試
console.time('console');
console.log('test');
console.timeEnd('console');
Console使用場景饲梭？
Console 對象常見的兩個用途：
顯示網(wǎng)頁代碼運行時的錯誤信息乘盖。
提供了一個命令行接口，用來與網(wǎng)頁代碼互動憔涉。
（1）利用控制臺輸出圖片
（2）重寫console.log 改變輸出文字的樣式
（3）指定輸出文字的樣式
5）console.log()打印輸出臺不顯示輸出內(nèi)容
瀏覽器console.log()打印輸出臺不顯示輸出內(nèi)容的原因應(yīng)該很多订框，如網(wǎng)絡(luò)上所說：console.log()被重新定義等等原因（需要驗證真實性？）都可能導致console.log()打印不能顯示打印信息兜叨。
今天穿扳，在測試screen.availWidth的時候就出現(xiàn)了console.log()打印臺始終無法打印出內(nèi)容的局面。困惑了半天后国旷，終于找到了具體的原因矛物。并且看到這個原因的時候，真TM想給自己兩耳光跪但，或者直接來個冷水沖頭履羞，清醒清醒。
html/CSS/JavaScript代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>screen</title>
</head>
<body>
<script type="text/javascript">
alert("123");
console.log("123");
console.log("頁面寬度為 "+screen.availWidth);
console.log("頁面高度為 "+screen.availHeight);
</script>
</body>
</html>
遇到控制臺console.log()無法打印的情況
1.首先應(yīng)該排查default.levels屡久。
我們首先應(yīng)該排查default.levels忆首。一般沒有內(nèi)容顯示，就必須查看default.levels下的info是否勾選被环。實在不會糙及，直接點擊default.levels下的default選項；
這是比較常見原因和解決方案筛欢。
今天七仔在選定default的時候同樣無法獲得console.log()的打印內(nèi)容浸锨，又是怎么一回事呢？
2.檢查default.levels前面輸入框中是否有填寫內(nèi)容
注意版姑，一定要檢查default.levels前面輸入框中是否有填寫內(nèi)容柱搜，默認為Filter；七仔則是在Filter中填寫了一串數(shù)字剥险。Filter冯凹，單詞意思，“過濾”“過濾器”……意思就是在控制臺中查找自己需要的信息。并且宇姚，filter中的內(nèi)容匈庭，即便是在關(guān)閉瀏覽器的前提下，也不會消失浑劳。大家一定要謹慎對待阱持。
