Осмотреть переменные js в инструментах разработчика Chrome

Я искал экстенсивно, но только более смущен, чем когда начал. У меня очень простая html + js веб-страница... html загружает мой js script, а js script, конечно, имеет множество переменных, определенных и используемых.

В Chrome Dev Tools я ищу простой способ просмотра всех переменных, определенных и используемых в моем js script, и их текущих значений (при выполнении паузы).

Я просмотрел панель Scope вкладки Sources, которая выглядит многообещающей, но я не вижу мои переменные js в части Local, а часть Global имеет почти бесконечную дерево элементов, которые я не знаю, с чего начать искать переменные, специально используемые в js.

Ниже приведены фрагменты кода... поэтому я хотел бы найти удобный способ проверки переменных и их значений, например data:

index.html:

<!DOCTYPE html>

<head>
    <script type="text/javascript" src="scripts/main.js"></script>
</head>

<body>
</body>

</html>

main.js:

$(document).ready(function() {

    var data = [];

    (function init() {
        $('#dragme').hide();
        var str = 'hello';
        data.push('sample');
        myFn(data, str);
        // more stuff here...
    });

});

Ответ 1