JavaScript学习日记 : Day28 - console实用技巧

开发过程中常常会需要使用console.log()来检视输出是否正确，所以能够妥善运用各种console的方法是很有帮助的。

范例 :

const cat1 = {
    name:"咪咪",
    age:2,
    color:"白色"
}

const cat2 = {
    name:"妹妹",
    age:1,
    color:"虎斑"
}

const cat3 = {
    name:"Toby",
    age:2,
    color:"虎斑"
}

const cats = [cat1,cat2,cat3]

1. console.log上色

使用关键字"%c"在文字前，在conosle.log的括弧内就可以接颜色的参数:

console.log(`%c${cat1.name}是${cat1.color}的猫`,'color:blue')

2. console.table()

用表格的方式来呈现资料，并且可以指定变数来排序:

console.table(cats)

3. console.group()

如果说一次有很多console，或是回圈中console并且数量很多，这时候介面就会非常混乱，console.group就是用来分类:

console.group('区块一');
console.log('区块一内容');
console.groupEnd();

console.group('cats区块');
for(let i = 0; i<cats.length; i++) {
    console.log(cats[i]);
}
console.groupEnd();

4. console.time()

可以用来了解特定范围中的程序码需要多少执行时间:

console.time("回圈时间");
for(let i = 0; i<cats.length; i++) {
    console.log(cats[i]);
}
console.timeEnd("回圈时间")

5. console.dir()

在查找/操作DOM元素时，console.dir()非常好用，因为他会把DOM元素转换为物件的形式，方便看出此元素有哪些方法可用:

const h1 = document.querySelector('h1');
console.dir(h1);

6. console.error()

与throw Error()有相同的效果，让错误讯息可以更加显目:

console.error(`${cat3.name}资料错误`)

7. console.warn()

一些函式库会透过各种形式避免错误，但也可以主动去提醒使用者一些资讯去避免错误，但是又不想直接喷出一个error的话就可以使用console.warn():

function add(a,b) {
    if(typeof a === 'number' && typeof b ==='number') {
        return a + b
    } else {
        console.warn("请输出数字类型!")
    }
}