是否可以在任何Web调试器中看到所有
JavaScript函数调用为树？
UPDATE
我的意思是调试器可以记住每个函数调用,从中完成其他功能,也可以记住每个调用的堆栈帧和整个DOM快照.
更新2
以下页码：
<!DOCTYPE html> <html> <head> <Meta charset="UTF-8"> <title>Trace and log all javascript functions calling tree/graph?</title> <script type="text/javascript"> function init() { setDiv2("This div text was changed once"); setDiv2("This div text was changed twice"); }; function setDiv2(text) { document.getElementById("div2").innerHTML = text; } window.onload = init; </script> </head> <body> <h1>Trace and log all javascript functions calling tree/graph?</h1> <p><a href="https://stackoverflow.com/questions/20910262/trace-and-log-all-javascript-functions-calling-tree-graph">Stack Overflow Question #20910262</a></p> <div id="div1">This div will not changed</div> <div id="div2">This div text will change</div> <div> <h2>The call graph should be follows</h2> </div> </body> </html>
应该给出以下调用图
在分析器的自顶向下视图中可见
其中setDiv2()函数绘制一次.这对分析有好处,但这不是调用图.
所以问题依然存在.
更新3
此外,用户应该能够遍历每个树节点,并查看所有变量的值和当前整个DOM树的状态,由节点表示.
解决方法
您的需求显然是一个定制分析器. Chrome JS分析器是一个很好的方便的工具.但我不认为这是正确的工具.其他的Firebug或Safari分析器(webkit)也不会为你做这个工作.所以你需要开发自己的定制分析器.因为其他人只对cpu时间分析或内存使用情况分析或CSS选择器感兴趣/有针对性.
您可以修改Object.prototype.constructor.所以您定义的所有全局函数都可以使用特殊的配置文件方法.或通过Function.prototype.bind()借用的方法,您可以将执行中所需的所有数据填充到特殊数据对象中.这可以像树层次结构那样.以下是启动自定义分析器的地方.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function
和
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object
