come eseguire il debug di js in jsfiddle

95

Sto guardando questo jsfiddle: http://jsfiddle.net/carpasse/mcVfK/ Funziona bene, non è questo il problema, voglio solo sapere come eseguire il debug tramite javascript. Ho provato a utilizzare il comando debugger e non riesco a trovarlo nella scheda sorgenti? qualche idea su come posso eseguire il debug di questo?

un po 'di codice dal violino:

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
fonte

1

Inserisci la parola debugger;nel codice. Chrome e Firefox apriranno automaticamente un debugger step-through! (Ho copiato questo suggerimento dalla risposta di @ user3335908 per renderlo più evidente)

— Will Sheppard,

53

JavaScript viene eseguito dalla cartella fiddle.jshell.net della scheda Sorgenti di Chrome. Puoi aggiungere punti di interruzione al file di indice mostrato nello screenshot di Chrome di seguito.

Debug di JSFiddle in Chrome

inserisci qui la descrizione dell'immagine

— apandit
fonte

9

questo non mostra nulla per me. Ottengo un file indice vuoto

— Oliver Watkins

1

@OliverWatkins era vuoto anche per me, ho risolto il problema facendo clic su "Aggiorna" in alto, poi l'ho notato dopo aver eseguito di nuovo, nella scheda Sorgenti nel pannello degli strumenti degli sviluppatori, sotto "jsfiddle.net", quindi nella mia cartella denominata , c'era una directory aggiuntiva con un altro file indice che mostrava il codice. Spero che questo ti aiuti!

— MilesMorales

Ho una terza cartella sotto fiddle.jshell.net che ha anche (index). Se lo apro, c'è un file html con il js incorporato. (sulla riga 48 quando ho scritto questo)

— John MacIntyre

fiddle.jshell.netcontiene solo _displaycon (index)dentro, che è una pagina HTML quasi vuota con <p>That page doesn't exist.</p>. Il mio codice js non è presente

— CygnusX1,

35

Usa la debugger;dichiarazione nel codice. Il browser inserisce un punto di interruzione in questa istruzione e puoi continuare nel debugger del browser.

Questo dovrebbe funzionare almeno in Chrome e 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'});
}]);

— user3335908
fonte

Questa è la migliore risposta!

— vibs2006

6

Qualcosa che vale la pena menzionare. Se utilizzi gli strumenti di sviluppo di Chrome. Premi ctrl+ shift+ Fe puoi cercare tra tutti i file nella sorgente.

— Oliver Orchard
fonte

2

Questo è molto utile, su Mac è Cmd + Alt + F

— John W. Clark

Questa sarebbe una risposta molto migliore, ma i punti di interruzione impostati sul codice che trovi in questo modo non saranno rispettati.

— Slbox

Grazie a questo suggerimento, ho potuto trovare il codice in un file che non appare nell'albero dei sorgenti ...

— GarfieldKlon

3

Oltre alle altre risposte.

Molto spesso è utile scrivere semplicemente le informazioni di debug nella console:

console.log("debug information here");

L'output è disponibile nella console degli strumenti di sviluppo del browser. Come se fosse stato registrato dal solito codice javascript.
Questo è abbastanza semplice ed efficace.

— Alexander Stepaniuk
fonte

3

Aggiunta di un'istruzione del debugger nel codice e attivazione degli "Strumenti per sviluppatori" nel bowser. Quindi, quando esegui il codice in JSFiddle, il debugger verrà colpito !.

— P.Muralikrishna
fonte

0

Ecco un altro posto :)

Sotto il Jsfiddle.netnodo.

— Sampath
fonte

Questo sembra cointain il codice sorgente che viene mostrato nella pagina, circondata da <pre>... </pre>. Non è un codice eseguibile effettivo.

— CygnusX1

Non puoi eseguire il debug di questo codice. Un suggerimento che non puoi è l'evidenziazione mancante ...

— GarfieldKlon

0

Il JavaScript viene eseguito dal file ?editor_console=truenella cartella della result (fiddle.jshell.net)/fiddle.jshell.net/_displaycartella della scheda Sorgenti di Chrome quando si utilizza lo strumento di sviluppo. È quindi possibile aggiungere punti di interruzione al codice e aggiornare la pagina.

Ulteriori informazioni sull'utilizzo del debugger di Chrome sono disponibili in Tentativo di eseguire il debug di Javascript in Chrome

— user2010781
fonte