如何在JSFiddle中调试JavaScript

Question

我正在查看这个jsfiddle：http://jsfiddle.net/carpasse/mcVfK/ 它可以正常工作，问题不大，我只是想知道如何通过JavaScript进行调试。 我尝试使用调试器命令，但在源选项卡中找不到它？ 有什么方法可以对其进行调试吗？

一些来自fiddle的代码：

angular.module('app', ['appServices'])
    .config(['$routeProvider', function($routeProvider) {
        $routeProvider.
                when('/home', {templateUrl: 'home.html',   controller: HomeCtrl}).
                when('/list', {templateUrl: 'list.html',   controller: ListCtrl}).
                when('/detail/:itemId', {templateUrl: 'detail.html',   controller: DetailCtrl}).
                when('/settings', {templateUrl: 'settings.html',   controller: SettingsCtrl}).
                otherwise({redirectTo: '/home'});
}]);

- Pindakaas

---

将单词“debugger;”插入代码中。Chrome和Firefox会自动打开逐步调试器！（我从@user3335908的答案中复制了这个提示，以使其更加突出） - Will Sheppard

Answer 1

JavaScript 代码在 Chrome 的 Sources 标签下的 fiddle.jshell.net 文件夹中执行。您可以在下图所示的 Chrome 中的 index 文件上添加断点。

- apandit

---

这对我来说没有任何意义。我得到了一个空的索引文件。 - Oliver Watkins

@OliverWatkins 我也遇到了同样的问题，但我通过点击顶部的“更新”按钮来解决它。然后我再次运行后，在开发者工具面板中的“Sources”选项卡下，在“jsfiddle.net”下的我的命名文件夹中，有一个额外的目录，里面有另一个显示代码的索引文件。希望这可以帮到你！ - Angel Cloudwalker

我在fiddle.jshell.net下有一个第三个文件夹，其中也有(index)。如果我打开它，里面有一个嵌入js的html文件。（当我写这个的时候是在第48行） - John MacIntyre

fiddle.jshell.net 只包含带有 (index) 的 _display，这是一个几乎为空的 HTML 页面，其中包含 <p>That page doesn't exist.</p>。我的 js 代码不在那里。 - CygnusX1

似乎不再起作用了。当前的结构看起来不同。fiddle.jshell.net中的js文件不包含实际的js。 - dermoritz

Answer 2

在代码中使用 debugger; 语句。浏览器将在此语句处插入断点，您可以在浏览器的调试器中继续执行。

这至少应该在Chrome和Firefox中有效。 https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Statements/debugger

angular.module('app', ['appServices'])
.config(['$routeProvider', function($routeProvider) {
    // *** Debugger invoked here
    debugger;
    $routeProvider.
            when('/home', {templateUrl: 'home.html',   controller: HomeCtrl}).
            when('/list', {templateUrl: 'list.html',   controller: ListCtrl}).
            when('/detail/:itemId', {templateUrl: 'detail.html',   controller: DetailCtrl}).
            when('/settings', {templateUrl: 'settings.html',   controller: SettingsCtrl}).
            otherwise({redirectTo: '/home'});
}]);

- user3335908

---

这是最好的答案！ - vibs2006

这是最简单和最快的解决方案。毋庸置疑，是最佳答案！ - John

Answer 3

值得一提的是，如果你正在使用 Chrome 开发者工具，按下 Ctrl+Shift+F，就可以搜索源中的所有文件。

- Oliver Orchard

---

非常方便，在Mac上是Cmd + Alt + F。 - John W. Clark

这将是一个更好的答案，但在通过此方式找到的代码上设置的断点将不被执行。 - Slbox

多亏了这个提示，我才能在源代码树中没有出现的文件中找到代码... - GarfieldKlon

Answer 4

除了其他答案之外，很多时候将调试信息直接写入控制台非常有用：

console.log("debug information here");

输出结果可以在浏览器开发工具控制台中查看。就像从普通的javascript代码中记录一样。
这非常简单而有效。

- Alexander Stepaniuk

Answer 5

在代码中添加一个调试语句并在浏览器中启用“开发者工具”。 然后，在JSFiddle中运行代码时，调试器将被触发！

- P.Muralikrishna

Answer 6

以上的一个答案是有效的，但你需要在想要设置断点的那一行添加关键字debugger，然后运行代码，这将在开发工具中触发它们。然后，在“源”选项卡下，代码将可见，其中editor_console=true。

- radsin

Answer 7

这里是另一个地方 :)

在 Jsfiddle.net 节点下面。

- Sampath

---

这似乎包含了页面上显示的源代码，被<pre> ... </pre>包围。它不是实际可运行的代码。 - CygnusX1

你无法调试这段代码。一个提示是缺少高亮显示... - GarfieldKlon

Answer 8

JavaScript 代码是从文件夹 result (fiddle.jshell.net)/fiddle.jshell.net/_display 的 Sources 标签中的文件 ?editor_console=true 执行的，当使用开发者工具时，您可以在代码中添加断点，然后刷新页面。

有关使用 Chrome 调试器的更多信息，请参见 Trying to debug Javascript in Chrome。

- user2010781