控制台日志 - Javascript

控制台日志是一种在浏览器中用于调试JavaScript的工具。在开发过程中，经常需要查看变量的值，函数的执行情况或者调用栈信息等，此时控制台日志就是一个非常有用的工具。

如何使用控制台日志

在JavaScript中，我们可以使用console对象来输出日志信息。console对象是一个在浏览器中自带的全局对象，我们可以通过它来输出控制台日志信息。以下是console对象的一些常用方法：

• console.log() : 输出一般信息
• console.error() : 输出错误信息
• console.warn() : 输出警告信息
• console.info() : 输出信息
• console.debug() : 输出调试信息

如何使用：

console.log('Hello World!'); // 输出一条普通信息
console.error('Error!'); // 输出一条错误信息
console.warn('Warning!'); // 输出一条警告信息
console.info('Info!'); // 输出一条信息
console.debug('Debug!'); // 输出一条调试信息

打印对象

我们可以使用console.log()方法来打印一个对象，这里需要注意两点：

• 如果直接打印一个Object对象，则只显示该对象类型，不会打印属性值
• 如果需要查看一个对象的具体属性值，则需要打印该对象的属性

示例代码：

var obj = {
  name: 'Tom',
  age: 18
};
console.log(obj); // 只显示 {'name': 'Tom', 'age': 18}
console.log(obj.name); // 输出 'Tom'
console.log(obj.age); // 输出 18

格式化输出

我们可以使用%c占位符来实现格式化输出，使用方式如下：

console.log('%c This is a formatted message', 'color: blue; font-size: 20px;');

效果：

调试技巧

断点调试

我们可以在代码中插入一个断点来调试代码。当断点被触发时，控制台将会暂停代码的执行，这时我们可以查看变量的值、调用栈等信息，从而更好地理解代码的执行流程。

控制台监测变量

当我们想知道某个变量的值是否改变时，我们可以在控制台中监测该变量。在控制台中输入该变量的名称，即可实时查看该变量的值。如下图所示：

分组显示

当输出的日志过多时，我们可以使用console.group()和console.groupEnd()来将不同类型的日志分组，并且折叠起来，方便我们查看。

console.group('Group1');
console.log('Hello World!');
console.log('1');
console.log('2');
console.groupEnd();
console.group('Group2');
console.log('CSDN');
console.log('Blog');
console.groupEnd();

效果：

总结

控制台日志是JavaScript调试不可少的一个工具。掌握控制台日志的使用技巧，并灵活运用，能够提高我们的开发效率。