- Published on
14-打印时间戳
- Authors
- Name
- Dendoink
- @Magiciaaaaaaaan
💡
问题 如果我们想看到打印的时间戳呢?
logs
加上时间戳
1. 给 这就用到了计时的相关操作:
要给应用中发生的事件, 加上一个确切的时间戳,需要开启 timestamps
。
你可以在设置(在调试工具中的 ⋮
下拉中找到它,或者按下 F1
)中来开启。
但是我建议你使用 Commands Menu

2. 监测执行时间
与其在所有事上展示一个时间戳,或许你对脚本中的特殊的节点之间执行的时间跨度更加感兴趣,对于这样的情况,我们可以采用一对有效的 console
方法
console.time()
— 开启一个计时器console.timeEnd()
— 结束计时并且将结果在console
中打印出来
如果你想一次记录多件事,可以往这些函数中传入不同的标签值。(例如: console.time('loading')
, console.timeEnd('loading')
)

console.log
基于调用堆栈自动缩进
3. 让 配合 Error
对象的 stack
属性,让你的 log
可以根据堆栈的调用自动缩进:
function log(message) {
console.log(
// 这句话是重点当我们 new 出来的 Error 对象时,会匹配它的stack 信息中的换行符,换行符出现的次数也等同于它在堆栈调用时的深度。
' '.repeat(new Error().stack.match(/\n/g).length - 2) + message
);
}
function foo() {
log('foo');
return bar() + bar();
}
function bar() {
log('bar');
return baz() + baz();
}
function baz() {
log('baz');
return 17;
}
foo();
运行结果如下:

Related series
00-写在前面
March 2, 2021
01-Chrome 版本
March 2, 2021
02-复制 & 保存
March 2, 2021
03-快捷键和通用技巧
March 2, 2021
04-使用 Command
March 2, 2021
05-代码块的使用
March 2, 2021
06-console 中的 $
March 2, 2021
07-console.log 的 "bug" ?
March 2, 2021
08-异步的 console
March 2, 2021
09-Ninja console.log
March 2, 2021
10-自定义格式转换器
March 2, 2021
11-对象&方法
March 2, 2021
12-console.log 并不简单
March 2, 2021
13-打造一个终极 log
March 2, 2021
14-打印时间戳
March 2, 2021
15-直接把 `log` 作为回调函数
March 2, 2021
16-初窥 Network
March 2, 2021
17-Network 深入
March 2, 2021
18-Network 细节
March 2, 2021
19-元素面板的基本操作
March 2, 2021
20-元素面板调试技巧
March 2, 2021
21-元素面板里的编辑器
March 2, 2021
22-颜色选择器
March 2, 2021
23-Drawer 使用技巧
March 2, 2021
24-Drawer 动画调试
March 2, 2021
25-Drawer 性能优化
March 2, 2021
26-Workspace 使用技巧
March 2, 2021
27-自动美化输出
March 2, 2021
28-CSS 概览
March 2, 2021
29-Custom UI Themes
March 2, 2021
30-Source diff
March 2, 2021