js下console方法的一些用法分享_JavaScript

js下console方法的一些用法分享

1.console的用法：

在调试 js 代码时，很多人倾向于使用 alert() 或者 console.log() 方法来输出信息，正如某些 java 程序员喜欢在调试代码时使用system.out.println() 输出信息一样。但与 java 输出不一样的是， console 对象拥有多种方法可以更好的呈现信息，从而给代码调试带来方便。

console.log()

我们最常用的做法是通过它来输出一个变量或者输出一个字符串。比如下面：

console.log("hello china!");
const str = "hello world!";
console.log(str);

运行结果如下：

hello china!
hello world!

但我们也可以这样用 console.log() ：

// 代码段 1
const str1 = "hello";
const str2 = "world";
console.log(str1, str2);

// 代码段 2
console.log("%d年%d月%d日", 2015, 09, 22);

控制台会输出：

hello world
2015年9月22日

console.debug()、https://console.info()、 console.warn() 与 console.error()

这四个方法的使用方法跟 console.log() 一模一样，差别在于输出的颜色与图标不同。下面是示例：

console.log("log");
console.debug("debug");
console.info("info");
console.warn("warn");
console.error("error");

运行结果如下：

console.table()

我们看下面一个变量：

const people = {
    "person1": {"fname": "san", "lname": "zhang"}, 
    "person2": {"fname": "si", "lname": "li"}, 
    "person3": {"fname": "wu", "lname": "wang"}
};

我们用 console.log() 将之在 chrome 的控制台中输出：

再用 console.table() 输出：

所以从上面两种输出我们可以看出，当输出类似于这种两层嵌套的对象时，我们可以选择 console.table() 以表格的形式输出。当然，嵌套三层及以上的也会以表格形式输出，但限于表格只能显示二维信息的特点，其会在嵌套三层或以上的地方会显示 "object" 字符串

在调试时，我们经常需要知道一段代码执行时间，我们可以使用这两行代码来实现。看下面一段代码：

console.time("for-test");//引号内为一个输出内容标题而已
const arr = [];
for(let i = 0; i < 100000; i++) {
    arr.push({"key": i});
}
console.timeend("for-test");

输出为：

for-test: 16.030ms  // chrome 这优化做的，版本 43 中的时间是：176.152ms

从上面的例子可以看出，我们用 console.time() 和 console.timeend() 包围要测试运行时间的代码，这两个方法的参数保持一致，以便正确识别和匹配代码开始和结束的位置。

console.group()、 console.groupend() 与 console.groupcollapsed()

一般的 console.log() 方法的输出没有层级关系，在需要一些显示层级关系的输出中显得苍白无力，使用 console.group() 可以达到我们的目的。示例代码如下：

console.group("1");
console.log("1-1");
console.log("1-2");
console.log("1-3");
console.groupend();
console.group("2");
console.log("2-1");
console.log("2-2");
console.log("2-3");
console.groupend();