cómo depurar el js en jsfiddle

95

Estoy viendo este jsfiddle: http://jsfiddle.net/carpasse/mcVfK/ Funciona bien, ese no es el problema, solo quiero saber cómo depurar a través de javascript. Intenté usar el comando del depurador y no puedo encontrarlo en la pestaña de fuentes. ¿Alguna idea de cómo puedo depurar esto?

algún código del violín:

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
fuente

1

Inserta la palabra debugger;en el código. Chrome y Firefox abrirán automáticamente un depurador paso a paso. (He copiado este consejo de la respuesta de @ user3335908 para hacerlo más destacado)

— Will Sheppard

53

El JavaScript se ejecuta desde la carpeta fiddle.jshell.net de la pestaña Fuentes de Chrome. Puede agregar puntos de interrupción al archivo de índice que se muestra en la captura de pantalla de Chrome a continuación.

Depurando JSFiddle en Chrome

ingrese la descripción de la imagen aquí

— apandit
fuente

9

esto no muestra nada para mí. Recibo un archivo de índice vacío

— Oliver Watkins

1

@OliverWatkins también estaba vacío para mí, lo arreglé haciendo clic en "Actualizar" en la parte superior, luego noté que después de ejecutar nuevamente, en la pestaña Fuentes en el panel de herramientas de desarrolladores, en "jsfiddle.net", luego en mi carpeta nombrada , había un directorio adicional con otro archivo de índice que mostraba el código. ¡Espero que esto ayude!

— MilesMorales

Tengo una tercera carpeta en fiddle.jshell.net que también tiene (índice). Si abro eso, hay un archivo html con el js incrustado en él. (en la línea 48 cuando escribí esto)

— John MacIntyre

fiddle.jshell.netcontiene solo _displaycon (index)inside, que es una página HTML casi vacía con <p>That page doesn't exist.</p>. Mi código js no está ahí

— CygnusX1

35

Utilice la debugger;declaración en el código. El navegador inserta un punto de interrupción en esta declaración y puede continuar en el depurador del navegador.

Esto debería funcionar al menos en Chrome y 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'});
}]);

— usuario3335908
fuente

Esta es la mejor respuesta !

— vibs2006

6

Algo digno de mención. Si alguna vez utiliza herramientas de desarrollo de Chrome. Presione ctrl+ shift+ Fy podrá buscar en todos los archivos en la fuente.

— Oliver Orchard
fuente

2

Eso es muy útil, en Mac es Cmd + Alt + F

— John W. Clark

Esta sería una respuesta mucho mejor, pero los puntos de interrupción establecidos en el código que encuentre de esta manera no serán respetados.

— Slbox

Gracias a esta sugerencia, pude encontrar el código en un archivo que no aparece en el árbol de fuentes ...

— GarfieldKlon

3

Además de las otras respuestas.

Muy a menudo es útil simplemente escribir información de depuración en la consola:

console.log("debug information here");

La salida está disponible en la consola de herramientas de desarrollo de los navegadores. Como si se registrara desde el código javascript habitual.
Esto es bastante simple y efectivo.

— Alexander Stepaniuk
fuente

3

Agregar una declaración de depuración en el código y habilitar las "Herramientas de desarrollo" en el Bowser. Luego, cuando esté ejecutando el código en JSFiddle, se activará el depurador.

— P. Muralikrishna
fuente

0

Aquí hay otro lugar :)

Debajo del Jsfiddle.netnodo.

— Sampath
fuente

Esto parece cointain el código fuente que se muestra en la página, rodeado de <pre>... </pre>. No es un código ejecutable real.

— CygnusX1

No puedes depurar este código. Un indicio de que no puedes es el resaltado que falta ...

— GarfieldKlon

0

El JavaScript se ejecuta desde el archivo ?editor_console=trueen la carpeta de la result (fiddle.jshell.net)/fiddle.jshell.net/_displaycarpeta de la pestaña Fuentes de Chrome cuando se usa la herramienta de desarrollo. Puede agregar puntos de interrupción a su código y luego actualizar la página.

Puede encontrar más información sobre el uso del depurador de Chrome en Intentar depurar Javascript en Chrome

— usuario2010781
fuente