===============
1 問題
Console是什么？
console是什么
Console 對象用于 JavaScript 調(diào)試。
JavaScript 原生中默認(rèn)是沒有 Console
對象,這是宿主對象（也就是游覽器）提供的內(nèi)置對象。 用于訪問調(diào)試控制臺,
在不同的瀏覽器里效果可能不同。
console知識點(diǎn)
控制臺輸入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)的變量名；如果想讓兩個(gè)對象一起輸出，我們可以使用console.log({
foo, bar
})，由于一行內(nèi)容顯示有限，對象內(nèi)容部分進(jìn)行了省略，我們必須點(diǎn)擊左邊的小箭頭看更詳細(xì)的內(nèi)容，如下圖所示：
02. **console.info **用于輸出提示性信息
03．console.error()用于輸出錯(cuò)誤信息
04.console.warn() 用于輸出錯(cuò)誤信息
一些特別的信息我們需要特別強(qiáng)調(diào)醒目的輸出出來，比如警告和錯(cuò)誤信息，你可以使用console.warn()
& console.error()，輸出的展示形式如下圖所示，是不是更醒目：
你還可以更進(jìn)一步，自定義打印輸出的樣式，你可以使用**%c **語法。你可以使用這個(gè)方法更好的區(qū)分定義來源你的哪個(gè)API調(diào)用，用戶事件，示例如下：
console.log('%c Auth ',
'color: white; background-color: #2274A5',
'登錄驗(yàn)證通過');
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風(fēng)格的占位符。不過，占位符的種類比較少，只支持字符（%s）、整數(shù)（%d或%i）、浮點(diǎn)數(shù)（%f）和對象（%o）四種。
console.log("%d年%d月%d日",2011,3,26);
console.log("圓周率是%f",3.1415926);
%o占位符，可以用來查看一個(gè)對象內(nèi)部情況
var dog = {};
dog.name = "大毛";
dog.color = "黃色";
console.log("%o", dog);
06．console.dir()
console.dir()可以直觀展示一個(gè)對象的所有屬性和方法，示例代碼如下：
(這個(gè)方法是我經(jīng)常使用的 可不知道比for
in方便了多少)直接將該DOM結(jié)點(diǎn)以DOM樹的結(jié)構(gòu)進(jìn)行輸出，可以詳細(xì)查對象的方法發(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)頁的某個(gè)節(jié)點(diǎn)（node）所包含的html/xml代碼
08．console.group() 輸出一組信息的開頭
有時(shí)候，為了方便分析，你需要將一些對象變量等信息進(jìn)行分組打印輸出，示例如下：
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é)束一組輸出信息
看你需求選擇不同的輸出方法來使用，如果上述四個(gè)方法再配合group和groupEnd方法來一起使用就可以輸入各種各樣的不同形式的輸出信息。
10.console.assert對輸入的表達(dá)式進(jìn)行斷言，只有表達(dá)式為false時(shí)，才輸出相應(yīng)的信息到控制臺
11.console.count（這個(gè)方法非常實(shí)用哦）當(dāng)你想統(tǒng)計(jì)代碼被執(zhí)行的次數(shù)
假如你在寫一個(gè)React應(yīng)用，然后你想要知道某個(gè)組件渲染的次數(shù)，你會(huì)怎么做？去查看源代碼，然后一個(gè)一個(gè)數(shù)？這真的是太麻煩了。你可以用console.count(“Counter”)來查詢渲染次數(shù)，我們還有一個(gè)相應(yīng)的函數(shù)來清零計(jì)數(shù)器：console.countReset（'Counter'）
12．console.time()，console.timeEnd 計(jì)時(shí)結(jié)束（看了下面的圖你瞬間就感受到它的厲害了）
console.time()啟動(dòng)一個(gè)計(jì)時(shí)器，并用timeEnd()結(jié)束計(jì)時(shí)，它們一般用于性能檢查時(shí)。你也可以將一個(gè)字符串傳遞給time和timeEnd，它將啟動(dòng)名稱為該字符串的計(jì)時(shí)器。
我們在開發(fā)過程中，經(jīng)常需要知道一個(gè)方法運(yùn)行了多長時(shí)間，方便我們做出修改完善的判斷，我們可以使用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配合一起記錄一段時(shí)間軸
15．console.trace()
console.trace()方法用于顯示當(dāng)前執(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()
它打印出一個(gè)可交互的表格，而您僅需傳入一個(gè)對象數(shù)組。
為了增加輸出的可讀性，我們可以使用console.table()讓其通過表格的形式進(jìn)行展示，比如我們在控制臺輸出console.table({
foo, bar})，如下圖所示：
17. console.clear()
實(shí)現(xiàn)清空控制臺信息。如下圖所示
現(xiàn)在假設(shè)一個(gè)場景，如果一個(gè)數(shù)組里面有成百上千的元素，但是你想知道每個(gè)元
使用Console有什么好處【優(yōu)點(diǎn)】？
console和alert對比。
| 對比 | console.log | alert |
|---|---|---|
| 是否能看到內(nèi)部結(jié)構(gòu) | console能看到結(jié)構(gòu)話的東西，console能看到對象的內(nèi)容。 | 彈出一個(gè)對象就是[object object], |
| 是否打斷頁面 | 不會(huì)打斷你頁面的操作，輸出內(nèi)容后你頁面還可以正常操作 | 彈出來內(nèi)容，那么頁面就死了 |
| 優(yōu)點(diǎn) | 方便你調(diào)式j(luò)avascript用的。 |
3）使用Console有什么壞處【缺點(diǎn)】？
調(diào)用Console畢竟是調(diào)用了函數(shù)，多少會(huì)影響系統(tǒng)性能，所以在發(fā)布版本中盡量把Console注釋掉。
利用一下函數(shù)可以分析具體調(diào)用多少時(shí)間。console.time來測試
console.time('console');
console.log('test');
console.timeEnd('console');
Console使用場景？
Console 對象常見的兩個(gè)用途：
顯示網(wǎng)頁代碼運(yùn)行時(shí)的錯(cuò)誤信息。
提供了一個(gè)命令行接口，用來與網(wǎng)頁代碼互動(dòng)。
（1）利用控制臺輸出圖片
（2）重寫console.log 改變輸出文字的樣式
（3）指定輸出文字的樣式
5）console.log()打印輸出臺不顯示輸出內(nèi)容
瀏覽器console.log()打印輸出臺不顯示輸出內(nèi)容的原因應(yīng)該很多，如網(wǎng)絡(luò)上所說：console.log()被重新定義等等原因（需要驗(yàn)證真實(shí)性？）都可能導(dǎo)致console.log()打印不能顯示打印信息。
今天，在測試screen.availWidth的時(shí)候就出現(xiàn)了console.log()打印臺始終無法打印出內(nèi)容的局面。困惑了半天后，終于找到了具體的原因。并且看到這個(gè)原因的時(shí)候，真TM想給自己兩耳光，或者直接來個(gè)冷水沖頭，清醒清醒。
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是否勾選。實(shí)在不會(huì)，直接點(diǎn)擊default.levels下的default選項(xiàng)；
這是比較常見原因和解決方案。
今天七仔在選定default的時(shí)候同樣無法獲得console.log()的打印內(nèi)容，又是怎么一回事呢？
2.檢查default.levels前面輸入框中是否有填寫內(nèi)容
注意，一定要檢查default.levels前面輸入框中是否有填寫內(nèi)容，默認(rèn)為Filter；七仔則是在Filter中填寫了一串?dāng)?shù)字。Filter，單詞意思，“過濾”“過濾器”……意思就是在控制臺中查找自己需要的信息。并且，filter中的內(nèi)容，即便是在關(guān)閉瀏覽器的前提下，也不會(huì)消失。大家一定要謹(jǐn)慎對待。
