开发小技巧之巧用console

在开发过程中，我们经常使用console.log()来辅助我们进行调试和开发，它简单方便，今天我们一起来了解它的一些技能和方法，让我们开发的时候更优雅、更高效的使用console.log()。

打印变量：
调试的过程中可能经常碰到在控制台中打印了多个变量，我们为了标识，会在后面加一个字符串表名它当前是哪个变量，如下：

在控制台根据对应标识或者对应行数就可看到打印的值对应着哪个变量。
但现在我有一个更直观的方法：可以把变量放入一对花括号中，例如console.log({xxx})。
如：

此时我们在控制台中看到的就是：

变量名对应着打印的值，看起来会很清晰，也能减少一丢丢代码是不~
（ps:若想用这个方法直接打印vue组件data中的变量，如console.log({this.categoryArrList}),则会报错。因为console.log({name})实际上相当于console.log({name：name}),所以想直接打印this.categoryArrList是会报错的，这个方法用来打印函数中的变量就会很清晰明了~）
打印对象：

同样的，在调试过程中或者我们在提交数据给后端前，可能会需要查看一个对象，想要看这个对象里的属性值是否是后端想要的值，所以我们一般会在控制台打印出这个对象，查看其属性值：
一般我们就直接是：

这个时候再控制台看到的内容就如下所示：

若属性值为对象或者数组的话，我们就需要一个一个打开来看对应的值，如果层级很深，这也是个繁琐的过程，这时候我们可以在console.log()的时候借用JSON.stringify()来查看完整的对象结构：
如：

这时候我们在控制台看到的内容就是这样的：

整个对象的属性和属性值一目了然，我们不需要再复制一坨代码到bejson.com去转化格式，是不是又省下一点时间呢~

JSON.stringify()可以有三个参数: JSON.stringify(value[, replacer[, space]])
参数说明：
value: 必需，要转换的 JavaScript 值（通常为对象或数组）；

replacer：可选。用于转换结果的函数或数组。如果 replacer 为函数，则 JSON.stringify 将调用该函数，并传入每个成员的键和值。使用返回值而不是原始值。如果此函数返回 undefined，则排除成员。根对象的键是一个空字符串：""。如果 replacer 是一个数组，则仅转换该数组中具有键值的成员。成员的转换顺序与键在数组中的顺序一样；

space：可选，文本添加缩进、空格和换行符，如果 space 是一个数字，则返回值文本在每个级别缩进指定数目的空格，如果 space 大于 10，则文本缩进 10 个空格。space 也可以使用非数字，如：\t。

所以配合JSON.stringify()的第一和第三个参数就可以在控制台清晰明了的查看一个对象。

打印特定格式的信息：
console.log（）给我们提供了格式修饰符：

修饰符	作用
%s	元素以字符串展示
%d、%i	元素以整数类型展示
%f	元素以浮点数类型展示
%o、%O	元素以对象格式展示
%c	给元素添加CSS样式

借用这些修饰符，我们可以根据对应的功能，在控制台打印出自己想要的形式：
如：
在这里插入图片描述

同样的，我们也可以打印出带有CSS样式的文字和图片：

console.log("%c 老板叫你赶紧排期开发！！！", 'font-size: 28px; font-weight: bold; color : blue');
console.log("%c ", "background: url(http://img.doutula.com/production/uploads/image/2019/05/31/20190531263745_BpyVan.jpg) no-repeat center;padding-left:600px;padding-bottom: 242px;")

在控制台看到的内容就如下图所示：
在这里插入图片描述
通过格式修饰符，我们就可以在控制台输出我们想要的任何文字图片信息，所以我们平时浏览网站的时候打开控制台看到的图片和文字信息，就是用console来实现的啦~

说了这几个小技巧，其实除了这3个点，强大的console也还有很多其它的用法：

分类输出：.log .info .warn .error

console.log('文字信息');

console.info('提示信息');

console.warn('警告信息');

console.error('错误信息');

分组输出：使用console.group()和console.groupEnd()包裹分组内容。

console.group('group1');
console.log('a');
console.log('b');
console.groupEnd('group1')

表格输出：使用console.table()可以将传入的对象，或数组以表格形式输出。适合排列整齐的元素

var Obj = {
    
    
    Obj1: {
    
    
        a: "aaa",
        b: "bbb",
        c: "ccc"
    },
    Obj2: {
    
    
        a: "aaa",
        b: "bbb",
        c: "ccc"
    },
    Obj3: {
    
    
        a: "aaa",
        b: "bbb",
        c: "ccc"
    },
    Obj4: {
    
    
        a: "aaa",
        b: "bbb",
        c: "ccc"
    }
}
 
console.table(Obj);

查看一个对象的所有属性和方法：console.dir()

console.dir(obj)

条件输出：使用console.assert(),可以进行条件输出

当第一个参数或返回值为真时，不输出内容
当第一个参数或返回值为假时，输出后面的内容并抛出异常

如：

console.assert(true, "你永远看不见我");

console.assert(false, "你看得见我");

计次输出：使用console.count()输出内容和被调用的次数

(function () {
    
    
    for(var i = 0; i < 3; i++){
    
    
        console.count("运行次数：");
    }
})()

记时功能：使用console.time()和console.timeEnd()包裹需要计时的代码片段，输出运行这段代码的时间。
如：
清除控制台上所有信息：console.clear()，方法在执行成功后，会在控制台输出: “Console was cleared”。

clear之后就本文就该结束了，其实console的用法很多，有些方法在调试的时候还是很有用的，可以节省很多时间，存在即是合理的，在合适的地方用合适的方法对开发也是很大的帮助~

开发小技巧之巧用console

猜你喜欢