Chrome DevTools性能录制为何未显示部分已调用函数？

核心原因 #

你的logger函数逻辑简单且执行时间极短，V8引擎的JIT编译器会自动将这类函数内联优化，导致它们不会出现在性能调用栈中；同时默认的性能采样频率可能漏掉执行时间极短的函数调用。

具体解决步骤 #

1. 禁用JavaScript代码优化 #

关闭V8的自动优化，避免函数被内联：

• 打开DevTools，点击右上角齿轮图标进入「Settings」
• 切换到「Experiments」标签
• 勾选「Disable JavaScript optimizations」选项
• 重启DevTools（关闭后重新打开）

2. 启用完整JavaScript栈录制 #

确保性能录制时捕获所有函数调用：

• 打开「Performance」面板
• 点击录制按钮旁的设置图标（⚙️）
• 勾选「Record JavaScript stack」选项
• 保持「Advanced instrumentation」开启状态

3. 调整采样频率（可选） #

提高采样精度，避免漏掉短执行时间的函数：

• 在Performance面板设置中找到「Sample interval」
• 将默认1ms改为0.1ms（最小可选值）

4. 手动标记函数（兜底方案） #

如果上述设置仍不生效，可在函数中添加强制栈记录的代码（仅用于调试，勿用于生产环境）：

function logger1() {
    debugger; // 强制触发栈记录
    for (var n = 0; n < 1e4; n++) {}
    console.log(1)
}

或者用console.trace()辅助确认执行时机：

function logger1() {
    console.trace('logger1 executed');
    for (var n = 0; n < 1e4; n++) {}
    console.log(1)
}

验证方法 #

调整设置后重新运行代码并启动性能录制，完成后在「Call Tree」或「Bottom-Up」面板中搜索logger关键词，即可看到所有logger函数的调用记录。

内容的提问来源于stack exchange，提问作者Mohmmad Ebrahimi Aval