2012-02-01 7 views
51

Una secuencia de comandos añadida dinámicamente no se muestra en la sección de scripts del depurador del navegador.¿Cómo depurar dinámicamente el JavaScript cargado (con jQuery) en el propio depurador del navegador?

Explicación:

necesito usar y han utilizado

if(someCondition == true){ 
    $.getScript("myScirpt.js", function() { 
     alert('Load Complete'); 
     myFunction(); 
    }); 
} 

modo que MyScript.js se puede cargar de forma dinámica en el cumplimiento de alguna condición ... Y myFunction sólo se puede llamar después de recibir la todo el script cargado ...

Pero los navegadores no muestran el myScript.js cargado dinámicamente en la sección del script del depurador.

¿Hay alguna otra forma para que todos los objetivos se puedan lograr lo que hará que uno pueda depurar un script cargado dinámicamente en el navegador mismo?

+0

Posible duplicado de [¿Es posible depurar la carga dinámica de JavaScript mediante algún depurador como WebKit, FireBug o IE8 Developer Tool?] (Http://stackoverflow.com/questions/1705952/is-possible-to-debug-dynamic- cargando-javascript-por-algunos-depurador-como-webkit-fi) – JerryGoyal

Respuesta

139

Puede asignar un nombre al script cargado dinámicamente para que se muestre en el depurador JavaScript de Chrome/Firefox. Para ello se coloca un comentario al final de la secuencia de comandos:

//# sourceURL=filename.js 

Este archivo se mostrará en la pestaña "Fuentes", como filename.js. Según mi experiencia, puedes usar \ 's en el nombre pero obtengo un comportamiento extraño si utilizo /' s.

Para más información ver: Breakpoints in Dynamic JavaScript deprecation of //@sourceurl

+3

Como esto no está marcado como correcto, estoy comentando para confirmar que esto de hecho funciona como un amuleto. –

+1

No estoy seguro de por qué esto no se ha marcado como la respuesta correcta. AFIK, esta es la mejor solución disponible. – kiprainey

+0

sinceras disculpas por haber leído esta respuesta tan tarde! – TwiToiT

7

He intentado utilizar la "// # sourceURL = filename.js" que fue sugerido como una solución por la OP, pero todavía no estaba mostrando a las en el panel Orígenes a menos que ya existiera en mis pestañas de una vez anterior cuando produjo una excepción.

Codificando un "depurador"; línea lo forzó a romper en ese lugar. Luego, una vez que estaba en mis pestañas en el panel de Orígenes, podía establecer puntos de interrupción como normales y eliminar el "depurador"; línea.

+4

También puede aparecer en la lista (sin dominio) en la pestaña Fuentes. – Splaktar

+0

También necesitaba usar 'debugger;', y DevTools tenía que estar abierto mientras se cargaba el script. – Barmar

0

en cuenta que el archivo de origen que aparecen en la ficha Fuentes de esta manera aparecerá en el (sin dominio) grupo y, en caso de que quiera depurarlo, tendrá que añadir una línea debugger; en su código, hacer esa línea se ejecutará (generalmente al comienzo de la ejecución de su archivo fuente) y luego agregará sus puntos de interrupción donde quiera.

En caso de que esté depurando etapas de producción, donde probablemente no tenga debugger; líneas en su código, puede hacerlo haciendo un mapa local con CharlesProxy a su "copia nueva del archivo fuente con la línea debbuger insertada ".

+0

¡Esto me salvó! No importa lo que hice, el archivo no apareció hasta que puse un comando de depuración. Después de eso, persistió en recargas de página y sesiones de depuración incluso después de eliminar el comando del depurador. –

9

Puede usar //# sourceURL= y //# sourceMappingURL= al final de su archivo de script o etiqueta de secuencia de comandos.

NOTA://@ sourceURL y //@ sourceMappingURL están en desuso.

+0

Más información sobre obsolescencia: https://developers.google.com/web/updates/2013/06/sourceMappingURL-and-sourceURL-syntax-changed – Pysis

Cuestiones relacionadas