1 問題

Console是什麼？

console是什麼

Console 對象用於 JavaScript 調試。

JavaScript 原生中默認是沒有 Console
對象,這是宿主對象（也就是遊覽器）提供的內置對象。用於訪問調試控制檯,
在不同的瀏覽器裏效果可能不同。

console知識點

控制檯輸入console，然後就可看到：

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳在這裏插入圖片描述11(media/4b14bb4fa347ccd9351dde3b4f7d7ed7.png)]

01．基礎用法——console.log()

打印一段文本

console.log(‘Is this working?’);

打印對象

const foo = { id: 1, verified: true, color: ‘green’ };

const bar = { id: 2, verified: false, color: ‘red’ };

接着我們看控制檯的輸出展現：

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上上傳(imgcKkGwdQDX-1582111676751)(media/5d6c886e844d10f9076bf8552a9b5543.jpg)(media/7ce9887a36bb51a8aca5b2f5d56bf502.png)]

從圖中我們看出，無法看出對應的變量名；如果想讓兩個對象一起輸出，我們可以使用console.log({
foo, bar
})，由於一行內容顯示有限，對象內容部分進行了省略，我們必須點擊左邊的小箭頭看更詳細的內容，如下圖所示：

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-42NCsOkG-1582113809660)(media/5d6c886e844d10f9076bf8552a9b5643.jpg)]

02. console.info 用於輸出提示性信息

03．console.error()用於輸出錯誤信息

04.console.warn() 用於輸出錯誤信息

一些特別的信息我們需要特別強調醒目的輸出出來，比如警告和錯誤信息，你可以使用console.warn()
& console.error()，輸出的展示形式如下圖所示，是不是更醒目：

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-Xufe8RQm-1582111676753)(media/d630526068c31ec794e7c933564f0c6d.png)(media/a7799a9f8bf576f691ed3f3593c5a9d1.png)]

你還可以更進一步，自定義打印輸出的樣式，你可以使用**%c **語法。你可以使用這個方法更好的區分定義來源你的哪個API調用，用戶事件，示例如下：

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’,

‘獲取用戶信息失敗’);

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-GSs8qFXY-1582111676758)(media/899b44ac8891b025f53567c7c6b5893d.png)(media/442348ae4a9900c7871386639d88159f.jpg)]

05.console.debug用於輸出調試信息

console對象的上面5種方法，都可以使用printf風格的佔位符。不過，佔位符的種類比較少，只支持字符（%s）、整數（%d或%i）、浮點數（%f）和對象（%o）四種。

console.log("%d年%d月%d日",2011,3,26);

console.log(“圓周率是%f”,3.1415926);

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-PtQenzcg-1582111676759)(media/bf00fa14d5140833ebbc8121142d5722.jpg)(media/d630526068c31ec794e7c933564f0c6d.png)]

%o佔位符，可以用來查看一個對象內部情況

var dog = {};

dog.name = “大毛”;

dog.color = “黃色”;

console.log("%o", dog);

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳下上傳(i11Fm7TAVrxW-1582111676759)(media/c3de77bd6faa313130fc7de992da9d27.png)(media/8f6c567ecb27180fc497d9387acf4b37.png)]

06．console.dir()

console.dir()可以直觀展示一個對象的所有屬性和方法，示例代碼如下：

(這個方法是我經常使用的可不知道比for
in方便了多少)直接將該DOM結點以DOM樹的結構進行輸出，可以詳細查對象的方法發展等等

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-vvseigt5-1582113809663)(media/d00d1a6f8f8fbbaa2177fb2bf435137f.jpg)]

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-oiyrjEuL-1582111676460)(media/71917829fc2e189cfc7a2dbe65058f3d.jpg)(media/899b44ac8891b025f53567c7c6b5893d.png)]

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©;

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-diAkErPH-1582111676761)(media/97f1f48e60c2ffcde05f5482845d142a.jpg)(media/bf00fa14d5140833ebbc8121142d5752.jpg)]

07．console.dirxml用來顯示網頁的某個節點（node）所包含的html/xml代碼

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳下上傳(iILs8uMGwEc5-1582111676762)(media/f1d6e01015008a196aa632b56c0c0646.jpg)(media/c3de77bd6faa313130fc7de992da9d27.png)]

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();

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-ZrziMivu-1582111676764)(media/d80000fc655aef2cc1e2195096222d79.jpg)(media/71917829fc2e189cfc7a2dbe65058f3d.jpg)]

09.console.groupEnd結束一組輸出信息

看你需求選擇不同的輸出方法來使用，如果上述四個方法再配合group和groupEnd方法來一起使用就可以輸入各種各樣的不同形式的輸出信息。

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-v6U7bPHH-1582111676765)(media/a9d4e3f58bb00f7cc502ba5b06ef0cab.jpg)(media/97f1f48e60c2ffcde07f5482845d142a.jpg)]

10.console.assert對輸入的表達式進行斷言，只有表達式爲false時，才輸出相應的信息到控制檯

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳下上傳(i4qUQqKd2Vlq-1582111676766)(media/c4155355c8b571006603205aaf56d570.jpg)(media/f1d6e01015008a196aa832b56c0c0646.jpg)]

11.console.count（這個方法非常實用哦）當你想統計代碼被執行的次數

**假如你在寫一個React應用，然後你想要知道某個組件渲染的次數，**你會怎麼做？去查看源代碼，然後一個一個數？這真的是太麻煩了。你可以用console.count(“Counter”)來查詢渲染次數，我們還有一個相應的函數來清零計數器：console.countReset（‘Counter’）

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-FrVsmpPj-1582111676768)(media/b178eb41f4c86da8241f5ccf7e39ee72.jpg)(media/b528b4eda4460f2652dd3b4d880e5806.jpg)]

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-wVvKoGcf-1582113809686)(media/aa5e8b9c809f9c13db271b643aafa497.jpg)]

12．console.time()，console.timeEnd 計時結束（看了下面的圖你瞬間就感受到它的厲害了）

console.time()啓動一個計時器，並用timeEnd()結束計時，**它們一般用於性能檢查時。**你也可以將一個字符串傳遞給time和timeEnd，它將啓動名稱爲該字符串的計時器。

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-rTH07jnh-1582111676780)(media/45e525557ca94a5c96c73ef08)b29c7d.jpg(media/d80000fc655aef2cc1e2195096222d79.jpg)]

我們在開發過程中，經常需要知道一個方法運行了多長時間，方便我們做出修改完善的判斷，我們可以使用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”);

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-Bx0xpMqz-1582111676770)(media/1b024db4062e3106c5e48c2a5787d5c2.png)(media/a9d4e3f58bb00f7cc502ba5b06ef0cab.jpg)]

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-ZMfCMJZc-1582113809689)(media/c4155355c8b571006603205aaf56d580.jpg)]

13.console.profile和console.profileEnd配合一起使用來查看CPU使用相關信息

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-LkaOI8Nk-1582113809690)(media/8e73b07928b86d526bde0c491980a3a9.jpg)]

在Profiles面板裏面查看就可以看到cpu相關使用信息

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-06ONzZXR-1582113809691)(media/b178eb41f4c86da9141f5ccf7e39ee72.jpg)]

14.console.timeLine和console.timeLineEnd配合一起記錄一段時間軸

15．console.trace()

console.trace()方法用於顯示當前執行的代碼在堆棧中的調用路徑。如下段代碼所示，在控制檯裏清晰了展示了add()的調用軌跡

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);

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-c0wHAVdm-1582111676772)(media/3e769d35c92b445b2849775e114bc147.png)(media/45e525557ca94a5c09c93ef081b29c7d.jpg)]

16.console.table()

它打印出一個可交互的表格，而您僅需傳入一個對象數組。

爲了增加輸出的可讀性，我們可以使用console.table()讓其通過表格的形式進行展示，比如我們在控制檯輸出console.table({
foo, bar})，如下圖所示：

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-vU8tuLwv-1582111676771)(media/ebfbe4cf100764640f4cf97ac0d1c902.png)(media/b1f95d4c2958597c387c7fd0513c0a4d.jpg)]

17. console.clear()

實現清空控制檯信息。如下圖所示

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-359dpImb-1582113809693)(media/1b024db4062e3106c5e48c2a5797d5c2.png)]

現在假設一個場景，如果一個數組裏面有成百上千的元素，但是你想知道每個元

使用Console有什麼好處【優點】？

console和alert對比。

對比	console.log	alert
是否能看到內部結構	console能看到結構話的東西，console能看到對象的內容。	彈出一個對象就是[object object],
是否打斷頁面	不會打斷你頁面的操作，輸出內容後你頁面還可以正常操作	彈出來內容，那麼頁面就死了
優點	方便你調式javascript用的。

3）使用Console有什麼壞處【缺點】？

調用Console畢竟是調用了函數，多少會影響系統性能，所以在發佈版本中儘量把Console註釋掉。

利用一下函數可以分析具體調用多少時間。console.time來測試

console.time(‘console’);

console.log(‘test’);

console.timeEnd(‘console’);

Console使用場景？

Console 對象常見的兩個用途：

顯示網頁代碼運行時的錯誤信息。
提供了一個命令行接口，用來與網頁代碼互動。

（1）利用控制檯輸出圖片

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-91w1haNP-1582113809694)(media/89036e472f4692bad2bfeb57e482ce6f.gif)]

（2）重寫console.log 改變輸出文字的樣式

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-Px0WU9By-1582113809695)(media/ebfbe4cf100764640f4cf97ac0d1c902.png)]

（3）指定輸出文字的樣式

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-MfEOavDJ-1582113809695)(media/3e769d35c92b445b2849775e114bc547.png)]

5）console.log()打印輸出臺不顯示輸出內容

瀏覽器console.log()打印輸出臺不顯示輸出內容的原因應該很多，如網絡上所說：console.log()被重新定義等等原因（需要驗證真實性？）都可能導致console.log()打印不能顯示打印信息。

今天，在測試screen.availWidth的時候就出現了console.log()打印臺始終無法打印出內容的局面。困惑了半天后，終於找到了具體的原因。並且看到這個原因的時候，真TM想給自己兩耳光，或者直接來個冷水衝頭，清醒清醒。

html/CSS/JavaScript代碼如下：

<!DOCTYPE html>

<html>

<head>

<title>screen</title>

</head>

<body>

alert(“123”);

console.log(“123”);

console.log("頁面寬度爲 "+screen.availWidth);

console.log("頁面高度爲 "+screen.availHeight);

</script>

</body>

</html>

遇到控制檯console.log()無法打印的情況

1.首先應該排查default.levels。

我們首先應該排查default.levels。一般沒有內容顯示，就必須查看default.levels下的info是否勾選。實在不會，直接點擊default.levels下的default選項；

這是比較常見原因和解決方案。

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-8p2PuuKa-1582113809696)(media/5f049fb83ebb77e21db03af5a8267f38.jpg)]

今天七仔在選定default的時候同樣無法獲得console.log()的打印內容，又是怎麼一回事呢？

2.檢查default.levels前面輸入框中是否有填寫內容

注意，一定要檢查default.levels前面輸入框中是否有填寫內容，默認爲Filter；七仔則是在Filter中填寫了一串數字。Filter，單詞意思，“過濾”“過濾器”……意思就是在控制檯中查找自己需要的信息。**並且，filter中的內容，即便是在關閉瀏覽器的前提下，也不會消失。**大家一定要謹慎對待。

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-YEQrvvwb-1582113809697)(media/6fcebb05bb0142b04860603cd5f0cc14.jpg)]

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-ueRmT3BP-1582113809697)(media/9fceaec533ebde1202b06768bdf48521.jpg)]

JavaScript Console知識點