如何在jsfiddle中调试js


95

我正在看这个jsfiddle:http : //jsfiddle.net/carpasse/mcVfK/ 可以正常工作,这不是问题,我只想知道如何通过javascript进行调试。我尝试使用调试器命令,但在“源”选项卡中找不到它?知道我该如何调试吗?

小提琴的一些代码:

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'});
}]);

1
将单词debugger;插入代码中。Chrome和Firefox将自动打开逐步调试器!(我已从@ user3335908的答案中复制了此技巧,以使其更加突出)
Will Sheppard

Answers:


53

JavaScript是从Chrome的“来源”标签的fiddle.jshell.net文件夹执行的。您可以将断点添加到下面的Chrome屏幕快照中显示的索引文件中。

在Chrome中调试JSFiddle

在此处输入图片说明


9
这对我来说什么都没有。我得到一个空的索引文件
Oliver Watkins

1
@OliverWatkins也对我来说是空的,我通过单击顶部的“更新”来修复此问题,然后我再次运行后注意到,在开发人员工具面板的“源”选项卡中,在“ jsfiddle.net”下,然后在我的命名文件夹下,还有一个额外的目录,其中包含另一个显示代码的索引文件。希望这可以帮助!
MilesMorales '16

我在fiddle.jshell.net下还有一个第三个文件夹,它也有(index)。如果我打开它,则有一个嵌入了js的html文件。(在我撰写本文时,在第48行)
John MacIntyre

fiddle.jshell.net仅包含_displaywith (index)内部,这是带有的几乎为空的HTML页面<p>That page doesn't exist.</p>。我的js代码不存在
CygnusX1

35

使用 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'});
}]);

这是最好的答案!
vibs2006

6

值得一提的。如果您曾经使用chrome开发工具。按ctrl+ shift+ F,您可以搜索源中的所有文件。


2
这非常方便,在Mac上是Cmd + Alt + F
John W. Clark,

这将是一个更好的答案,但是您发现以这种方式在代码上设置的断点将不被接受。
Slbox

对此提示,我可以在源树中没有出现的文件中找到代码……
GarfieldKlon

3

除了其他答案。

将调试信息写入控制台通常非常有用:

console.log("debug information here");

该输出在浏览器开发工具控制台中可用。就像是从通常的javascript代码记录下来的一样。
这是非常简单和有效的。


3

在代码中添加调试器语句,并在Bowser中启用“开发人员工具”。然后,当您在JSFiddle中运行代码时,调试器将被选中!


0

这是另一个地方:)

Jsfiddle.net节点下。

在此处输入图片说明


这似乎与页面上显示的源代码并用<pre>... 包围</pre>。它不是实际的可运行代码。
CygnusX1

您无法调试此代码。一个提示,你不能做的是缺少突出显示...
GarfieldKlon

0

使用开发工具时,会从Chrome的“来源”标签?editor_console=true的文件result (fiddle.jshell.net)/fiddle.jshell.net/_display夹文件夹中的文件执行JavaScript 。您可以在代码中添加断点,然后刷新页面。 在此处输入图片说明

有关使用Chrome调试器的更多信息,请参见尝试在Chrome中调试Javascript。

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.