F12 开发者工具中的控制台(Console)功能:

1. 打开控制台:

在任何网页上按下 F12 键(或 Ctrl+Shift+I 在 Windows/Linux 上, Command+Option+I 在 Mac 上)可以打开开发者工具。

控制台标签页通常位于开发者工具的底部或右侧。

2. 输出信息:

console.log()：输出普通信息,可以是变量、对象或字符串。

console.error()：输出错误信息,以红色显示。

console.warn()：输出警告信息,以黄色显示。

console.info()：输出提示信息,以蓝色显示。

3. 控制台输入:

你可以在控制台中直接输入 JavaScript 代码,并查看执行结果。

使用 ↑ 和 ↓ 键可以浏览之前输入的命令。

4.清除控制台:

console.clear()：清除控制台中的所有输出。

5.格式化输出:

console.table()：以表格形式显示数组或对象数据。

console.dir()：以分层的形式显示对象的属性和方法。

6.分组输出:

console.group()：开始一个新的输出分组。

console.groupEnd()：结束当前分组。

console.groupCollapsed()：开始一个默认折叠的分组。

7.性能分析:

console.time()/console.timeEnd()：测量代码执行时间。

console.profile()/console.profileEnd()：进行 CPU 性能分析。

8.断点调试:

你可以在代码中设置断点,暂停执行并检查变量值。

使用"步进"、"步过"和"步出"功能控制代码的执行流程:

步进(Step Into)：进入函数内部,逐行执行代码。

步过(Step Over)：直接执行函数,不进入内部。

步出(Step Out)：退出当前函数,返回到函数调用点。