MDN - web/api/console

方法 作用 备注
assert() 如果断言为false, 则将一个错误消息写入控制台; 如果断言是 true,没有任何反应
clear() 清空控制台 在 chrome 中, 如果设置中选中了 Preserve log 选项, 则不起作用
count() 输出 count() 被调用的次数, 此函数接受一个可选参数 label 非标准, 尽量不要在生产环境中使用它
countReset() 清空 count() 被调用的次数, label 可选
debug() 输出“调试”级别的消息且仅仅控制台配置为显示调试输出时才显示该消息
dir() 在控制台中显示指定 JS 对象的属性, 并通过类似文件树样式的交互列表显示 非标准, 尽量不要在生产环境中使用它
dirxml() 显示一个明确的 XML/HTML 元素的包括所有后代元素的交互树, 如果无法作为一个 element 被显示, 那么会以 JS 对象的形式作为替代; 输出是一个继承的扩展的节点列表, 可以让你看到子节点的内容 非标准, 尽量不要在生产环境中使用它
error() 向 Web 控制台输出一条错误消息 exception() 是 error() 的别名, 功能相同
group() 在 Web 控制台上创建一个新的分组, 随后输出到控制台上的内容都会被添加一个缩进, 表示该内容属于当前分组,直到调用 groupEnd() 之后,当前分组结束
groupCollapsed() group() 作用相同, 不同的是该方法新建的分组默认是折叠的
groupEnd() 在 Web 控制台中退出一格缩进(结束分组)
info() 向 web 控制台输出一个通知信息
log() 向 Web 控制台输出一条消息
table() 将数据以表格的形式显示 这个方法需要一个必须参数 data, data 必须是一个数组或者是一个对象; 还可以使用一个可选参数 columns
time() 可以启动一个计时器来跟踪某一个操作的占用时长 每一个计时器必须拥有唯一的名字, 页面中最多能同时运行10,000个计时器
timeEnd() 停止一个通过 time() 启动的计时器 非标准, 尽量不要在生产环境中使用它
timeLog() 向浏览器的 Performance 或者 Waterfall 工具添加一个标记; 可以将代码中的一个点和其他在时间轴上已记录的事件相关联, 例如布局事件和绘制事件等 非标准, 尽量不要在生产环境中使用它
trace() 向 Web 控制台输出一个堆栈跟踪
warn() 向 Web 控制台输出一条警告信息

打印全名变量

可以通过 {} 来对所打印的属性作区分

其实直接跟到后面一个特定的字符便于识别就好了

1
2
3
4
funciton sum(a, b) {
console.log({b}) // {b: x}
console.log(b, 111) // x, 111
}

格式化字符串

说明符 作用
%s 元素转换为字符串
%d 或 %i 元素转换为整数
%f 元素转换为浮点数
%o 元素以最有效的格式显示
%O 元素以最有效的格式显示
%c 应用提供的CSS
1
2
3
4
5
const name = 'mars';
const age = 5;
console.log('%s 今年 %i 岁了', user, age); // mars 今年 5 岁了

console.log('%c message', 'font-size: npx; ...')

使用 console.table() 打印对象

1
2
3
4
5
6
var animals = [
{ animal: 'Horse', name: 'Henry', age: 43 },
{ animal: 'Dog', name: 'Fred', age: 13 },
{ animal: 'Cat', name: 'Frodo', age: 18 }
];
console.table(animals);

使用 console.time() 和 console.timeEnd() 测试循环

1
2
3
4
5
6
console.time('Timer1');
var items = [];
for(var i = 0; i < 100000; i++){
items.push({index: i});
}
console.timeEnd('Timer1'); // Timer1: xx.yy ms

使用 console.trace() 获取函数的堆栈跟踪信息

由于 JS 不是一个很结构化的语言, 有时候很难知道什么时候发生了什么, 使用 console.trace (仅仅只是在控制台中跟踪) 可以方便地调试 JS

相当于提供了一个调用堆栈的选择列表

优点

  • 改进代码
  • 获取跟踪信息和所有涉及的函数, 每一项都可以点击, 可以在它们之间来回切换
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
var car;
var func1 = function () {
func2()
}
var func2 = function () {
func4()
}
var func3 = function () {}
var func4 = function () {
car = new Car();
car.funcX();
}
var Car = function () {
this.brand = 'xxx';
this.color = 'yyy';
this.funcX = function () {
this.funcY();
}
this.funcY = function () {
this.funcZ();
}
this.funcZ = function () {
console.trace('trace') // 输出调用顺序
}
}
func1();

Reference