console调试技巧

跨页面如何保留console消息?

勾选 Preserve log即可

问题背景

有很多时候我很烦恼这样的问题，比如我在登陆页面打印了一个日志，然后我希望在登陆后的那个页面依然展示我打印的消息

Live Expressions

背景

If you find yourself typing the same JavaScript expression in the Console repeatedly, you might find it easier to create a Live Expression. With Live Expressions you type an expression once and then pin it to the top of your Console. The value of the expression updates in near real-time.

使用

点击这个眼睛即可

使用console断言

const x = 5;
const y = 3;
const reason = 'x is expected to be less than y';
console.assert(x < y, {x, y, reason});

如何使用计数器？

console.count()

如何计算执行时间差？

console.time();
for (var i = 0; i < 100000; i++) {
  let square = i ** 2;
}
console.timeEnd();

如何打印堆栈？

const first = () => { second(); };
const second = () => { third(); };
const third = () => { fourth(); };
const fourth = () => { console.trace(); };
first();

如何使用上一个返回值？

$_

如何快速引用一个元素？

使用鼠标检查元素，然后使用$0 即可引用

可以使用$0 $1 $2 $3分别表示最近检查的4个元素，从近到远

如何快速复制一个对象到剪贴板?

copy(object)

如何调试一个函数？

debug(fn)

把对象打印成表格？

var names = {
  0: { firstName: "John", lastName: "Smith" },
  1: { firstName: "Jane", lastName: "Doe" }
};
table(names);