跟踪和记录所有调用树/图的 JavaScript 函数？答案

【问题标题】：Trace and log all javascript functions calling tree/graph?跟踪和记录所有调用树/图的 JavaScript 函数？
【发布时间】：2014-01-17 00:00:51
【问题描述】：

是否可以在任何 Web 调试器中将所有 javascript 函数调用视为树？

更新

我的意思是调试器可以记住每个函数调用，它是从哪个其他函数完成的，它还可以记住每个调用的堆栈帧和整个 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="http://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() 函数被调用了两次。

在分析器的自上而下视图中可见

setDiv2() 函数绘制一次。这对分析很有用，但这不是调用图。

所以问题仍然存在。

更新 3

此外，用户应该能够踩到每个树节点，并看到所有变量的值以及当前整个DOM树的状态，由节点表示。

【问题讨论】：

请检查 Google Chrome 开发控制台的功能
@JanDvorak 我看不到我正在寻找的功能。
检查CPU profiler，特别是
@JanDvorak CPU 分析器看起来不像我想要的那样。可能是我弄错了，但那里的调用看起来像是按消耗时间排序并按功能分组（因为它应该在分析器中）。我需要整个调用图，其中调用按执行顺序排序，每个函数都表示它被调用的次数。
共有三种视图：自顶向下（函数及其被调用者）、自底向上（函数及其调用者）或火焰图（每个函数调用由放置在其调用者上的矩形表示，长度代表时间）。俯视图不是你想要的吗？

标签： javascript debugging web

【解决方案1】：

您的需求显然是自定义分析器。 Chrome JS profiler 是一个很好的便捷工具。但我认为这对你来说不是正确的工具。此外，Firebug 或 Safari profiler (webkits) 也不会为您完成这项工作。因此，您需要开发自己的自定义分析器。因为其他人只对 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 完成自定义分析器，请告诉我们。对于包括我在内的更多人来说，这将是一个非常有用的工具。

【讨论】：

【解决方案2】：

是的，当然。每个浏览器都支持调试 javascript 代码。您需要在您使用的特定浏览器中阅读。例如，您可以通过单击 Ctrl+Shift+K 在 Mozilla Firefox 中打开开发人员工具。在 Internet Explorer 中，您需要单击 F12 键。对于谷歌浏览器 Ctrl+Shift+I。打开工具后，需要设置断点，查看堆栈跟踪，局部变量等。设置断点后需要重新加载网页，因为页面加载时所有js都是第一次执行，你可以加载后捕获，或者为捕获断点创建一些事件。

【讨论】：

我在这两个浏览器中都没有看到。所有 javascript 调试都需要设置断点。我认为没有理由这样做，因为网页不是程序，它并不总是被执行。
我不知道在哪里设置断点，我也不想知道这个。我需要从头到尾跟踪所有 DOM 修改。
是的，页面不是程序。但页面有链接或嵌入脚本，加载后执行。
我找到了 Firefox addons.mozilla.org/en-US/firefox/addon/firediff 的扩展名，也许它有帮助。你还需要萤火虫。
所以每次执行都应该被捕获和记录。

【解决方案3】：

在 setDiv2 函数中尝试 console.trace()，在这种情况下，您将在 chrome 控制台中看到两个树调用。

     <!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;
            console.trace()
        }

        window.onload = init;

    </script>

</head>
.....

【讨论】：

我无法访问代码。我需要第三方页面的通用解决方案。