Console access to Javascript variables local to the $(document).ready function

Question

How can I access some variables inside

$(document).ready(function(){
    var foo=0;
    var bar = 3;
});

from Google chrome console? If I try alert(foo), I will get a message that it is not defined.

define them outside of $(document).ready( and then access them inside as well... — jtheman, Dec 07 '12 at 15:48
I don't want to declare them outside for security reasons, I'm just curious how or if they can be accessed with the console :) — Mircea Voivod, Dec 07 '12 at 15:49
Looks like a duplicate of http://stackoverflow.com/questions/11192875/is-it-possible-to-gain-access-to-the-closure-of-a-function — Denys Séguret, Dec 07 '12 at 15:51

score 51 · Accepted Answer · answered Dec 07 '12 at 15:51

51

Put a breakpoint with the debugger. You'll get full access to them when the debugger will stop.

Other answers telling you to put them in the global scope are bad. Don't use bad practices just because you don't know how to use the right tools.

answered Dec 07 '12 at 15:51

Florian Margaine

58,730
15
91
116

1

Could you link some information about this or what debugger should I use? Would be really appreciated. I'm new with javascript/jquery and I'm trying to check if those variables can be accessed in any way for security reasons. Thanks – Mircea Voivod Dec 07 '12 at 15:55
@Voldadrien On Google Chrome it is built in, see chrome->tools->Developer Tools then click "Sources" and look at the right hand column... watch expressions, call stack, breakpoints, etc... – Paul Dec 07 '12 at 15:57
1

@Vodaldrien Use Firebug or Chrome Dev Tools. These variables *can* be accessed by whoever uses your code. In any case. Don't think you can secure your code this way. Once you give a webpage to a client, he can do anything he wants with it. – Florian Margaine Dec 07 '12 at 15:57
3

@Vodaldrien Hiding the variables is more about avoiding bugs and having a cleaner codebase :) – Florian Margaine Dec 07 '12 at 15:59
4

@RocketHazmat for Chrome Dev tools, look [here](https://developers.google.com/chrome-developer-tools/docs/scripts-breakpoints). For Firebug, look into its doc. – Florian Margaine Dec 07 '12 at 16:01
2

this is the correct answer! just type in `debugger` anywhere in your js. It can be anywhere, including definitions, not just procedural calls.. – ahnbizcad Jun 05 '15 at 07:03

score 19 · Answer 2 · answered Dec 07 '12 at 15:49

19

You can't access these variables because they are defined within a functional closure. The only way you could do it is if you made a global reference to them outside your function's scope.

var foo, bar;

$(document).ready(function(){
    foo = 0;
    bar = 3;
});

answered Dec 07 '12 at 15:49

Xophmeister

8,884
4
44
87

17

6 upvotes for an answer advising to use global variables? Really? – Florian Margaine Dec 07 '12 at 15:52
2

I'm not advising using globals, just that it's the only way to do this! – Xophmeister Dec 07 '12 at 15:52
3

No, it's not. See my answer. – Florian Margaine Dec 07 '12 at 15:52
2

I think it's more important for the OP to understand closures than how to use debugging tools. – Xophmeister Dec 07 '12 at 15:54
Learning how to use closures has nothing to do. You're advising global variables where it's not necessary. – Florian Margaine Dec 07 '12 at 15:56
3

At the risk of starting a flame war: "The only way you could do it..." doesn't imply advice, just a solution. The only solution within the context of the language is to use an external scope (e.g., global scope, or some other namespace). However, as you say, this restriction can be lifted using sophisticated debugging tools; but this is outside the specification of the language, itself. – Xophmeister Dec 07 '12 at 16:03
If the code runs only once and you want to access local variables after completion - you have to expose it somehow. The debugger break point is a nice trick if you have the local variables accessible to functions that are currently running. – ubershmekel Apr 22 '16 at 17:21

score 17 · Answer 3 · answered Apr 08 '15 at 12:14

17

Why not do a proper expose variable ?

$(document).ready(function(){
    var foo=0;
    var bar = 3;

    $.exposed = {
        foo: foo,
        bar: bar
    }
});

Check your variables by doing

console.log($.exposed.bar)

answered Apr 08 '15 at 12:14

Eric Herlitz

25,354
27
113
157

Super useful for debugging! Nice. – Dan Bechard Nov 14 '17 at 00:27
This is a great idea and more cross browser suitable, although will have to be strict and not forget to remove them from here or use it as a shortcut, and then it becomes yet another window.variable problem. Otherwise, using `debugger;` is probably the best as it pretty much forces you to remove it before deployment. – redfox05 Apr 23 '19 at 17:48

score 5 · Answer 4 · edited May 23 '17 at 11:53

5

You can't since the are in a closure space. Here it explains how closure works (How do JavaScript closures work? ). To access the varible just set a breakpoint inside the $(document).ready function

edited May 23 '17 at 11:53

Community

1
1

answered Dec 07 '12 at 15:50

Stefan

14,826
17
80
143

Yanick Rochon · Answer 5 · 2012-12-07T16:34:58.767

4

If you really need to access these variables from different parts of your code (initialize them on document ready, then accessing them elsewhere, for example), then you have to declare them outside the function closure.

If and only if this is the case, I'm not a fan of cluttering the global space. I would suggest you to use a base object for that :

var myObj = {};

$(function() {
   myObj.foo = 0;
   myObj.bar = 3;
});

Note that they will only be set once the document is loaded! Therefore alert(myObj.foo); (or something similar) place immediately after the $(function() { ... }); block will yield undefined!

If you only need to access them inside that context, then do not declare anything outside the function. And try to debug your code with other methods. With chrome, console.log is quite helpful, for instance.

edited Dec 07 '12 at 16:34

answered Dec 07 '12 at 15:52

Yanick Rochon

51,409
25
133
214

2

The amount of variables in is cut in half. It is definitely better than declaring two variables. – Yanick Rochon Dec 07 '12 at 15:54
If the the variable `foo` *needs* to be accessed elsewhere, then you have no choice but to declare it outside, in a shared object. This is not bad practice, it is used all the time in JavaScript code. Some people abuse of it, but what I'm suggesting does not. – Yanick Rochon Dec 07 '12 at 15:56
But it does not need to declared elsewhere.... did you even read the OPs question? – Naftali Dec 07 '12 at 15:57
"Vote to remove this post" ? ... wow... I have read the question, and it is not specified. You speculate as much as I do, Neal. – Yanick Rochon Dec 07 '12 at 15:58
2

Not sure why this answer got voted down. It basically says the same thing as the accepted answer, but adds only a single global object instead of a bunch of random global variables. This is definitely the best of the "make it global" answers. – Michael Martin-Smucker Jun 05 '13 at 12:43

score 2 · Answer 6 · answered Dec 07 '12 at 15:49

2

$(document).ready(function(){
    window.foo=0;
    window.bar = 3;
});

You expose those vars into global scope(really not advised)

answered Dec 07 '12 at 15:49

Vytautas Butkus

5,365
6
30
45

score 1 · Answer 7 · answered Dec 07 '12 at 15:50

1

define them outside of $(document).ready() and then access them inside as well.

var foo = 0, bar = 3;
$(document).ready(function(){
    alert(foo);
});

answered Dec 07 '12 at 15:50

jtheman

7,421
3
28
39

score 0 · Answer 8 · answered Mar 01 '14 at 12:09

Actually there is a hackish way around it. You should probably not use it. Set a Breakpoint. That being said, here's the code:

$(document).ready(
    readyClosure = function(access){
        var x = 5; 
        return eval(access);
    }
);
readyClosure('x'); // returns 5

Console access to Javascript variables local to the $(document).ready function

8 Answers8

Linked

Related