wie man das js in jsfiddle debuggt

95

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'});
}]);
debugging angularjs jsfiddle Pindakaas
quelle
1
Fügen Sie das Wort debugger;in den Code ein. Chrome und Firefox öffnen automatisch einen Step-Through-Debugger! (Ich habe diesen Tipp aus der Antwort von @ user3335908 kopiert, um ihn bekannter zu machen.)
Will Sheppard

Antworten:

53

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.

Debuggen von JSFiddle in Chrome

Geben Sie hier die Bildbeschreibung ein

apandit
quelle
9
das zeigt mir nichts. Ich bekomme eine leere Indexdatei
Oliver Watkins
1
@OliverWatkins es war auch für mich leer, ich habe dies behoben, indem ich oben auf "Aktualisieren" geklickt habe. Nachdem ich es erneut ausgeführt habe, habe ich es auf der Registerkarte "Quellen" im Entwickler-Tool-Panel unter "jsfiddle.net" und dann unter meinem benannten Ordner festgestellt Es gab ein zusätzliches Verzeichnis mit einer anderen Indexdatei, in der der Code angezeigt wurde. Hoffe das hilft!
MilesMorales
Ich habe einen dritten Ordner unter fiddle.jshell.net, der auch (Index) hat. Wenn ich das öffne, gibt es eine HTML-Datei mit dem darin eingebetteten js. (in Zeile 48, als ich das schrieb)
John MacIntyre
fiddle.jshell.netenthält nur _displaymit (index)inside, was eine fast leere HTML-Seite mit ist <p>That page doesn't exist.</p>. Mein js Code ist nicht da
CygnusX1
35

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'});
}]);
user3335908
quelle
Das ist die beste Antwort!
Vibs2006
6

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.

Oliver Orchard
quelle
2
Das ist sehr praktisch, auf dem Mac ist es Cmd + Alt + F
John W. Clark
Dies wäre eine weitaus bessere Antwort, aber Haltepunkte, die für den Code festgelegt wurden, den Sie auf diese Weise finden, werden nicht berücksichtigt.
Slbox
Dank dieses Hinweises konnte ich den Code in einer Datei finden, die nicht im Quellbaum erscheint ...
GarfieldKlon
3

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.

Alexander Stepaniuk
quelle
3

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!.

P. Muralikrishna
quelle
0

Hier ist ein anderer Ort :)

Unter dem Jsfiddle.net Knoten.

Geben Sie hier die Bildbeschreibung ein

Sampath
quelle
Dies scheint den Quellcode zu cointain , die auf der Seite angezeigt wird, umgeben mit <pre>... </pre>. Es ist kein tatsächlich ausführbarer Code.
CygnusX1
Sie können diesen Code nicht debuggen. Ein Hinweis, den Sie nicht können, ist die fehlende Hervorhebung ...
GarfieldKlon
0

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. Geben Sie hier die Bildbeschreibung ein

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

user2010781
quelle