让我们超越 console.log 语句。（控制台对象远比我们看到的要复杂得多。）

不同类型的日志记录。

控制台.assert()

console.count、console.countReset

console.time()，console.timeEnd()

console.group()，console.groupEnd()

控制台.table()

控制台.trace()

格式化输出

consoel.log()是我们在开发过程中最重要且最早期学习到的调试工具之一javascript。该工具已成为开发过程中最重要的部分之一。大多数开发人员都是从console.log()语句开始调试的。

今天，在本教程中，我们将进一步了解对象可以为我们做console.log()什么，并提高我们使用控制台的生产力/熟练程度。console

不同类型的日志记录。

对于console对象，我们不仅有log语句，其中一些是warn和error。

控制台.warn()

console.warn()当你想表明代码中存在某些问题但还不至于被归类为错误时，这非常有用。

console.warn('This is a warning');

控制台.error()

console.error()当我们想表明代码中存在问题时，这是一个有用的语句。

console.error('This is an error');

控制台.assert()

console.assert()是一个条件错误打印机，在各种情况下都很有用。它接受两个参数，第一个参数是我们的条件。如果true错误信息不打印，则打印错误信息。如果false错误信息被记录到控制台，则打印错误信息。

console.assert(false, 'This error message will show up');

console.assert(true, 'This error message will not show up');

console.count、console.countReset

console.count()是对象提供的最重要的功能之一console。它可以用作计数器，每次调用时计数器都会加一，也console.countReset()可以用于重置计数器。

我们可以用它来计算循环中的迭代次数。
我们可以用它来查看某个函数被调用了多少次。
ETC

let x = 0;
const calculateSomeValue = x => x + 1;

while (x < 100) {
    x = calculateSomeValue(x);
    console.count('x');
}

console.countReset('x');
console.log('counter x has been reset');
console.count('x');

console.time()，console.timeEnd()

console.time()和console.timeEnd()是对象提供的非常重要的函数console。这两个函数可以用来启动和停止计时器。计时器在性能测试等应用中非常有用。

console.time('forLoopTimer');

for (let x = 0; x < 100000; x++) {
    console.count('forLoop');
}

console.timeEnd('forLoopTimer');

console.group()，console.groupEnd()

console.group()console.groupEnd()当您想要将一些日志封装在一起时，它们是非常有用的工具。

console.group();
console.log('This is console.log 1');
console.log('This is console.log 2');
console.log('This is console.log 3');
console.log('This is console.log 4');
console.groupEnd();

console.group();
console.log('This is console.log 5');
console.log('This is console.log 6');
console.log('This is console.log 7');
console.log('This is console.log 8');
console.groupEnd();

现在让我们疯狂地将它们嵌套起来，为了帮助嵌套，我们可以在每个组中传递标签，这些标签将充当我们的标识符。

console.group('Group1');
console.log('This is console.log 1');
console.log('This is console.log 2');
console.log('This is console.log 3');
console.log('This is console.log 4');

console.group('Group2');
console.log('This is console.log 5');
console.log('This is console.log 6');
console.log('This is console.log 7');
console.log('This is console.log 8');
console.groupEnd('Group2');

console.groupEnd('Group1');

控制台.table()

自从我发现它的那天起，console.table()我就爱上了它。你有一个需要以良好的对称方式查看的数组吗？或者有一个对象？console.table()你都了解吗？它需要两个参数tableData和tableColumn。第一个参数tableData是必需的，但第二个参数是可选的，用于指定要显示的列。

console.table(['One', 'Two', 'Three']);

console.table({
    name: 'Rishabh Jain',
    designation: 'Sen Software Engineer',
    country: 'India'
});

现在假设从上面的例子我们只想显示name和country。

console.table([{
    name: 'Rishabh Jain',
    designation: 'Sen Software Engineer',
    country: 'India'
}], ['name', 'country']);

控制台.trace()

很多时候，我们需要知道某个函数在哪里被调用，或者某个函数在哪里。console.trace()当你想知道你的函数何时被调用时，这个方法非常有用。你还可以将一个可选的标签传递给函数。

const myFunc = () => console.trace();

const myNewHOF = () => myFunc();

myNewHOF();

格式化输出

通过这个技巧，您可以按照自己想要的方式设置输出样式。

说明符	输出
%s	将值格式化为字符串
%i 或 %d	将值格式化为整数
％f	将值格式化为浮点数
%o	将值格式化为可扩展的 DOM 元素
%氧	将值格式化为可扩展的 JS 对象
%c	将 CSS 样式规则应用于输出字符串

console.log('%c Lets change this to cool', 'font-weight: bold; color: blue; background: cyan');

我是否遗漏了什么？请在下面的评论中告诉我...

感谢您阅读这篇文章。请在评论区告诉我如何改进，以及您还希望我写些什么。

链接浏览 https://dev.to/jrishabh55/let-s-go-beyond-console-log-statements-there-is-more-to-console-object-that-meets-the-eye-5536