Chromebook禁用DevTools，自制调试工具如何查看iframe的log调用栈

云原生阿岚

2026-5-26

解决iframe内自定义log函数获取调用栈的问题

嘿，这个需求很好实现！你可以利用JavaScript的Error对象自带的stack属性来捕获调用栈信息，下面是具体的实现方案：

核心思路

JavaScript中创建Error实例时，它的stack属性会自动记录当前的调用链。我们只需要在自定义的log函数里生成这个Error对象，然后过滤掉log函数自身的调用层级，就能拿到真正的调用栈了。

修改后的代码示例

outputIframe.contentWindow.log = function(tobelogged) {
  // 生成Error对象以获取调用栈
  const errorInstance = new Error();
  // 解析调用栈：去掉前两行（Error构造和log函数自身的调用）
  const cleanCallStack = errorInstance.stack
    .split('\n')
    .slice(2) // 从第三行开始才是真正的调用来源
    .map(line => line.trim()) // 去掉每行的多余空格
    .join('\n');

  // 将日志内容和调用栈输出到你的调试控制台
  // 假设consoleDisplay是你用来展示日志的元素
  consoleDisplay.innerHTML += `
    <div class="log-entry">
      <strong>[LOG]</strong> ${JSON.stringify(tobelogged)}<br>
      <strong>[调用栈]</strong><br>
      <pre>${cleanCallStack}</pre>
    </div>
    <hr>
  `;
};

关键细节说明

为什么用slice(2)？：默认的stack字符串前两行通常是Error构造函数的调用和你的自定义log函数本身的调用，这两行对我们没有意义，所以直接截取后面的内容。
格式化处理：用map(line => line.trim())可以让调用栈的显示更整洁；如果你的控制台支持HTML，用<pre>标签包裹调用栈能保留换行和缩进，可读性更好。
兼容小提示：虽然现代浏览器都支持Error.stack，但如果要考虑更旧的环境，可以加个判断：if (errorInstance.stack)再处理调用栈，避免报错。