¿Cómo depurar JavaScript cargado dinámicamente (con jQuery) en el depurador del navegador?

92

Un script agregado dinámicamente no aparece en la sección de scripts del depurador del navegador.

Explicación:

Necesito usar y he usado

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

para que myScript.js se pueda cargar dinámicamente al cumplir alguna condición ... Y myFunction se puede llamar solo después de cargar todo el script ...

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

¿Hay otra forma de evitar todos los objetivos, lo que hará que uno pueda depurar un script cargado dinámicamente en el navegador mismo?

javascript debugging dynamic loaded TwiToiT
fuente
Posible duplicado de ¿Es posible depurar JavaScript de carga dinámica mediante algún depurador como WebKit, FireBug o IE8 Developer Tool?
GorvGoyl
2
utilizar debugger;para detener automáticamente en el script cargado dinámico, consulte javascript.info/debugging-chrome
yu yang Jian

Respuestas:

208

Puede darle un nombre a su script cargado dinámicamente para que se muestre en el depurador de JavaScript de Chrome / Firefox. Para hacer esto, coloca un comentario al final del script:

//# sourceURL=filename.js

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

Para obtener más información, consulte: Puntos de interrupción en la desactivación de JavaScript dinámico de // @ sourceurl

marca
fuente
19
Tenga en cuenta que se cambia a // #, aunque // @ todavía funciona en Chrome. Los scripts en archivos .html también se pueden nombrar de la misma manera. ¡Ten cuidado! No deje espacios en blanco antes y después del signo '='.
Mert Mertce
11
Para mí, el archivo js se mostraba en la lista de fuentes dentro de un grupo llamado "(sin dominio)". ¡Vale la pena mencionarlo ya que me lo perdí al principio!
JMac
7
Solo un consejo. El depurador de Chrome lanza estos archivos pseudo-javascript en el elemento de nodo "(sin dominio)" en la pestaña Fuentes, al menos cuando se depura en localhost. Ahí es donde los encontré.
Robert Oschler
1
Otra cosa a tener en cuenta es el estilo de los comentarios. Ese enlace de "desaprobación de / / @ sourceURL" que mencionaste tanto "// # sourceURL =" como "/ * # sourceURL =". Esto se debe a que esto también se puede usar para CSS, donde debe usar comentarios de bloque, ya que los comentarios "//" de una sola línea no son válidos. Lo que me sorprendió fue que no se puede usar "/ * sourceURL =" en javascript. Simplemente se ignora.
Jools
2
Afaik, la mayoría de los minificadores de JavaScript eliminan estas líneas de las etapas de producción, lo que las hace inútiles para el diagnóstico de errores de producción.
Lluís Suñol
16

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

NOTA: //@ sourceURL y //@ sourceMappingURLestán en desuso.

xRavisher
fuente
Más información
desactivación
Claro, pero la mayoría de los minificadores eliminarán estas líneas en las etapas de producción.
Lluís Suñol
13

Intenté usar el "// # sourceURL = filename.js" que fue sugerido como una solución por el OP, pero todavía no aparecía en el panel de Fuentes a menos que ya existiera en mis pestañas de una vez anterior cuando produjo una excepción.

Codificar un "depurador"; la línea lo obligó a romperse en ese lugar. Luego, una vez que estuvo en mis pestañas en el panel de Fuentes, pude establecer puntos de interrupción como de costumbre y eliminar el "depurador"; línea.

Kevinpo
fuente
6
También puede aparecer en la lista (sin dominio) en la pestaña Fuentes.
Splaktar
1
También necesitaba usar debugger;, y DevTools tenía que estar abierto mientras se cargaba el script.
Barmar
2
un poco de información adicional: use browserrtools: // como protocolo como en //# sourceURL=browsertools://yourdomaingoeshere.com/action-openuwws.js
dolbysurnd
6

Tenga en cuenta que el archivo fuente que aparece en la pestaña de fuentes de esta manera aparecerá en el grupo (sin dominio) y, en caso de que desee depurarlo, deberá agregar una debugger;línea en su código, hacer que esa línea se ejecute (generalmente en el inicio de la ejecución de su archivo fuente) y luego agregue sus puntos de interrupción donde lo desee.

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

Lluís Suñol
fuente
2
¡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 las recargas de páginas y las sesiones de depuración incluso después de que eliminé el comando del depurador.
Mike Devenney
0

Cuando intento rastrear este tipo de cosas en IE, abro las herramientas de desarrollo (F12) y luego encuentro dónde colocar el punto de interrupción usando la siguiente línea en la consola:

debugger;myFunction();

Eso cambia a la pestaña del depurador donde puede ingresar myFunction()y establecer el punto de interrupción.

Alan Samet
fuente