comment déboguer les js dans jsfiddle

95

Je regarde ce jsfiddle: http://jsfiddle.net/carpasse/mcVfK/ Cela fonctionne très bien ce n'est pas le problème, je veux juste savoir comment déboguer via le javascript. J'ai essayé d'utiliser la commande du débogueur et je ne la trouve pas dans l'onglet sources? une idée de comment je peux déboguer cela?

un peu de code du violon:

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
source

1

Insérez le mot debugger;dans le code. Chrome et Firefox ouvriront automatiquement un débogueur pas à pas! (J'ai copié cette astuce de la réponse de @ user3335908 pour la rendre plus visible)

— Will Sheppard

53

Le JavaScript est exécuté à partir du dossier fiddle.jshell.net de l'onglet Sources de Chrome. Vous pouvez ajouter des points d'arrêt au fichier d'index affiché dans la capture d'écran Chrome ci-dessous.

Débogage de JSFiddle dans Chrome

entrez la description de l'image ici

— apandit
source

9

cela ne montre rien pour moi. Je reçois un fichier d'index vide

— Oliver Watkins

1

@OliverWatkins c'était vide pour moi aussi, j'ai corrigé cela en cliquant sur "Mettre à jour" en haut, puis j'ai remarqué après avoir exécuté à nouveau, dans l'onglet Sources du panneau d'outils des développeurs, sous "jsfiddle.net", puis sous mon dossier nommé , il y avait un répertoire supplémentaire avec un autre fichier d'index qui montrait le code. J'espère que cela t'aides!

— MilesMorales

J'ai un troisième dossier sous fiddle.jshell.net qui contient également (index). Si j'ouvre cela, il y a un fichier html avec le js intégré. (à la ligne 48 quand j'ai écrit ceci)

— John MacIntyre

fiddle.jshell.netcontient uniquement _displayavec (index)inside, qui est une page HTML presque vide avec <p>That page doesn't exist.</p>. Mon code js n'est pas là

— CygnusX1

35

Utilisez l' debugger;instruction dans le code. Le navigateur insère un point d'arrêt à cette instruction et vous pouvez continuer dans le débogueur du navigateur.

Cela devrait fonctionner au moins dans Chrome et 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
source

C'est la meilleure réponse !

— vibs2006

6

Quelque chose qui mérite d'être mentionné. Si vous utilisez des outils de développement Chrome. Appuyez sur ctrl+ shift+ Fet vous pouvez rechercher dans tous les fichiers de la source.

— Oliver Orchard
source

2

C'est très pratique, sur Mac, c'est Cmd + Alt + F

— John W. Clark

Ce serait une bien meilleure réponse, mais les points d'arrêt définis sur le code que vous trouvez de cette manière ne seront pas respectés.

— Slbox

Merci à cet indice, je pourrais trouver le code dans un fichier qui n'apparaît pas dans l'arborescence des sources ...

— GarfieldKlon

3

En plus des autres réponses.

Très souvent, il est utile d'écrire simplement les informations de débogage dans la console:

console.log("debug information here");

La sortie est disponible dans la console des outils de développement des navigateurs. Comme s'il était enregistré à partir du code javascript habituel.
C'est assez simple et efficace.

— Alexandre Stepaniuk
source

3

Ajout d'une instruction de débogage dans le code et activation des "Developer Tools" dans le bowser. Ensuite, lorsque vous exécutez le code dans JSFiddle, le débogueur sera frappé !.

— P.Muralikrishna
source

0

Voici un autre endroit :)

Sous le Jsfiddle.netnœud.

— Sampath
source

Cela semble indiquer le code source affiché sur la page, entouré de <pre> ... </pre>. Ce n'est pas un véritable code exécutable.

— CygnusX1

Vous ne pouvez pas déboguer ce code. Un indice que vous ne pouvez pas est la mise en évidence manquante ...

— GarfieldKlon

0

Le JavaScript est exécuté à partir du fichier ?editor_console=truedans le dossier de result (fiddle.jshell.net)/fiddle.jshell.net/_displaydossiers de l'onglet Sources de Chrome lors de l'utilisation de l'outil de développement. Vous pouvez ensuite ajouter des points d'arrêt à votre code et actualiser la page.

Pour plus d'informations sur l'utilisation du débogueur Chrome, consultez la page Essayer de déboguer Javascript dans Chrome

— user2010781
source