wie man das js in jsfiddle debuggt

Ich schaue mir diese jsfiddle an: http://jsfiddle.net/carpasse/mcVfK/ Es funktioniert gut, das ist nicht das Problem, ich möchte nur wissen, wie man durch das Javascript debuggt. Ich habe versucht, den Debugger-Befehl zu verwenden, und kann ihn auf der Registerkarte "Quellen" nicht finden. Irgendeine Idee, wie ich das debuggen kann?

ein Code aus der Geige:

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

Das JavaScript wird im Ordner fiddle.jshell.net auf der Registerkarte Quellen von Chrome ausgeführt. Sie können der im Chrome-Screenshot unten gezeigten Indexdatei Haltepunkte hinzufügen.

Verwenden Sie die debugger;Anweisung im Code. Der Browser fügt an dieser Anweisung einen Haltepunkt ein, und Sie können im Debugger des Browsers fortfahren.

Dies sollte zumindest in Chrom und Firefox funktionieren. 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'});
}]);

Etwas Erwähnenswertes. Wenn Sie jemals Chrome Dev Tools verwenden. Drücken Sie ctrl+ shift+ Fund Sie können alle Dateien in der Quelle durchsuchen.

Neben den anderen Antworten.

Sehr oft ist es nützlich, einfach Debug-Informationen in die Konsole zu schreiben:

console.log("debug information here");

Die Ausgabe ist in der Dev Tools-Konsole des Browsers verfügbar. Als ob es aus dem üblichen Javascript-Code protokolliert worden wäre.
Das ist ganz einfach und effektiv.

Hinzufügen einer Debugger-Anweisung zum Code und Aktivieren der "Developer Tools" im Browser. Wenn Sie dann den Code in JSFiddle ausführen, wird der Debugger getroffen!.

Hier ist ein anderer Ort :)

Unter dem Jsfiddle.net Knoten.

Das JavaScript wird aus der Datei ?editor_console=trueim result (fiddle.jshell.net)/fiddle.jshell.net/_displayOrdnerordner der Registerkarte Quellen von Chrome ausgeführt, wenn das Entwicklungstool verwendet wird. Sie können Ihrem Code dann Haltepunkte hinzufügen und die Seite aktualisieren.

Weitere Informationen zur Verwendung des Chrome-Debuggers finden Sie unter Versuch, Javascript in Chrome zu debuggen