你真的了解 console 嗎

edagarli 發布于2019-08-21 12:16 / 3364人閱讀

摘要：最常用的語句就是了。對象除了這一最常被開發者使用的方法之外，還有很多其他的方法。用來追蹤函數的調用過程。輸出輸出參數的內容，作為警告提示。支持的占位符有四種，分別是字符整數或浮點數和對象。

對于前端開發者來說，在開發過程中需要監控某些表達式或變量的值的時候，用 debugger 會顯得過于笨重，取而代之則是會將值輸出到控制臺上方便調試。最常用的語句就是console.log(expression)了。

然而對于作為一個全局對象的console對象來說，大多數人了解得還并不全面，當然我也是，經過我的一番學習，現在對于這個能玩轉控制臺的 JS 對象有了一定的認識，想與大家分享一下。

console 對象除了console.log()這一最常被開發者使用的方法之外，還有很多其他的方法。靈活運用這些方法，可以給開發過程增添許多便利。

console 的方法

console.assert(expression, object[, object...])

接收至少兩個參數，第一個參數的值或返回值為false的時候，將會在控制臺上輸出后續參數的值。例如：

console.assert(1 == 1, object); // 無輸出，返回 undefined
console.assert(1 == 2, object); // 輸出 object

console.count([label])

輸出執行到該行的次數，可選參數 label 可以輸出在次數之前，例如：

(function() {
  for (var i = 0; i < 5; i++) {
    console.count("count");
  }
})();
// count: 1
// count: 2
// count: 3
// count: 4
// count: 5

console.dir(object)

將傳入對象的屬性，包括子對象的屬性以列表形式輸出，例如：

var obj = {
  name: "classicemi",
  college: "HUST",
  major: "ei"
};
console.dir(obj);

輸出：

console.error(object[, object...])

用于輸出錯誤信息，用法和常見的console.log一樣，不同點在于輸出內容會標記為錯誤的樣式，便于分辨。輸出結果：

console.group

這是個有趣的方法，它能夠讓控制臺輸出的語句產生不同的層級嵌套關系，每一個console.group()會增加一層嵌套，相反要減少一層嵌套可以使用console.groupEnd()方法。語言表述比較無力，看代碼：

console.log("這是第一層");
console.group();
console.log("這是第二層");
console.log("依然第二層");
console.group();
console.log("第三層了");
console.groupEnd();
console.log("回到第二層");
console.groupEnd();
console.log("回到第一層");

輸出結果：

和console.group()相似的方法是console.groupCollapsed()作用相同，不同點是嵌套的輸出內容是折疊狀態，在有大段內容輸出的時候使用這個方法可以使輸出版面不至于太長。。。吧

console.info(object[, object...])

此方法與之前說到的console.error一樣，用于輸出信息，沒有什么特別之處。

console.info("info"); // 輸出 info

console.table()

可將傳入的對象，或數組以表格形式輸出，相比傳統樹形輸出，這種輸出方案更適合內部元素排列整齊的對象或數組，不然可能會出現很多的 undefined。

var obj = {
  foo: {
    name: "foo",
    age: "33"
  },
  bar: {
    name: "bar",
    age: "45"
  }
};

var arr = [
  ["foo", "33"],
  ["bar", "45"]
];

console.table(obj);
console.table(arr);

也可以

console.log(object[, object...])

這個不用多說，這個應該是開發者最常用的吧，也不知道是誰規定的。。。

console.log("log"); // 輸出 log

console.profile([profileLabel])

這是個挺高大上的東西，可用于性能分析。在 JS 開發中，我們常常要評估段代碼或是某個函數的性能。在函數中手動打印時間固然可以，但顯得不夠靈活而且有誤差。借助控制臺以及console.profile()方法我們可以很方便地監控運行性能。

例如下面這段代碼：

function parent() {
  for (var i = 0; i < 10000; i++) {
    childA()
  }
}

function childA(j) {
  for (var i = 0; i < j; i++) {}
}

console.profile("性能分析");
parent();
console.profileEnd();

然后我們可以在 Profiles 面板下看到上述代碼運行過程中的消耗時間。

頁面加載過程的性能優化是前端開發的一個重要部分，使用控制臺的 profiles 面板可以監控所有 JS 的運行情況使用方法就像錄像機一樣，控制臺會把運行過程錄制下來。如圖，工具欄上有錄制和停止按鈕。

錄制結果：

console.time(name)
計時器，可以將成對的console.time()和console.timeEnd()之間代碼的運行時間輸出到控制臺上，name參數可作為標簽名。

console.time("計時器");
for (var i = 0; i < 1000; i++) {
  for (var j = 0; j < 1000; j++) {}
}
console.timeEnd("計時器");

（剛才實際多寫了一層循環，結果電腦風扇嗚嗚轉啊，瀏覽器直接無響應了。。。）

console.trace()

console.trace()用來追蹤函數的調用過程。在大型項目尤其是框架開發中，函數的調用軌跡可以十分復雜，console.trace()方法可以將函數的被調用過程清楚地輸出到控制臺上。

function tracer(a) {
  console.trace();
  return a;
}

function foo(a) {
  return bar(a);
}

function bar(a) {
  return tracer(a);
}

var a = foo("tracer");

輸出：

console.warn(object[, object...])

輸出參數的內容，作為警告提示。

console.warn("warn"); // 輸出 warn

占位符

console對象上的五個直接輸出方法，console.log(),console.warn(),console.error(),console.exception()(等同于console.error())和console.info()，都可以使用占位符。支持的占位符有四種，分別是字符(%s)、整數(%d 或 %i)、浮點數(%f)和對象(%o)。

console.log("%s是%d年%d月%d日", "今天", 2014, 4, 15);
console.log("圓周率是%f", 3.14159);

var obj = {
  name: "classicemi"
}
console.log("%o", obj);

還有一種特殊的標示符%c，對輸出的文字可以附加特殊的樣式，當進行大型項目開發的時候，代碼中可能有很多其他開發者添加的控制臺語句。開發者對自己的輸出定制特別的樣式就可以方便自己在眼花繚亂的輸出結果中一眼看到自己需要的內容。想象力豐富的童鞋也可以做出有創意的輸出信息，比如常見的招聘信息和個人介紹啥的。

輸出結果：

console.log("%cMy name is classicemi.", "color: #fff; background: #f40; font-size: 24px;");

%c標示符可以用各種 CSS 語句來為輸出添加樣式，再隨便舉個栗子，background屬性的url()中添加圖片路徑就可以實現圖片的輸出了，各位前端童鞋快施展你們的 CSS 神技來把控制臺玩壞吧~~

參考文獻

https://developer.mozilla.org/en-US/docs/Web/API/console

http://www.ruanyifeng.com/blog/2011/03/firebug_console_tutorial.html

http://blog.segmentfault.com/civerzhu/1190000000425386

http://blog.mariusschulz.com/2013/11/13/advanced-javascript-debugging-with-consoletable

云服務器 GPU云服務器說說你所了解的人工智能外呼系統阿里云服務器你了解了嗎廣告聯盟是真的嗎 linux系統真的安全嗎

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/87523.html

你真的了解this指向嗎？

摘要：前言相信很多人都對中的指向問題一知半解，所以今天就來詳細看看它到底是怎么判斷的。椎確來說是函數調用時是否有引用上下文對象。隱式綁定，上下文對象無上下文對象顯示綁定這也是常用的的方式就不一一舉例了。前言相信很多人都對JavaScript中的this指向問題一知半解，所以今天就來詳細看看它到底是怎么判斷的。一. 先看幾道題 var length = 10; functio...

liaorio 2019-08-23 17:01 評論0 收藏0
你真的了解javascript嗎？（一）

摘要：表示要解析的數字的基數。回調函數接收四個參數，依次是通過上一次調用回調函數獲得的值。如果向方法提供，則在首次調用函數時，為。當前數組元素的值。原題出處：JavaScript Puzzlers!當初以為不過是一些小題目，結果做到懷疑人生，都要懷疑可能我javascript白學了。讀者可以去試試。不多說，直接上題：第一題 [1, 2, 3].map(parseInt) 不要被套路，這...

whatsns 2019-08-21 15:26 評論0 收藏0
你們真的了解閉包嗎？

摘要：前言我們知道所謂的閉包指的就是有權訪問另一個函數作用域的變量對象的函數，但是你們真的了解的閉包嗎就當你們很了解了，畢竟是基礎知識，我就簡單說說概念簡單幾行代碼，先說說作用域鏈的流程，運行到時，會將作用域鏈保存到中執行到時會創建執行環境，并將前言我們知道所謂的閉包指的就是有權訪問另一個函數作用域的變量對象的函數，但是你們真的了解JS的閉包嗎？就當你們很了解了，畢竟是基礎知識，我就簡單...

bigdevil_s 2019-08-23 10:56 評論0 收藏0
你真的會用 Babel 嗎?

摘要：安裝然后在的配置文件加入入口文件引入這樣就可以啦，還是可以減少很多代碼量的。是參數，等同于執行正常。這個包很簡單，就是引用了和，然后生產環境把它們編譯到目錄下，做了映射，供使用。引入這個問題是對自己的發問，但我相信會有很多跟我一樣的同學。對于 babel 的使用，近半年來一直停留在與 webpack 結合使用，以及在瀏覽器開發環境下。導致很多 babel 的包，我都不清楚他們是干嘛...

mochixuan 2019-08-22 11:06 評論0 收藏0
前端er，你真的會用 async 嗎？

摘要：異步函數是值通過事件循環異步執行的函數，它會通過一個隱式的返回其結果。 async 異步函數不完全使用攻略前言現在已經到 8012 年的尾聲了，前端各方面的技術發展也層出不窮，VueConf TO 2018 大會也發布了 Vue 3.0的計劃。而在我們（我）的日常中也經常用 Vue 來編寫一些項目。那么，就少不了 ES6 的登場了。那么話說回來，你真的會用 ES6 的 asyn...

Jaden 2019-08-23 13:50 評論0 收藏0