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