console.奇思妙用

添加CSS样式

我一直很好奇vue的dev-tools在控制台的带样式信息是怎么显示的，后来知道可以用%c占位符，恍然大悟。
然后我就尝试自己写了一下，上效果图。

console.log 样式

再上代码（其实就是先写好样式，再传进去）

// 添加CSS样式
console.log('%c vue-devtools %c Detected Vue v2.6.11 ',
`
    width: 100px;
    height: 18px;
    line-height: 18px;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    color: white;
    background-color: rgb(53,73,94);
`,
`
    width: 150px;
    height: 18px;
    line-height: 18px;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    color: white;
    background-color: rgb(65,184,131);
`)

%c 后面应用样式，我写的空格就是懒得写padding了

计时

之前看到一个大佬测试不同方法的数组去重，用的是new Date().getTime()来计算时间间隔。后来我看到
console.time()才发现有这么好用的东西。

// 计算Set方法数组去重的效率
const arr = [1,2,3,4,5,4,3,2,1];
// 开始计时
console.time();
// 数组去重
const newArr = [...new Set(arr)];
console.log(arr,newArr);
// 结束计时
console.timeEnd();

console.time()开始计时，console.timeLog()打印即刻的计时秒数，console.timeEnd()结束并打印计时。
可以传参数代表计时器的名称，若不传默认名称为default。

计时效果

以上两个是我认为很有趣的两个console方法，console还有其他一些很好用的方法，warn、error、table等等，我就不赘述了。想了解更多可以查看文档 - Console - MDN 文档