Menu
Is it possible to see all javascript function calls as a tree in any web debugger?
UPDATE
I mean debugger could remember each function call, from which other function it was done, also it could remember stack frame per each call and entire DOM snapshot.
UPDATE 2
The following page code:
<!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>
Should give the following call graph
because setDiv2() function called twice.
In profiler's top-down view it is visible as
where setDiv2() function drawn once. This is good for profiling, but this is not call graph.
So the question persists.
UPDATE 3
Moreover, users should be able to step on each tree node and see the values of all variables and the state of entire DOM tree at the moment, represented by the node.
504
Your need is obviously a custom profiler. Chrome JS profiler is a good handy tool. but i don't think that is correct tool for you. Also among the others Firebug or Safari profiler (webkits) won't do the job for you. So you need to develop your own custom profiler. since the others are only interested/targeted with CPU time profiling or memory usage profiling or CSS selectors.
You can modify Object.prototype.constructor. so all the global functions you have defined can have special profile method. or borrowed method via Function.prototype.bind() you can populate all the data you need from executions into a special data object. which can be like in a tree hierarchy. Here is the places to start a custom profiler.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function and https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object
Let us know if you can complete a custom profiler for javascript. it will be really useful tool for more people including me.
195
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
