前端console物件詳解

console物件在前端除錯中必不可少，但是大多數人都只會用console物件的log()方法。但console物件中還有其它幾個有用的方法。

1. 基本字串和json物件如下

var str = "Hello World!";

2. console.log()用太多直接跳過

3.console.group()與console.groupEnd()連用

分組列印，下方所有console.group()與console.groupEnd()是為了更好的分組顯示而寫的

 console.group('console.error() ');
 console.log(str);
 console.groupEnd('');  

chrome瀏覽器測試如下圖：

4. 列印除錯資訊

console.debug()

console.group('console.debug');
console.debug(str);
console.groupEnd('');

console.info()，列印一個提示資訊

console.group('console.info');
console.info(str);
console.groupEnd('');

console.warn()，列印一個警告

console.group('consoel.warn()');
console.warn(str);
console.groupEnd('');

console.error()，列印一個錯誤

console.group('console.error()');
console.error(str);
console.groupEnd('');

console.assert() 條件判斷false列印資訊**

console.group("console.assert()");
console.assert(false);
console.assert(400>500,'true不會列印，false才會列印');
console.groupEnd();

上分幾個列印效果chrome瀏覽器測試如下圖

5.console.table()，把物件列印成為一個table表

var json = {
        "item1": {"name": "張三","age": 23},
        "item2": {"name": "李四","age": 54},
        "item3": {"name": "王五","age": 34}
}  
console.group("console.table()");
console.table(json);
console.groupEnd();  

chrome瀏覽器測試如下圖

console.dir()列印物件
console.group("console.dir()");
console.dir(json);
console.groupEnd();
chrome瀏覽器測試如下圖

6.console.time()和console.timeEnd()，這兩個方法用於計時，可以算出一個操作所花費的準確時間

console.time("test1");
var a = 1 + 2;
console.timeEnd("test1");
console.time("test2");
var a = 1 + 2;
console.timeEnd("test2");

chrome瀏覽器測試如下圖

<a href="http://zooms.github.io">更多前端精彩</a>