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

Question

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

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

Run Code Online (Sandbox Code Playgroud)

应该给出以下调用图

在此输入图像描述

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

在Profiler的自上而下视图中,它可见为

在此输入图像描述

其中setDiv2()功能绘制一次.这对于分析很有用,但这不是调用图.

所以问题仍然存在.

更新3

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

Answer 1

tes*_*604 1

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

归档时间：	11 年，10 月前
查看次数：	5213 次
最近记录：	11 年，9 月前