在Google Chrome中检查jsfiddle.net上的JavaScript

Question

在jsfiddle.net输入的javascript代码中，是否可以使用Google Chrome检查器设置断点？

当我进入开发工具的脚本选项卡时，我看到很多脚本，但我不知道我的脚本在哪里可以找到，或者它是否可以在其中找到。过去我只能使用console.log命令，但我很想设置一些断点。

（如果不能做到，我对于在这种情况下检查Javascript的其他方法也感兴趣。）

- LeRoy

Answer 1

在jsfiddle上调试器的调用很有效。只需在想要开始调试的位置输入以下代码：

debugger;

调试器可以很好地在Chrome、Firebug甚至IE开发工具中启动调试模式，但通常您需要先启动调试器（即在IE中“开始调试”，打开firebug/开发者工具）。

- Effata

Answer 2

在开发者工具中，在脚本选项卡下拉菜单中选择fiddle.jshell.net，大约在第20-30行（取决于你有多少个CSS），你会看到一个<script>标签，其中包含来自Javascript fiddle窗口的代码。你可以在此设置断点。 同时，您也可以通过更改控制台上下文，在控制台中针对此框架评估代码：

- mVChr

---

我已经尝试了这个方法，但是无论我做什么断点都没有被运行到。 - Damon

您可以在 fiddle.jsshellnet/_display/(program) 的文件夹中找到一个文件，从该文件的第20行开始，您应该能看到您的代码。 http://screencast.com/t/IVbxUnrCr7LW - gmetzker

Answer 3

另一个小技巧是在不使用编辑器的情况下显示你的示例代码，可以使用以下语法：

<normal path to your fiddle>/show/light/

举个例子：jsfiddle-link

- dbrin

Answer 4

从开发者控制台进入“sources”选项卡，打开左侧的源树表示，展开fiddle.jsshell.net节点，接下来单击_display，再单击(index)，您应该能够看到您的代码。

请注意，如果您保存了代码，此_display引用将被fiddle-reference / version / show替换。例如JsQfE/2/show（作为示例而非真实存在）。

- hcpl