JavaScript 中 console 的用法

2019年8月27日 175次阅读 来源: CompileYouth

Javascript 中 console 的用法

在调试 JS 代码时，很多人倾向于运用 alert() 或许 console.log() 要领来输出信息，正如某些 Java 程序员喜好在调试代码时运用 System.out.println() 输出信息一样。但与 Java 输出不一样的是， console 对象具有多种要领能够更好的显现信息，从而给代码调试带来轻易。依据常常使用水平，列出以下几种 console 对象的要领：

  • console.log()

  • console.debug()、console.info()、console.warn() 与 console.error()

  • console.table()

  • console.time() 与 console.timeEnd()

  • console.assert()

  • console.count()

  • console.group、console.groupEnd() 与 console.groupCollapsed()

以下示例的运转环境是 Chrome 43。

console.log()

先来谈谈我们最熟习也最常常使用的 console.log() 要领。

我们最常常使用的做法是经由过程它来输出一个变量或许输出一个字符串。比方下面：

console.log("Hello China!");
var str = "Hello world!";
console.log(str);

运转效果以下：

Hello China!
Hello world!

但我们也能够如许用 console.log() ：

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

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

掌握台会输出：

hello world
2015年9月22日

代码片断 1 显现，console.log() 的参数能够有多个，输出的效果以一个空格离隔。

代码片断 2 显现，console.log() 能够运用 C 言语 printf() 作风的占位符，不过其支撑的占位符品种较少，只支撑字符串（%s）、整数（%d或%i）、浮点数（%f）和对象（%o）。

console.debug()、 console.info()、 console.warn() 与 console.error()

这四个要领的运用要领跟 console.log() 如出一辙，差异在于输出的色彩与图标差别。下面是示例：

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

运转效果以下：

《JavaScript 中 console 的用法》

console.table()

我们看下面一个变量：


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

我们用 console.log() 将之在 Chrome 的掌握台中输出：

《JavaScript 中 console 的用法》

再用 console.table() 输出：

《JavaScript 中 console 的用法》

所以从上面两种输出我们能够看出，当输出类似于这类两层嵌套的对象时，我们能够挑选 console.table() 以表格的情势输出。固然，嵌套三层及以上的也会以表格情势输出，但限于表格只能显现二维信息的特性，其会在嵌套三层或以上的处所会显现 “Object” 字符串。

console.time() 与 console.timeEnd()

在调试时，我们常常须要晓得一段代码执行时候，我们能够运用这两行代码来完成。看下面一段代码：


console.time("for-test");
var arr = [];
for(var i = 0; i < 100000; i++) {
    arr.push({"key": i});
}
console.timeEnd("for-test");

输出为：

for-test: 176.152ms

从上面的例子能够看出，我们用 console.time() 和 console.timeEnd() 围困要测试运转时候的代码，这两个要领的参数保持一致，以便准确辨认和婚配代码最先和完毕的位置。

console.assert()

console.assert() 类似于单元测试中的断言，当表达式为 false 时，输出错误信息。示例以下：

var arr = [1, 2, 3];
console.assert(arr.length === 4);

输出效果以下：

《JavaScript 中 console 的用法》

console.count()

调试代码时，我们常常须要晓得一段代码被执行了多少次，我们能够运用 console.count() 来轻易的到达我们的目标。示例以下：

function func() {
    console.count("label");
}

for(var i = 0; i < 3; i++) {
    func();
}

运转效果为：

label: 1
label: 2
label: 3

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();

运转效果为：

《JavaScript 中 console 的用法》

把 “group” 换成 “groupCollapsed”，则默以为摺叠运转效果。

因为本文只列出部份要领，检察完全要领请移步阮一峰先辈的博客。

    原文作者：CompileYouth
    原文地址: https://segmentfault.com/a/1190000003832065
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞