Establecer puntos de interrupción y depurar JavaScript evaluado

Question

I ^* Estoy utilizando JS del lado del cliente para analizar archivos XML y generar código JS complejo como eval como resultado. (Generación de funciones reutilizables iniciadas por un tiempo de ejecución). Sin embargo, necesito depurar el código que se está generando, y me gustaría usar los puntos de interrupción, pasos, ventanas de observación integrados de Chrome, etc.

¿Hay alguna? una forma más fácil de hacer esto que:

• Vuelque la cadena JS generada a la consola y/o ventana.
• Copie el código JavaScript
• (opcional) Ejecute el JS a través de un prettificador como JSBeautifier.
• Pegue el JS en un archivo que se carga a través de <script src="..."> en otra página web.

^{* realidad, un amigo mío estaba haciendo esto, no me}

Answer 1

En lugar de utilizar eval, y en lugar de copiar manualmente/pegar en un archivo separado, puede cargar dinámicamente la JS directamente en la página que lo generó utilizando un data uri en un elemento <script> creado dinámicamente. Con este enfoque, las herramientas para desarrolladores de Chrome (y Firebug) le permiten elegir el URI de datos como un script, activar Pretty Print, establecer puntos de interrupción y listo.

var js = createMyJSCodeString(); 
addCode(js); // Right now! Debuggable! 

// Dynamically evaluate JavaScript-as-string in the browser 
function addCode(js){ 
    var e = document.createElement('script'); 
    e.type = 'text/javascript'; 
    e.src = 'data:text/javascript;charset=utf-8,'+escape(js); 
    document.body.appendChild(e); 
}