¿Es posible depurar JavaScript de carga dinámica mediante algún depurador como WebKit, FireBug o IE8 Developer Tool?

90

De mi pregunta reciente , ya creé alguna función de JavaScript para la vista parcial de carga dinámica. Entonces, no puedo depurar ningún JavaScript de carga dinámica. Porque todo el JavaScript cargado será evaluado por la función "eval".

Sin embargo, encontré alguna forma de crear un nuevo JavaScript utilizando el siguiente script para crear dinámicamente un script en el encabezado del documento actual. Todos los scripts cargados se mostrarán en HTML DOM (que puede usar cualquier depurador para encontrarlos).

var script = document.createElement('script')
script.setAttribute("type","text/javascript")
script.text = "alert('Test!');";

document.getElementsByTagName('head')[0].appendChild(script);

Por cierto, la mayoría de los depuradores (IE8 Developer Toolbar, Firebug y Google Chrome) no pueden establecer puntos de interrupción en ningún script dinámico. Porque la secuencia de comandos depurable debe cargarse la primera vez que se carga la página.

¿Tiene alguna idea para depurar contenido o archivo de script dinámico?

Actualización 1: agregar código fuente para probar

Puede utilizar el siguiente archivo xhtml para intentar depurar algún valor de variable.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>    
    <title>Dynamic Loading Script Testing</title>
    <script type="text/javascript">
    function page_load()
    {       
        var script = document.createElement('script')
        script.setAttribute("id", "dynamicLoadingScript");
        script.setAttribute("type","text/javascript");
        script.text =   "var someVariable = 0;\n" +
                        "someVariable = window.outerWidth;\n" +
                        "alert(someVariable);";

        document.getElementsByTagName('head')[0].appendChild(script);
    }
    </script>
</head>
<body onload="page_load();">
</body>
</html>

Desde la respuesta, solo lo pruebo en FireBug. El resultado debe mostrarse como las siguientes imágenes.

texto alternativo http://d7cgnq.bay.livefilestore.com/y1pJGV27qEARXzZhsMMhPD5z0OxAtnkQK8eKeEXMAxuHjsuWeAq1aGl7sTISRNqVv3lw8ghyxE_GorlwSJDvTGGl0mPN

Mire el script "dynamicLoadingScript" que se agrega después de cargar la página.

texto alternativo http://d7cgnq.bay.livefilestore.com/y1pz_RwqjgeVqe2mAlUZha0PalpPdP0X5AiwJcQhYahERlnbPDdZpb-_d1e96Q-14raSDMJOBsdcV9jsi4B5yCUDhqm41WcPN3cript

Pero no se encuentra en la pestaña de script de FireBug

Actualización 2: crear un punto de interrupción de depuración en un script de carga dinámico

texto alternativo http://d7cgnq.bay.livefilestore.com/y1peKdIMOztXss-pc8PlJEmaGov_0ShYnLsuDdK5OLETbCG0UpkX6Te29w0YW2pNKaD_0ANAiizh2GdGPAAp_1q0JWAVETo20Qoger

texto alternativo http://d7cgnq.bay.livefilestore.com/y1pUeHaHoTXj0WBl74fnTrXwdr_y7s7h8jNKfslSONgshzZBpUddGHNBWA9cXRabo3HAl3QazeozrCABo7pNDebQc1AclFE-Google

Las dos imágenes anteriores muestran la inserción de "depurador"; La declaración en alguna línea de secuencia de comandos puede disparar un punto de interrupción en la secuencia de comandos de carga dinámica. Sin embargo, ambos depuradores no muestran ningún código en el punto de interrupción. Por tanto, es inútil hacer esto.

Gracias,

javascript ajax Soul_Master
fuente
¿Encontraste una solución para esto? Estoy aquí con el mismo problema.
adamJLev
Intente cargar un archivo separado dinámicamente, es decir, consulte aquí para una implementación queryj.com/2011/03/11/a-lightweight-script-loader - Encuentro que los depuradores lo manejan mucho más fácilmente.
James Westgate
@infinity, mira mi solución
Molecular Man
3
2014 y tus imágenes siguen muertas. ¿Puedes volver a reproducirlas?
TheGeekZn
Tengo una pregunta similar pero no puedo decirlo porque las imágenes están rotas. ¿Puedes actualizarlos?
Eric

Respuestas:

117

También sería posible utilizar Chrome para el mismo. Chrome tiene una función en la que puede especificar un atributo de analizador y hacer que la pieza de JS dinámico aparezca como un archivo que luego se puede navegar y establecer puntos de interrupción.

el atributo que debe establecerse es 

//# sourceURL=dynamicScript.js

donde dynamicScript.js es el nombre del archivo que debería aparecer en el navegador de archivos de script.

Más información aquí

Paul Irish también habla de ello brevemente en su excelente charla sobre Herramientas y la pila de desarrollo de aplicaciones web.

cubitos de hielo
fuente
5
En caso de que alguien tenga problemas con MVC3 / Razor, recuerde escapar del símbolo @, así que algo como // @@ sourceURL = dynamicscript.js Y solo para su información, lo anterior también funciona en firebug.
parsh
1
También puede utilizar esta función para javascripts dinámicos en línea. Pero, si tiene alguna excepción en ese script, no la verá en la lista de fuentes.
Roman Snitko
4
Tenga en cuenta que la nueva sintaxis es "// # sourceURL = dynamicScript.js" cambia de @ a #
Cekk
3
el enlace actualizado a la sección de herramientas para desarrolladores de Chrome en mapas de origen es - developer.chrome.com/devtools/docs/…
chrismarx
3
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
21

Intente agregar un "depurador"; declaración en el javascript que está agregando dinámicamente. Esto debería hacer que se detenga en esa línea independientemente de la configuración del punto de interrupción.

Joeri Sebrechts
fuente
Todo lo que puedo encontrar es esto: code.google.com/p/fbug/issues/detail?id=1259 . Por cierto, utilizo una etiqueta de script que se adjunta al encabezado para cargar scripts dinámicamente (pero usando un atributo src), y el código agregado de esta manera es depurable para mí en todos los navegadores, incluso si no está cargado junto con la página inicial.
Joeri Sebrechts
¿Cuál es el código exacto que está utilizando para agregar la etiqueta de secuencia de comandos? Tengo el mismo problema que el OP, lo que hace que sea imposible depurar archivos JS cargados dinámicamente en Chrome. ¡Gracias!
adamJLev
var loaderNode = document.createElement ("script"); loaderNode.setAttribute ("tipo", "texto / javascript"); loaderNode.setAttribute ("src", url); document.getElementsByTagName ("cabeza") [0] .appendChild (loaderNode);
Joeri Sebrechts
18

Sí, (ahora) es posible depurar JavaScript cargado dinámicamente usando Google Chrome.

No es necesario agregar un debugger;atributo adicional o cualquier otro para el archivo JS cargado dinámicamente. Simplemente siga los pasos a continuación para depurar:

Método 1:

Mi jefe de tecnología acaba de mostrar una forma súper fácil de depurar métodos de Javascript cargados dinámicamente.

  1. Abra la consola de Chrome y escriba el nombre del método y presione enter.
    En mi caso, GetAdvancedSearchConditonRowNew
    si el método JS se ha cargado, mostrará la definición del método.

ingrese la descripción de la imagen aquí

  1. Haga clic en la definición del método y todo el archivo JS se abrirá para depurar :)

ingrese la descripción de la imagen aquí

Método 2:

Como ejemplo, estoy cargando un archivo JS cuando hago clic en un botón usando ajaxcall.

  1. Abierto network pestaña en las herramientas de desarrollo de google chrome
  2. Haga clic en un control (p. Ej., Botón) que carga algún archivo javascript y llama a alguna función javascript.
  3. observe la pestaña de red y busque esa función JS (en mi caso es RetrieveAllTags?_=1451974716935 )
  4. Pase el cursor sobre él initiatery encontrará su archivo JS cargado dinámicamente (con prefijo VM*).

depurar carga dinámica de JavaScript en Chrome -1

  1. Haga clic en ese VM*archivo para abrirlo.
  2. Ponga el depurador donde quiera en ese archivo: D

depurar carga dinámica de JavaScript en Chrome -1

Gourav
fuente
Vergüenza en Google por hacer esto tan obtuso. 1 / Vergüenza = Felicitaciones (lo contrario de la vergüenza) para ti por sacarlo :)
toddmo
16

Estoy usando Google Chrome para ese propósito.

En Chrome, en la pestaña de secuencias de comandos, puede habilitar 'pausar en todas las excepciones'

ingrese la descripción de la imagen aquí

Y luego póngalo en algún lugar de su línea de código try{throw ''} catch(e){}. Chrome detendrá la ejecución cuando llegue a esta línea.

EDITAR: imagen modificada para que quede más claro de lo que estoy hablando.

Hombre molecular
fuente
Para desarrollar en Google Chrome, debe insertar un texto que indique el nombre del script dinámico actual cuando jQuery o cualquier otro script de carga agregue un script al DOM como le informé al equipo de jQuery. Pero no tengo tiempo para trabajar en eso. bugs.jquery.com/ticket/8292
Soul_Master
@Soul_Master, pero con mi método no es necesario insertar texto. Inserta en su línea de secuencia de comandos dinámica, try{throw ''} catch(e){}luego habilita el modo 'pausa en todas las excepciones' y Chrome detendrá la ejecución cuando se lance la excepción. Lo he comprobado muchas veces. Cargué otra imagen. Allí está más claro de lo que estoy hablando.
Molecular Man
En Chrome, puede utilizar la instrucción "depurador;" para interrumpir una instrucción cuando el panel del depurador está abierto. Chrome simplemente ignorará esto si el panel del depurador está cerrado.
dinesh ygv
@dineshygv, puedes ... ahora. Pero no pudiste hace 3 años. debuggerno funcionaría en un script creado dinámicamente en ese entonces.
Molecular Man
10

Creo que es posible que deba darle al código evaluado un "nombre" como este:

http://blog.getfirebug.com/2009/08/11/give-your-eval-a-name-with-sourceurl/

Si lo hace, creo que es probable que el debuggerenfoque de la "actualización 2" funcione en ese momento.

Kyle Simpson
fuente
Si. Yo lo veo. Ya informé de este error al equipo de jQuery durante mucho tiempo. bugs.jquery.com/ticket/8292
Soul_Master
1
¡Advertencia! la técnica descrita provoca un error en IE7, así que no lo deje //@ sourceURL=blahen producción.
Jethro Larson
es probablemente la debuggerparte que causa problemas, no el comentario de la fuente (que seguramente es ignorado por JS)
Kyle Simpson
Puede causar problemas con, por ejemplo, la compilación condicional. por ejemplo: javascriptkit.com/javatutors/conditionalcompile.shtml
Jethro Larson
5

ACTUALIZACIÓN : se ha cambiado la sintaxis de sourceUrl (@ se reemplaza por #) para evitar errores en navegadores no compatibles (leer: IE). Detalles

DJ_HOEK
fuente
2

Usando Chrome (12.0.742.112) con el código que proporcionó más una declaración de depuración como esta

    script.text =   "debugger;var someVariable = 0;\n" +
    "someVariable = window.outerWidth;\n" +
    "alert(someVariable);";

chrome_debugger

funciona para mi.

Necesito modificar algo de JavaScript (limitando el alcance de todo el selector de jQuery a la vista parcial> div actual) antes de ejecutarlo.

Puede que sea más tangible si vincula el cambio de selector a un evento en su vista parcial en lugar de crear elementos de script en el cuerpo html (no se siente bien).

Podrías hacer algo como esto

   (function(j)(
      var limiting_selector = '';
      j(".partial_views").bind('focusin over',function(e){
         limiting_selector = j(this).attr('someattr') // or j(this).data('limiting-selector')
      }).bind('focusout out',function(e){
         limiting_selector = '';
      });
      // And then go on with
      // j(limiting_selector+' .someclass')
   ))(jQuery)

Este código siempre agregaría un selector de limitación a todas las operaciones de selección de jQuery realizadas mientras el mouse está en un elemento determinado dado que el HTML no está desordenado.

(Aún parece hacker, puede que alguien tenga una mejor solución)

salud

krichard
fuente
1

En Firebug, debería poder ver ese script después de que se cargue la página y se inyecte el script. Cuando lo haga, puede establecer un punto de interrupción en el lugar apropiado y se conservará cuando actualice la página.

Moishe Lettvin
fuente
Tienes razón. Eso no funciona. Lo probé con eval () y Firebug te permitirá establecer un punto de interrupción cuando lo uses. ¿Hay alguna razón por la que no pueda usar eval () y necesite establecer una etiqueta de script? Incluso de manera más general, ¿hay alguna razón por la que no pueda servir este javascript dinámico como un archivo .js separado en su servidor? ¿Que problema estas tratando de resolver?
Moishe Lettvin
Necesito modificar algo de JavaScript (limitando el alcance de todo el selector de jQuery al div de vista parcial actual) antes de ejecutarlo. O tienes alguna idea para resolver mi pregunta reciente. Para obtener más información, consulte mi pregunta reciente.
Soul_Master
1

Javascript cargado dinámicamente aún debe ser analizado por el navegador, aquí es donde se encuentra WebKit o el depurador FireBug, por lo que está sujeto al depurador pase lo que pase, creo que esto es lo mismo para las herramientas de desarrollador en IE8,

Por lo tanto, su código está sujeto al depurador, por lo que el problema no será en ese archivo o texto si no se produce un error

La otra cosa es script.text = "alert('Test!');";que no es válida, por lo que no funcionará en todos los navegadores, lo que desea esscript.innerHTML = "alert('Test!');";

a pesar de que es innerHTML, significa código dentro de las etiquetas HTML, no el HTML dentro, solo la mayoría de las personas lo usan para esto, por lo que se explica mal

EDITADO PARA LA ACTUALIZACIÓN DOS

Y en la segunda actualización usando Chrome hice esto

ir a aproximadamente: en blanco Abra la consola y pegue en 

var script = document.createElement('script')
script.setAttribute("type","text/javascript")
script.innerHTML = "alert('Test!');debugger;";

document.getElementsByTagName('head')[0].appendChild(script);

luego se romperá y abrirá la pestaña del script con about: se muestra en blanco (no hay nada que ver)

Luego, en el lado derecho, muestre la lista de la pila de llamadas, luego haga clic en el segundo (función anónima) y se lo mostrará.

Entonces, en su archivo tendrá una (función anónima) que es el código que está ejecutando y verá el punto de interrupción allí. para que sepa que está en el correcto.

Barkermn01
fuente
0

Con la herramienta para desarrolladores de Google Chrome (o Safari ), puede ejecutar JavaScript línea por línea.

Secuencias de >comandos de herramientas de desarrollo >Elija qué secuencia de comandos desea depurar el >signo de pausa en el lado derecho O establezca puntos de interrupción haciendo clic en el número de línea

Derek 朕 會 功夫
fuente
0

Una opción que me gusta es usarla agregando una declaración console.log ('') en mi código. Una vez que esta declaración aparece en la consola, se le asocia un número de línea. Puede hacer clic en ese número para ir a la ubicación en la fuente y establecer un punto de interrupción. El inconveniente de este enfoque es que los puntos de interrupción no se conservan en las recargas de la página y debe ejecutar el código antes de poder agregar un depurador.

IcedDante
fuente
0

Para el navegador Google Chrome actual u otros navegadores modernos, puede buscar fácilmente cualquier código evaluado con una herramienta de desarrollador como las siguientes imágenes.

  1. Simule algún archivo de carga dinámica.

ingrese la descripción de la imagen aquí

  1. Presione Ctrl + Shift + F en la pestaña de origen y busque la función anterior.

ingrese la descripción de la imagen aquí

Cree un punto de interrupción y ejecute la función para probarlo.

ingrese la descripción de la imagen aquí

Soul_Master
fuente