如何使console更具可读性

作为Web开发人员，用console.log调试代码应该已经是习以为常的事。但是控制台提供了许多其他方法，可以帮助您更好地进行调试。

如图所示，console还有以下这些方法。

16217771251356/16217771368828.jpg)

以上这些方法，可以分为两类：

标准的特性
非标准的特性

# 标准的特性

以下七种方法，可用生产环境。

显示信息
占位符
分组
表格
计时功能
断言

# 一、显示信息

console.log("这是log") 输出普通信息
console.info("这是info") 输出提示性信息
console.warn("这是warn") 输出警示信息
console.error("这是error") 输出错误信息

控制台显示如下

-w564

# 二、占位符

上面4种显示信息方法都可以使用printf风格的占位符，占位符的种类比较少，只支以下这四种。

%s 字符串
%d %i 整数
%f 浮点数
%o 对象

示例

console.log('this color is %s', "red");
console.log("%d年%d月%i日",2021,5,25)
console.log("圆周率是%f",3.1415926)
let dog = { name: "小白", color: "white" }
console.log("%o",dog);

控制台显示如下

-w566

# 三、分组

如果信息太多，可以将其分组显示。

console.group('用户信息');
console.log('名字: 李白');
console.log('工作: Acmen');
// 嵌套
console.group('地址');
console.log('福建省');
console.log('厦门市');
console.log('思明区');
console.groupEnd();
console.groupEnd();

-w573

如果要默认折叠组，也可以使用console.groupCollapsed()代替console.group()

# 四、表格

将数据以表格的形式显示。

console.table([
    { id: 12987122, name: '蛋糕', time: '2016-05-02' },
    { id: 12987125, name: '冰淇淋', time: '2016-05-09' }
])

-w809

# 五、计时功能

console.time()和console.timeEnd()，用来运行某串代码的需要花费的时间。

-w500

# 六、断言

console.assert()用来判断一个表达式或变量是否为真。如果结果为否，则在控制台输出一条相应信息，并且抛出一个异常。

-w499

# 非标准的特性

该特性是非标准的，请尽量不要在生产环境中使用它！

# 一、性能分析

分析程序各个部分的运行时间，找出问题所在。

假设有一个函数Foo()，里面调用了另外两个函数funcA()和funcB()，其中funcA()调用10次，funcB()调用1次。

function Foo() {
    for (let i = 0; i < 10; i++) { funcA(1000); }
    funcB(10000);
}

function funcA(count) {
    for (let i = 0; i < count; i++) { }
}

function funcB(count) {
    for (let i = 0; i < count; i++) { }
}