Question

介绍性评论：作为一项实验，我正在使用JSFiddle调试一些代码。我可以在debugger;窗口中添加alert();语句或显示内容。我的问题出在Chrome控制台上：我想用它来打印出变量值。

说明性示例：在JSFiddle上，我将以下代码放在JavaScript框中。

var sampleVar = "test value";

代码运行后，我似乎无法查看变量值。我可以在程序运行完成之前通过添加debugger;语句并在控制台上评估sampleVar来查看它们。（如this (ridiculously simple) JSFiddle和this screenshot所示。）

进一步推断：但我希望能够打开完整的程序并探究它的变量。我有办法做到这一点吗？我尝试打开控制台并评估sampleVar，但它似乎在顶级范围内未定义。（如this screenshot.）

所示

重述问题 JSFiddle把变量放在哪里？我如何访问它们？

后记：很抱歉链接到imgur，我认为直接添加图片会分散注意力。

值得注意的比较：将调试JSFiddle的难度与调试JSBin的难易程度进行对比。如果我打开一个＆＃34;控制台＆＃34; JSBin中的框架我可以回想一下我在代码中声明的变量，没问题。

Answer 1

JSFiddle把我的变量放在哪里？我如何访问它们？

它把它放在你告诉它的地方。 JSFiddle默认将所有代码放在window.onload函数中，这意味着您使用var声明的所有内容都是该回调的本地代码。（您当然可以在window显式设置属性）。这是such an example。

此设置可以从左侧菜单更改 - 如果将其移至head或body，您可以从开发人员工具访问它们。此外，值得一提的是，如果在代码运行时调用调试器，即使它们处于闭包状态，您也可以访问这些变量。

Answer 2

代码在不同域（fiddle.jsshell.net）上的iframe中进行评估。这样做是出于安全原因。

编辑：在Firebug中，您可以使用cd(document.querySelector('iframe').contentWindow);，在Chrome中，您可以使用过滤器图标旁边的下拉菜单切换帧。