javascript的console用法是什麼-js教程-PHP中文網

javascript的console用法是：1、「console.assert(expression, object[, object...])」文法；2、「console.count([label])」文法等等。

javascript的console用法是什麼

本文操作環境：windows7系統、javascript1.8.5版、Dell G3電腦。

對於前端開發者來說，在開發過程中需要監控某些表達式或變數的值的時候，用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(&#39;count&#39;);
  }
})();// count: 1// count: 2// count: 3// count: 4// count: 5

登入後複製

console.dir(object)

將傳入物件的屬性，包括子物件的屬性以清單形式輸出，例如：

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

登入後複製

輸出：

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

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

console.group

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

console.log(&#39;这是第一层&#39;);
console.group();
console.log(&#39;这是第二层&#39;);
console.log(&#39;依然第二层&#39;);
console.group();
console.log(&#39;第三层了&#39;);
console.groupEnd();
console.log(&#39;回到第二层&#39;);
console.groupEnd();
console.log(&#39;回到第一层&#39;);

登入後複製

輸出結果：

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

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

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

console.info(&#39;info&#39;); // 输出 info

登入後複製

console.table()

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

var obj = {
  foo: {
    name: &#39;foo&#39;,
    age: &#39;33&#39;
  },
  bar: {
    name: &#39;bar&#39;,
    age: &#39;45&#39;
  }
};var arr = [
  [&#39;foo&#39;, &#39;33&#39;],
  [&#39;bar&#39;, &#39;45&#39;]
];

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

登入後複製

也可以

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

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

console.log(&#39;log&#39;); // 输出 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(&#39;性能分析&#39;);
parent();
console.profileEnd();

登入後複製

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

頁面載入過程的效能最佳化是前端開發的重要部分，使用控制台的profiles 面板可以監控所有JS 的運作情況使用方法就像錄影機一樣，控制台會把運作過程錄製下來。如圖，工具列上有錄音和停止按鈕。

錄製結果：

console.time(name)
計時器，可以將成對的console.time( )和console.timeEnd()之間程式碼的執行時間輸出到控制台上，name參數可作為標籤名稱。

console.time(&#39;计时器&#39;);for (var i = 0; i < 1000; i++) {  for (var j = 0; j < 1000; j++) {}
}
console.timeEnd(&#39;计时器&#39;);

登入後複製

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(&#39;tracer&#39;);

登入後複製

输出：
console.warn(object[, object...])

输出参数的内容，作为警告提示。

console.warn(&#39;warn&#39;); // 输出 warn

登入後複製

占位符

console对象上的五个直接输出方法，console.log(),console.warn(),console.error(),console.exception()(等同于console.error())和console.info()，都可以使用占位符。支持的占位符有四种，分别是字符(%s)、整数(%d 或 %i)、浮点数(%f)和对象(%o)。

console.log(&#39;%s是%d年%d月%d日&#39;, &#39;今天&#39;, 2014, 4, 15);
console.log(&#39;圆周率是%f&#39;, 3.14159);var obj = {
  name: &#39;classicemi&#39;}
console.log(&#39;%o&#39;, obj);

登入後複製

还有一种特殊的标示符%c，对输出的文字可以附加特殊的样式，当进行大型项目开发的时候，代码中可能有很多其他开发者添加的控制台语句。开发者对自己的输出定制特别的样式就可以方便自己在眼花缭乱的输出结果中一眼看到自己需要的内容。想象力丰富的童鞋也可以做出有创意的输出信息，比如常见的招聘信息和个人介绍啥的。