1、console 命令介绍
console 对象用于 JavaScript 调试。JavaScript 原生中默认是没有 console 对象，这是宿主对象（也就是浏览器）提供的内置对象。 用于访问调试控制台,在不同的浏览器里效果可能不同。
console 对象常见的两个用途：
（1）显示网页代码运行时的错误信息。
（2）提供了一个命令行接口，用来与网页代码互动。
console 命令列表：
| 命令 | 说明 |
|---|---|
| console.log() | 用于输出日志信息。 |
| console.info() | 用于输出提示性信息。 |
| console.debug() | console.debug方法与console.log方法类似，会在控制台输出调试信息。但是，默认情况下，console.debug输出的信息不会显示，只有在打开显示级别在verbose的情况下，才会显示。 |
| console.warn() | 用于输出警示信息。 |
| console.error() | 用于输出错误信息。 |
| console.dir() | 用于将传入对象的属性，包括子对象的属性以列表形式输出。 |
| console.table() | 用于将传入的对象或数组以表格形式输出。 |
| console.count() | 用于统计代码被执行的次数。 |
| console.assert() | 用于对输入的表达式进行断言，只有表达式为false时，才输出相应的信息到控制台。 |
| console.time()、console.timeEnd() | 用于查看执行所用时间。 |
| console.group()、console.groupEnd() | 让控制台输出的语句产生不同的层级嵌套关系。 |
| console.profile()、console.profileEnd() | 查看CPU使用相关信息，性能分析。 |
| console.trace() | 用于追踪函数的调用过程。 |
| console.clear() | 清除当前控制台的所有输出，将光标回置到第一行。 |
2、console 常用命令
2.1 console 常用命令的使用
console 常用命令的有以下4个：
- console.log()：用于输出日志信息。
- console.info()：用于输出提示性信息。
- console.warn()：用于输出警示信息。
- console.error()：用于输出错误信息。
【实例】使用 console 常用命令输出信息。
console.log("博客信息：您好，欢迎访问 pan_junbiao的博客");
console.info("博客地址：https://blog.csdn.net/pan_junbiao");
console.error("这是错误");
console.warn("这是警告");执行结果：
以 Chrome 浏览器为例，我们可以通过按 F12 或者 Control+Shift+i（PC平台）/ Alt+Command+i（Mac平台）来打开 Console 窗口。
2.2 占位符格式
console 命令支持 printf 的占位符格式，支持的占位符有：字符（%s）、整数（%d 或 %i）、浮点数（%f）和对象（%o）:
| 占位符 | 作用 |
|---|---|
| %s | 字符串 |
| %d 或 %i | 整数 |
| %f | 浮点数 |
| %o | 可展开的DOM |
| %O | 列出DOM的属性 |
| %c | 根据提供的CSS样式格式化字符串 |
【实例】使用 console 占位符格式输出信息。
//占位符：字符串
console.log("博客信息：%s","您好，欢迎访问 pan_junbiao的博客");
console.log("博客地址：%s","https://blog.csdn.net/pan_junbiao");
//占位符：整数
console.log("%d年%d月%d日",2024,8,15);
//占位符：CSS样式格式化
console.log("%c您好，欢迎访问 pan_junbiao的博客", "color:red; font-size:26px");
console.log("%c博客地址：%s", "color:blue; font-size:20px","https://blog.csdn.net/pan_junbiao"); 执行结果：
3、console 特殊命令
3.1 console.dir() 命令
console.dir() 命令用于将传入对象的属性，包括子对象的属性以列表形式输出。
【实例】使用 console.dir() 命令，打印对象信息。
//定义对象
let blogInfo = {
id: 1,
userName: 'pan_junbiao的博客',
blogName: '您好，欢迎访问 pan_junbiao的博客',
blogUrl: 'https://blog.csdn.net/pan_junbiao'
};
//使用 dir 命令，打印对象信息
console.dir(blogInfo);执行结果：
3.2 console.table() 命令
console.table() 命令用于将传入的对象或数组以表格形式输出。
【实例】使用 console.table() 命令，打印列表信息。
//定义列表
let productList = {
Huawei: { id: 1, productName: '华为手机', price: 5999 },
XiaoMi: { id: 2, productName: '小米手机', price: 1399 },
iPhone: { id: 3, productName: '苹果手机', price: 8999 }
};
//使用 table 命令，打印列表信息
console.table(productList);执行结果：
3.3 console.count() 命令
console.count() 命令用于统计代码被执行的次数。
【实例】使用 console.count() 命令，统计方法被调用的次数。
function myCount() {
for (let i = 0; i < 5; i++) {
//使用 count 命令，统计别执行的次数
console.count("统计次数");
}
}
//调用方法
myCount();执行结果：
