这是我参与「第四届青训营」笔记创作活动的第3天

前言

没有一个程序员敢说出自己写的代码没有bug，所以有人调侃说程序员每天上班就干三件事开会、写bug、debug。

作为一名前端er，相信大家都常用Chrome调试页面，这里我简要分享一些除了console.log以外的方法。

关于console

console对象其实提供了十分丰富的API，而不仅仅是console.log，感兴趣的朋友可自行查阅文档。

常用的console方法

console.log，console.warn，console.error，console.info这四个方法常用在调试代码内，单条使用时调试作用于console.log基本没区别。如下图：

const str = 'test'
console.log(str)
console.warn(str)
console.error(str)
console.info(str)

若是结合使用，可通过左侧筛选自己想要的信息。
PS：如果你的没有左侧筛选栏，可以点击清空控制台左边的按钮。

不常用的console方法（不为人知的小技巧~）

这里介绍一些你没听过的console方法。

console.table

console.table可以将JSON或数组格式数据以表格形式输出在控制台中。

    const studentsArr = [
      { id: 1, name: "小明", grade: 1 },
      { id: 2, name: "小强", grade: 2 },
      { id: 3, name: "小美", grade: 1 },
    ];
    console.table(studentsArr);

table示例.png
注：经笔者测试，如果是JSON格式数据他只会展示前两层，若有三层及以上的嵌套，这部分数据都不会展示。

console.time

console.time常与console.timeEnd成对出现。作用类似于一个计时器，举个例子就懂了：

    function add(x, y) {
        return x + y
    }
    console.time('add')
    console.log(add(1,2));
    console.timeEnd('add')

time示例.png
注：里面参数不一定需要和函数重名，参数类似于给计时器一个id，如果将上面的add改为finished，如图：

有趣的console（没用的技巧）

看平常的输出台输出信息可能觉得太枯燥难看了可以添加一些样式。

    const str = 'Hello World'
    const style = 'font-size: 24px; color: red'
    console.log('%c%s',style, str );

%c是样式占位符，%s是字符串占位符。
还有%o对象占位符，%d数字占位符。

小结

其实长久以来，我也只是会用console.log和简单的断点来调试，现在学到了这么些技巧就赶紧记录下来并分享给大家啦。

Chrome前端调试必知知识与技巧 | 青训营笔记

前言