从Javascript控制台访问jsFiddle中的变量？答案

【问题标题】：Access variables in jsFiddle from Javascript console?从Javascript控制台访问jsFiddle中的变量？
【发布时间】：2012-12-29 00:48:39
【问题描述】：

我使用以下代码创建了fiddle：

var x=10;

当我尝试在控制台中查看时，我得到以下信息：

> x
ReferenceError: x is not defined

有道理，因为它需要 Javascript 来运行控制台。有没有办法让它工作？

【问题讨论】：

标签： javascript firebug google-chrome-devtools jsfiddle

【解决方案1】：

如果您使用 Chrome 或 Chromium，请查看您的开发者控制台底部，其中出现了字符串 <top frame>。单击它并选择result(fiddle.jshell.net)。这将改变浏览器的当前范围，您可以访问所有全局变量。另外，如果你也想访问 var 变量，记得将 jsFiddle 中的加载选项更改为 no wrap。

更新：2014.12.01

对于 Firefox (34+) 和新的 Firefox 开发者版，可以通过在开发者工具中启用选择一个框架作为当前目标文档额外工具来执行相同操作，然后点击它并选择http://fiddle.jshell.net/_display/。

【讨论】：

我这样做了，但变量仍然未定义
我更新了我的答案@Casebash。如果您在 jsFiddle 中使用 onLoad 选项运行代码，则无法从控制台访问 var x，因为代码将被包装在闭包中（附加到 onLoad 事件的函数）并使其不可见从控制台。
@Ragnarokkr 谢谢，帮助很大！
@caspyin 对于超出范围的变量，您可以在变量仍在范围内的代码中放置一个断点，然后当断点被命中时，您可以从控制台访问该变量因为控制台位于断点暂停的上下文中。
将负载类型专门更改为No wrap - bottom of <body> 选项。

【解决方案2】：

控制台就像它自己的闭包，其中this === window：您只能看到控制台中定义的变量（每个命令/脚本）。

因此，您有两种方法可以发布在控制台中可见的数据：

var x = 5; console.log(x); // out of your code, not as console command
window.x = 5; // now x is global, so in console you get 5 for x.

您可以使用调试器代替纯控制台命令。在 firebug 和 chrome 的开发工具中，您可以设置断点，刷新页面（在 jsFiddle 中应该运行执行此操作），现在您可以在范围内查看变量的实际值。（您需要重新加载页面一次，将代码放入调试器，然后在下一次重新加载时在 document.ready 事件中获取断点。）

【讨论】：