Question

由于我的学校计算机（chromebook）上的chrome dev工具被阻止，我必须构建自己的开发工具进行调试。

我选择使用html文件进行调试。这就是我现在所拥有的：一个用于源代码的巨型textarea，一个用于调试的控制台，以及一个用于显示我的结果的iframe。

我想在iframe中调用log()时查看调用堆栈。这是我用于记录的代码（作为console.log的替代品）：

outputIframe.contentWindow.log = function(tobelogged) {
    consoleDisplay((new Error).stack);   //for getting the stack trace https://stackoverflow.com/questions/1340872/how-to-get-javascript-caller-function-line-number-how-to-get-javascript-caller
    consoleDisplay(tobelogged);
}

然而，这是结果：

源代码输入：<html><body><script>function abc(){log(123);};abc()</script></body></html>

控制台输出：

<  Error
       at outputIframe.contentWindow.log (<anonymous>:244:34)
       at refresh (<anonymous>:260:47)
       at HTMLIFrameElement.outputIframe.onmouseenter (<anonymous>:235:25)
--------------------------------------------------------------------------
<  123

这就是我想要的：

<  Error
       at abc (<anonymous>:1:16)
       at <anonymous>:1:27
--------------------------------------------------------------------------
<  123

或：

<  123
       at log (somewhere:1:16)   //this line actually does not matter
       at abc (<anonymous>:1:16)
       at <anonymous>:1:27

简而言之，我想访问iframe中的调用堆栈。有什么想法吗？

提前谢谢。

P.S。由于我的计算机是chromebook，我不需要浏览器兼容性。我正在使用的浏览器始终是谷歌浏览器的最新版本。

Answer 1

我将(new Error).stack放在iframe而不是我的编辑器源代码中，它解决了我的问题。

要阻止beforeunload弹出广告和TypeError: Assignment to constant variable.，我更新iframe的方式是完全删除它，然后将其复制回来（也许我应该使用location.reload()并更改addEventListener()）。

所以，我只是在iframe中添加了一行脚本并在我放入实际内容之前将其删除。

outputIframe.contentWindow.document.write('<script>window.log = function(a){parent.consoleDisplay((new Error).stack);parent.consoleDisplay(a);}<\/script>');
outputIframe.contentWindow.document.close();     //log function will be saved and
outputIframe.contentWindow.document.write('');   //event listeners will not be saved
outputIframe.contentWindow.addEventListener("error", (event)=>{consoleDisplay(event.error.stack);});
outputIframe.contentWindow.document.write(things_to_put_in);
outputIframe.contentWindow.document.close();

我认为另一种方法是创建一个脚本元素，追加它，然后删除它。我没有测试过它。

Answer 2

这并不能回答你的直接问题，但为什么不使用firebug lite呢？您将获得您正在描述的功能，以及更多：

＆＃13;

function test() {
    console.log((new Error).stack);
}

test();

＆＃13;

<script id="FirebugLite" src="https://getfirebug.com/firebug-lite.js#startOpened" firebuglite="4"></script>

<div id="firebug">Just use firebug lite</div>

＆＃13;

在iframe中访问调用堆栈

2 个答案: