data - jquery remove class
¿Cómo depuro Javascript que se cargó a través de AJAX(específicamente jQuery) (4)
He cambiado mi estilo de codificación con proyectos más complejos para cargar páginas (y sus scripts incrustados) "a pedido" recientemente. Sin embargo, es difícil depurar esos scripts cuando se cargan como:
jQuery.get(''/myModularPage'', function(html){ /* insert the loaded page into the DOM */ });
o
$(''#some-container'').load(''/myOtherPage'');
Estos scripts se ejecutan perfectamente, pero si estoy depurando, ¿cómo puedo establecer puntos de interrupción en estas páginas y scripts cargados dinámicamente?
Agregue esto a sus archivos js donde desea que se rompa:
debugger;
Luego ingrese / pase / pase como cualquier otro depurador.
Funciona para scripts y páginas cargados dinámicamente. Solo funciona en Chrome hasta donde yo sé.
Como ya has mencionado, puedes usar //@ sourceURL . Chrome no parece ser compatible con //@ sourceURL para scripts en línea. Funciona en expresiones de evaluación. Este artículo de HTML5 sobre mapas fuente brinda más detalles sobre cómo nombrar bloques de evaluación y cómo nombrar cualquier función anónima en su código.
En lugar de usar eval, puede intentar insertar una etiqueta de script o puede ser JSONP.
Este problema parece que ahora se ha resuelto en general usando el nuevo pragma :
//# sourceURL=filename
Tenga en cuenta el símbolo ''hash'' # lugar del símbolo ''at'' @ .
Al incluir esa línea en su fuente, ¡aparecerá una referencia en el depurador!
ACTUALIZAR
La forma aceptada ahora está con un # (hashtag) en lugar de @ (en el símbolo)
Se modificó la sintaxis para evitar conflictos con las sentencias de compilación condicional de IE y algunos otros problemas (gracias a Oleksandr Pshenychnyy y Varunkumar Nagarajan por señalar esto)
//#sourceURL=/path/to/file
Esto realmente puede ser cualquier cadena que lo ayude a identificar el bloque de código.
Un buen punto adicional de JMac:
Para mí, el archivo js se mostraba en la lista de fuentes dentro de un grupo llamado "(sin dominio)". ¡Puede valer la pena mencionarlo ya que me lo perdí al principio!
ORIGINAL
Luché con lo anterior durante una semana antes de leer este artículo . Realmente funciona perfectamente para mi entorno de desarrollo (Chrome 22 mientras escribo esto).
Firebug también admite búferes eval () con nombre de desarrollador: simplemente agregue una línea al final de su evaluación (expresión) como:
//@ sourceURL=foo.js
Por ejemplo, dado este simple documento html:
<!DOCTYPE html>
<html>
<body>
<p>My page''s content</p>
<div id="counter"></div>
<script type="text/javascript">
//if this page is loaded into the DOM via ajax
//the following code can''t be debugged
//(or even browsed in dev-tools)
for(i=0;i<10;i+=1) {
document.getElementById(''counter'').innerText = i;
}
//but if I add the line below
//it will "magically" show up in Dev Tools (or Firebug)
//@ sourceURL=/path/to/my/ajaxed/page
</script>
<body>
</html>
Cosas que aún no he descubierto:
- ¿Esto tiene que hacerse para cada bloque de script para scripts en línea?
- ¿Tiene que ser la última línea del bloque de script? (El artículo sugeriría que la respuesta es sí )