日常工作中，難免存在為了代碼調(diào)試而試驗性地輸出一些東西，曾經(jīng)都愛用alert()，高興了彈個數(shù)據(jù)，但讓人頭疼的是，它會中斷代碼執(zhí)行，得手動關(guān)掉，所以有人就用 document.write()，這樣也有弊端，它會把內(nèi)容寫到網(wǎng)頁上，我們是調(diào)試代碼，這樣顯得多余，種種原因，console.log()就成了香餑餑，它不會影響代碼運行，且只會把內(nèi)容輸出到控制臺，挺好。

別把console不當(dāng)對象

JavaScript語言中，到處是對象的運用，有很多內(nèi)置和自定義的對象閃耀光芒。

我們一般不會用console做什么實質(zhì)的事情，更別提業(yè)務(wù)邏輯，所以，會忽略它本身也是對象，不過，它不屬于原生js，而是宿主（通常是瀏覽器）的內(nèi)置對象，用來在控制臺輸出一些代碼執(zhí)行情況的信息，既然是對象，就有方法，log僅僅是其中之一。

console的方法

提示類

這類方法，它們的目的和效果類似，都是提示，只是提示的類型不同。

log debug info warn error

既然類型不同，就應(yīng)該在UI上有所區(qū)別，這是瀏覽器做得比較貼心的一點。

有了這個區(qū)分，甚至不需要看圖標(biāo)，掃一眼就能知道是哪一類。

除此之外，它們有各自的職責(zé)所在。

info用于輸出信息或者通知，跟log很像，但沒log常用和強大。

debug輸出“調(diào)試”的信息，且控制臺配置為顯示時才能看到。它常出現(xiàn)在代碼里，就像這樣：

function func(){debugger;console.log("bug"); }

這段代碼當(dāng)運行到 debugger 的地方就會停下，這樣可以輔助定位問題，程序是在前面出錯，還是后面出錯，最終精確到哪一行出錯。

當(dāng)然，相比手動書寫，我們經(jīng)常是在控制臺里通過可視化工具進行操作，更方便，也更靈活。

除此之外，更常見的是下面這兩種。

warn 和 error

這兩個方法是對代碼執(zhí)行情況最直接的反饋，不需要手動去寫，控制臺就會有很多警告和報錯...我們當(dāng)然不希望看到，但一旦出錯，有提示信息總比沒有好。

warn 代表代碼中有不太推薦的寫法或者將來可能存在的錯誤，但在當(dāng)下不影響運行。

error 就沒有那么友善了，輕則某段代碼無效，重則頁面停止解析執(zhí)行。

常見的是如下幾類：

• SyntaxError解析錯誤

這種算低級錯誤，比如，漏寫個括號，少寫個引號，引號寫成了中文的等等，屬語法解析層面。表現(xiàn)為：

Uncaught SyntaxError: Unexpected ...

如果使用的編輯器沒有提醒功能，找起來還挺費勁兒的，通過控制臺來幫助定位就很方便了。

• ReferenceError引用錯誤

這個錯誤也常見，比語法解析稍微高級一點，但也不值得驕傲~它代表引用一個不存在的對象，或者不合法的賦值，有時是真的忘記定義，有時可能就是單詞拼錯。

Uncaught ReferenceError: a is not defined

• TypeError類型錯誤

變量或參數(shù)不是預(yù)期類型時發(fā)生的錯誤。

Uncaught TypeError: a is not a function(…)

這種錯誤常出現(xiàn)在你以為某個方法或者對象已經(jīng)存在或者引用，卻由于疏漏不能正常引用的情況。

通常錯誤信息會自動在控制臺輸出，但如果你需要在其基礎(chǔ)上自定義輸出并呈現(xiàn)給用戶，有這么幾個可使用的屬性和方法：

• message 描述信息
• name 類型名稱
• toString 包含錯誤信息的字符串

比如：

try {adddlert("Hello!"); } catch(err) {console.log(err.name); // ReferenceErrorconsole.log(err.message); // adddlert is not defined }

此處僅列三種極為常見的異常，更多種類可自行查閱資料。

assert

assert 方法在很多地方被翻譯成”斷言“，譬如一本很不錯的書《JavaScript忍者秘籍》中，就隨處可見它的身影。

它接收兩個參數(shù)，第一個是表達式，第二個是字符串。只有當(dāng)?shù)谝粋€參數(shù)為false，才會輸出第二個參數(shù)，否則不會有任何結(jié)果。

console.assert(1 > 2, "條件不成立") // Assertion failed: 條件不成立

計算

console.count

function func(){console.count("order"); // 此處如果不填，默認(rèn)是 default }for(let i = 0;i<3;i++){func(); }

這段代碼輸出

order:1
order:2
order:3

可以看到，它能起到統(tǒng)計代碼執(zhí)行次數(shù)的作用。

console.time()和console.timeEnd()

這兩個方法也常被提到，就是測試一段代碼的執(zhí)行時間，在進行代碼優(yōu)化之后，對比哪種寫法的執(zhí)行效率更高。 剛好，我們前面就有一段代碼，索性來測試一下它的運行時長。

console.time(); function func(){console.count("order"); // 此處如果不填，默認(rèn)是 default }for(let i = 0;i<3;i++){func(); } console.timeEnd();

輸出在最后多了一行

default: 0.349853515625ms

說明這段代碼執(zhí)行用了大概0.35毫秒。

花樣

console還有什么花樣？有的。

trace

追蹤函數(shù)調(diào)用軌跡，比如，有個求和方法：

function add(x,y){console.trace();return x+y; } // 假設(shè)調(diào)用如下: var result = add3(1,1); function add3(x,y){return add2(x,y);} function add2(x,y){return add1(x,y);} function add1(x,y){return add(x,y);}

控制臺就會這樣顯示：

table

語法格式是：console.table(tabledata, tablecolumns)

第一個是填充到表格的數(shù)據(jù)，可以是數(shù)組或者對象，必填，第二個是標(biāo)題欄名稱，選填。

var table = [{"name": "張三", "sex": "F"},{"name": "李四", "sex": "M"},{"name": "王二", "sex": "F"},{"name": "麻子", "sex": "F"}, ]; console.table(table);

相比常規(guī)輸出，這種格式開發(fā)者會覺得更加舒適。

占位符

占位符，是用某種特定規(guī)則的符號替代真正的內(nèi)容來占位，看代碼。

console.log('%d年%d月%d日',2020,03,30); // 2020年3月30日

這里的 %d(還有%i) 代表整數(shù)，它還支持字符串（%s）、浮點數(shù)（%f）和對象（%o）。

let person = {name:'idea',age:18 } console.log("%o可以用來創(chuàng)建人的類",person); // {name: "idea", age: 18}可以用來創(chuàng)建人的類

占位符跟函數(shù)中的參數(shù)作用差不多，方便了數(shù)據(jù)的引用和操作。

樣式

什么？你說的是那個樣式嗎？對，是那個樣式~

語法是：console.log("%c內(nèi)容",樣式）

這里%c起到了關(guān)鍵作用，它的功能是根據(jù)提供的樣式代碼對輸出內(nèi)容進行格式化。

console.log("%c3D Text"," text-shadow: 0 1px 0 #ccc,0 2px 0 #c9c9c9,0 3px 0 #bbb,0 4px 0 #b9b9b9,0 5px 0 #aaa,0 6px 1px rgba(0,0,0,.1),0 0 5px rgba(0,0,0,.1),0 1px 3px rgba(0,0,0,.3),0 3px 5px rgba(0,0,0,.2),0 5px 10px rgba(0,0,0,.25),0 10px 10px rgba(0,0,0,.2),0 20px 20px rgba(0,0,0,.15);font-size:5em");

控制臺里就能看到如下炫酷的效果：

有點意思吧，不過這個效果是拿來做試驗的，略顯招搖，沒有實際用途，如果你想自定義輸出的字體，改個字號和顏色就好。

總結(jié)

作為一名開發(fā)者，我確實曾以為 console 就只能 log，也覺得控制臺那些亂七八糟的東西沒什么用，沒規(guī)律可循，更覺得某些人直接在控制臺里寫代碼是在賣弄技巧，后來就是被“啪啪”打臉的過程，所以，哪塊知識都不宜小看，不斷挖掘和探索才是正解~

本文就到此了，鑒于筆者水平有限，可能有遺漏或者錯誤，歡迎指正和交流~

Console很颯，不止log - 靈感之見?ideazhao.com

總結(jié)

以上是生活随笔為你收集整理的console linux 口 没输出_Console很飒，不止log的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。