跟踪并记录调用树/图的所有javascript函数?

前端之家收集整理的这篇文章主要介绍了跟踪并记录调用树/图的所有javascript函数?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
是否可以在任何Web调试器中看到所有 JavaScript函数调用为树?

UPDATE

我的意思是调试器可以记住每个函数调用,从中完成其他功能,也可以记住每个调用的堆栈帧和整个DOM快照.

更新2

以下页码

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <Meta charset="UTF-8">
  5. <title>Trace and log all javascript functions calling tree/graph?</title>
  6.  
  7. <script type="text/javascript">
  8.  
  9. function init() {
  10.  
  11. setDiv2("This div text was changed once");
  12. setDiv2("This div text was changed twice");
  13.  
  14. };
  15.  
  16. function setDiv2(text) {
  17. document.getElementById("div2").innerHTML = text;
  18. }
  19.  
  20. window.onload = init;
  21.  
  22. </script>
  23.  
  24. </head>
  25. <body>
  26.  
  27. <h1>Trace and log all javascript functions calling tree/graph?</h1>
  28.  
  29. <p><a href="https://stackoverflow.com/questions/20910262/trace-and-log-all-javascript-functions-calling-tree-graph">Stack Overflow Question #20910262</a></p>
  30.  
  31. <div id="div1">This div will not changed</div>
  32.  
  33. <div id="div2">This div text will change</div>
  34.  
  35. <div>
  36.  
  37. <h2>The call graph should be follows</h2>
  38.  
  39.  
  40.  
  41. </div>
  42.  
  43. </body>
  44. </html>

应该给出以下调用

因为setDiv2()函数调用两次.

在分析器的自顶向下视图中可见

其中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

让我们知道如果你可以完成一个自定义的分析器的javascript.对于包括我在内的更多人来说,这将是非常有用的工具.

猜你在找的JavaScript相关文章