Where does JSFiddle store my variables?

Question

Introductory comments: As an experiment, I'm debugging some code with JSFiddle. I have no trouble adding debugger; statements or displaying stuff in alert(); windows. My problem is with the Chrome Console: I'd like to use it to print out the values of variables.

Illustrative example: On JSFiddle, I put the following code in the JavaScript box.

var sampleVar = "test value";

After the code has run, it seems that I have no way of viewing the variable values. I can view them before the program's run to completion, by adding a debugger; statement and evaluating sampleVar on the console. (As shown by this (ridiculously simple) JSFiddle and this screenshot.)

Further extrapolation: But I'd like to be able to open up the complete program and probe through it's variables. Is there a way for me to do that? I tried opening up the console and evaluating sampleVar but it appears to be undefined on the top-level scope. (As shown in this screenshot.)

Restatement of question Where is JSFiddle putting my variables? How do I access them?

---

Postscript: Sorry for linking to imgur, I thought adding the pictures directly would distract from the question.

Notable comparison: Contrast this difficulty debugging JSFiddle with the ease of debugging JSBin. If I open a "Console" frame in JSBin I can recall the variables I declared in my code, no problem.

Answer 1

Where is JSFiddle putting my variables? How do I access them?

It's putting it where you're telling it to. JSFiddle defaults to put all your code in a window.onload function which means everything you declare with var is local to that callback. (You can of course set properties on window explicitly). Here is such an example.

This setting is changeable from the left hand menu - if you move it to head or body you will have access to them from the developer tools. Moreover, it's worth mentioning that if you invoke the debugger while that code is running you will have access to those variables even if they are in a closure.

Answer 2

The code is evaluated in an iframe on a different domain (fiddle.jsshell.net). This is done for security reasons.

edit: In Firebug, you can use cd(document.querySelector('iframe').contentWindow);, in Chrome you can use the dropdown next to the filter icon to switch frames.