如何在jsfiddle中调试js

时间:2013-10-18 22:32:40

标签: debugging angularjs jsfiddle

我正在看这个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'});
}]);

7 个答案:

答案 0 :(得分:50)

JavaScript是从Chrome的Sources选项卡的fiddle.jshell.net文件夹执行的。您可以将断点添加到下面的Chrome屏幕截图中显示的索引文件中。

Debugging JSFiddle in Chrome

enter image description here

答案 1 :(得分:30)

在代码中使用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'});
}]);

答案 2 :(得分:6)

值得一提的东西。如果您使用的是chrome dev工具。按 ctrl + shift + F ,您可以搜索来源中的所有文件。

答案 3 :(得分:3)

除了其他答案。

通常只需将调试信息写入控制台即可:

console.log("debug information here");

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

答案 4 :(得分:1)

这是另一个地方:)

Jsfiddle.net节点下。

enter image description here

答案 5 :(得分:0)

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

答案 6 :(得分:0)

使用开发人员工具时,会从Chrome的“来源”标签的文件夹?editor_console=true文件夹中的文件result (fiddle.jshell.net)/fiddle.jshell.net/_display中执行JavaScript。您可以在代码中添加断点,然后刷新页面。 enter image description here

有关使用Chrome调试器的更多信息,请访问Trying to debug Javascript in Chrome