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

Respuestas:

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.

ingrese la descripción de la imagen aquí

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. ingrese la descripción de la imagen aquí

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

usuario2010781
fuente