JavaScript调试：console 命令的使用

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 常用命令输出信息。

javascript 复制代码

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 占位符格式输出信息。

javascript 复制代码

//占位符：字符串
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() 命令，打印对象信息。

javascript 复制代码

//定义对象
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() 命令，打印列表信息。

javascript 复制代码

//定义列表
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() 命令，统计方法被调用的次数。

javascript 复制代码

function myCount() {
    for (let i = 0; i < 5; i++) {
        //使用 count 命令，统计别执行的次数
        console.count("统计次数");
    }
}

//调用方法
myCount();

执行结果：