Трассировать и записывать все функции javascript, вызывающие дерево/граф?

Можно ли увидеть все вызовы функций 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="#" onclick="location.href='http://stackoverflow.com/info/20910262/trace-and-log-all-javascript-functions-calling-tree-graph'; return false;">Qaru 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

Кроме того, пользователи должны иметь возможность наступать на каждое дерево node и видеть значения всех переменных и состояние всего дерева DOM в данный момент, представленное node.

Ответ 1

Ваша потребность, очевидно, является настраиваемым профилировщиком. Профилировщик Chrome JS - хороший инструмент. но я не думаю, что это правильный инструмент для вас. Также среди других Firebug или Safari-профилировщик (webkits) не будут выполнять эту работу за вас. Поэтому вам нужно разработать свой собственный профилировщик. так как другие заинтересованы/нацелены только на профилирование времени процессора или профилирование использования памяти или 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. Вы должны прочитать о них в определенном браузере. Например, вы можете открыть инструменты разработчика в Mozilla Firefox, нажав Ctrl + Shift + K. В Internet Explorer вам нужно нажать клавишу F12. Для Google Chrome Ctrl + Shift + I. После открытия инструментов вам необходимо настроить точку останова, в которой вы хотите увидеть трассировку стека, локальные переменные и т.д. После установки точки останова вам необходимо перезагрузить веб-страницу, потому что когда страница загружается, все js выполняются в первый раз, и вы можете улов после загрузки или сделать какое-то событие для контрольной точки catch.

Ответ 3

попробуйте console.trace() в вашей функции setDiv2, в этом случае вы увидите оба дерева вызовов в консоли хром.

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