Herramienta de desarrollo de Chrome: archivo [VM] de javascript

139

Agregué un punto de interrupción en mi archivo javascript (jaydata.js) y estaba presionando "Pasar a la siguiente llamada de función". Cuando llegó a una línea que era:

},

apareció otro archivo titulado "[VM] (8312)". Seguí haciendo clic en "Pasar a la siguiente llamada de función" y ahora mi pantalla es:

ingrese la descripción de la imagen aquí

¿Cuáles son estos guiones extraños y misteriosos titulados "[VM] (XXXX" y de dónde provienen?

debugging google-chrome-devtools

— AllieCat
fuente

1

Estos archivos VM también aparecen cuando está editando archivos que están depurando al mismo tiempo. Chrome pierde la sincronización y cuando se coloca un punto de interrupción en el archivo, se detendrá el código en alguna otra posición del archivo en la memoria en algún lugar. por ejemplo, test.html permitirá un punto de interrupción, pero cuando Chrome se detiene, lo hace en VM99: test.html en alguna otra posición. La solución es cerrar Chrome, renombrar los archivos, por ejemplo, test2.html, y comenzar de nuevo. (Borrar historial, caché, etc. no funciona y Chrome seguirá cargando el VM99: test.html si lo intentas.

— QuentinUK

112

[VM] (scriptId)No tiene un significado especial. Es un nombre ficticio que nos ayuda a distinguir el código que no está directamente relacionado con un nombre de archivo, como el código creado con evaly amigos.

En el pasado, todas estas secuencias de comandos solo estaban etiquetadas (program).

Si está interesado, solo busque "[VM]"el código fuente de Chromium , descubrirá que estos números no tienen un significado significativo fuera de las herramientas del desarrollador.

actualizar 2015-06-25

[VM] (scriptId)fue renombrado VMscriptId hace un tiempo , y aquí está el enlace directo al resultado de la búsqueda en caso de que el valor cambie nuevamente.

— Rob W
fuente

1

¿Golpearía Chrome el archivo [VM] en lugar del archivo js en vivo? Si es así, ¿por qué?

— Matt

@Matt ¿Qué quiere decir con "Golpear el archivo [VM] en lugar del archivo js en vivo"?

— Rob W

@RobW desprecio; mi navegador estaba almacenando en caché el archivo js (a pesar de haber actualizado mi buster de caché).

— Matt

1

[VM] (scriptId)fue renombrado VMscriptId hace un tiempo , pero he mantenido la respuesta en su estado actual para no invalidar la pregunta. El último enlace de búsqueda de código es: cs.chromium.org/%22VM%5C%22%20+%22 (enlace directo al resultado de la búsqueda en caso de que el valor cambie nuevamente: chromium.googlesource.com/chromium/blink/+/… )

— Rob W

Recientemente encontré este problema sin ninguna evaluación, parece estar relacionado con el uso de iFrames. Mi evidencia de esto es que cuando establezco un punto de interrupción en el código en un iFrame, obtengo el problema [VM], pero cuando abro el iFrame en su propia ventana, recibo el punto de interrupción muy bien. Solo asegúrese de que esto califique como uno de los "amigos" de eval como se describe en la respuesta.

— Peligro

42

Siempre que cargue contenido HTML a través de AJAX, y ese contenido contenga <script>etiquetas, la secuencia de comandos se evaluará utilizando eval () y la vista de Fuentes de Chrome la reconocerá como un nuevo archivo que comienza con 'VM'. Siempre puede ir a la pestaña Red, encontrar la solicitud AJAX y ver la respuesta HTML en su totalidad, incluido su script.

— Sam Kauffman
fuente

3

Sin embargo, esto apesta para la depuración. Si utilizo una etiqueta de secuencia de comandos con src=/test.jsun error que se remonta a test.js, el rastreo contiene el nombre de archivo correcto, pero a continuación, stacktraces contiene la magia VM. Esto hace que sea imposible obtener el código fuente [del mismo origen] para los archivos en el stacktrace más de una vez, y no puede almacenarlos en caché, ya que no sabe qué archivo es cuál en los stacktraces futuros. Esto se soluciona en Dev Tools, pero no en webapps.

— Carl Smith

Esta es probablemente la razón más común por la que sucede en las aplicaciones web modernas, y otro buen ejemplo de por qué deberíamos separar el código del contenido.

— alexw

37

Cuando se usa eval, el javascript se arroja a las máquinas virtuales de Chrome Debugger. Para ver js creados con eval en Chrome Debugger Sources, establezca este atributo al final (gracias Splaktar) de js:

//@ sourceURL=dynamicScript.js

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

— Manchar
fuente

9

La sintaxis ha cambiado, ahora es: // # sourceURL = dynamicScript.js

— ThiagoPonte

1

También debe estar al final de JavaScript, no al comienzo.

— Splaktar

He estado buscando algo como esto. Gracias

— David Kierans

¡Gracias! ¡Es muy útil!

— Eve juan

44

En las herramientas de depuración de Firefox, diceUsing //@ to indicate sourceURL pragmas is deprecated. Use //# instead

— Nighto

6

Si desea depurar archivos JS inyectados mediante programación en Chrome, puede usar la debugger;instrucción, esto es más rápido que encontrar dónde está su script y también más rápido que generar un archivo con sourceurl .

Funciona como un punto de interrupción y señala automáticamente su código en la pestaña de fuente de Chrome donde usa la debugger;instrucción.

Tenga en cuenta que la fuente del script es un archivo VMXXX.

— Rodrirokr
fuente

Esto no parece responder la pregunta.

— Grant Miller

Lo malo es que me dejé llevar por las otras respuestas a esta pregunta.

— Rodrirokr

1

¡Súper! Esto es exactamente lo que estaba buscando. No es necesario averiguar en qué VM su código fue insertado por el motor JS.

— Oleg Bolden

¿Cuál es la conexión entre esta respuesta y la pregunta?

— Ravindra Thorat

Con la debugger;declaración, puede desmitificar de dónde provienen los misteriosos 'misteriosos y misteriosos guiones titulados "[VM] (XXXX"' si así lo desea.

— Rodrirokr

4

Encontré que VM se genera a partir de algunas extensiones de Chrome: insertan CSS / JS en la página y Chrome usa los archivos de VM para ejecutarlo.

— Muelles
fuente

0

Cuando está depurando una fuente de ventana secundaria (iframe) que posteriormente se descarga, su archivo fuente también obtendrá el prefijo VM y el fondo amarillo.

— JosdeHa
fuente

0

Tuve el mismo problema. El problema es que el código de mi aplicación se consideró blackboxes por accidente. Cuando intenté ingresar al código, seguía abriendo estas VMXXXXpestañas.

Después de eliminar la configuración de blackbox para el archivo js de mi aplicación, pude pasar con éxito mi código.

— Justin Noel
fuente

0

para evitar esto

(function ()
 {
  var originalEval = eval;
  eval =
   function (script)
   {
    return originalEval(script + "\n//# sourceURL=blackbox-this.js");
   }
 }());

Y luego blackbox ^.*blackbox-this.js$

Lo mismo para setInterval / setTimeout cuando obtiene una cadena (pero eso es una mala práctica de todos modos, ¿verdad?;))

Eso funciona para ti?

— RahmanRezaee
fuente

-1

Tuve el mismo problema cuando estaba depurando mi aplicación angular. Ver demasiados scripts de VM que no podían ser ennegrecidos realmente tardaba mucho en depurar. Prefiero elegir mozilla / IE explorer para depurar.

— Sameeksha Kumari
fuente