Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Inspect js variables in Chrome Developer Tools

I've searched extensively but am only more confused than when I started. I have a very simple html+js webpage... html loads my js script, and the js script of course has lots of variables defined and used.

In Chrome Dev Tools I'm looking for a simple way of browsing all the variables defined and used in my js script, and their current values (with the execution paused).

I've looked in the Scope panel of the Sources tab, which looks promising, but I can't see my js variables in the Local part, and the Global part has an almost infinite tree of elements that I don't know where to start looking for variables specifically used in my js.

Code snippets below... so I'd like to find a convenient way of inspecting variables and their values, like data for example:

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...
    });

});
like image 931
drmrbrewer Avatar asked Aug 30 '15 10:08

drmrbrewer


1 Answers

The Google Chrome Breakpoints are what you were looking for. Just click at the line number you want to pause at and the execution stops next time the line is executed. You can then look into each variable in the current state.

like image 108
Le 'nton Avatar answered Oct 26 '22 20:10

Le 'nton