how to debug the js in jsfiddle

Question

I am looking at this jsfiddle: http://jsfiddle.net/carpasse/mcVfK/ It works fine that is not the problem , I just want to know how to debug through the javascript. I tried to use the debugger command and I cant find it in the sources tab? any idea how I can debug this?

some code from the 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'});
}]);

Answer 1

The JavaScript is executed from the fiddle.jshell.net folder of the Sources tab of Chrome. You can add breakpoints to the index file shown in the Chrome screenshot below.

Answer 2

Use the debugger; statement in the code. The browser inserts a breakpoint at this statement, and you can continue in browser's debugger.

This should work atleast in chrome and 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'});
}]);

Answer 3

Something worth mentioning. If you are ever using chrome dev tools. Press ctrl+shift+F and you can search through all the files in the source.

Answer 4

In addition to the other answers.

Very often it is useful just write debug information into the console:

console.log("debug information here");

The output is available in browsers dev tools console. Like it was logged from the usual javascript code.
This is quite simple and effective.

Answer 5

Here is another place :)

Under the Jsfiddle.net node.

Answer 6

Adding a debugger statement in the code and enable the "Developer Tools" in the bowser. Then when you are running the code in JSFiddle, the debugger will be hit!.