Question

是否可以在任何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>

应该给出以下调用图

enter image description here

因为setDiv2()函数调用了两次。

在Profiler的自上而下视图中，它显示为

enter image description here

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

所以问题仍然存在。

更新3

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

Answer 1

您的需求显然是自定义分析器。 Chrome JS profiler是一个很好用的工具。但我不认为这对你来说是正确的工具。其他Firebug或Safari分析器（webkits）也不会为您完成这项工作。因此，您需要开发自己的自定义分析器。因为其他人只对CPU时间分析或内存使用情况分析或CSS选择器感兴趣/目标。

您可以修改Object.prototype.constructor。所以你定义的所有全局函数都可以有特殊的profile方法。或通过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完成自定义配置文件，请告诉我们。它将是包括我在内的更多人的真正有用的工具。

Answer 2

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

Answer 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>
.....

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

3 个答案: