¿Es posible cambiar los valores de las variables de JavaScript durante la depuración en Google Chrome?

81

Estoy depurando una aplicación javascript (usando las herramientas de desarrollo de Chrome) y me gustaría cambiar algunos valores de variables mientras paso por el código.

¿Es eso posible?

Lo intenté y obtuve algo como:

> modeline
1
> modeline=0
0             <<< seems to work but... 
> modeline
1             <<< ups!!

Pero no puedo encontrar ninguna documentación que indique lo que se puede o no se puede hacer ...

tato
fuente
Publica algún código. De donde modelineviene
Emil Ivanov
4
@Emil: ¿Eso es importante? modeline es una variable global, también he intentado modificarla usando window.modeline con los mismos resultados. Pero esta pregunta también es relevante para las variables locales declaradas dentro de una función
tato
4
Puedo confirmar este comportamiento. La modificación de una propiedad en un objeto JS en Chrome no parece tener ningún efecto sobre el valor real del objeto en el intérprete. En Firefox, la misma modificación hace que el script js se evalúe de forma diferente a como cabría esperar. ¿Algún tipo de seguridad adicional en Chrome peraps? ¿Alguien sabe si se puede desactivar en Chrome, para que pueda usarlo para depurar js?
Nikolaj Hansen
1
Archivó un informe de error para esto.
GreenGiant
1
Ya implementado en V8: Problema 2399 Ahora las herramientas de desarrollo de Chromium deben actualizarse: Problema 124206
gabrielmaldi

Respuestas:

39

¿Por qué esta respuesta sigue recibiendo votos positivos?

Según la respuesta de Mikaël Mayer , esto ya no es un problema, y ​​mi respuesta es obsoleta ( go()ahora regresa 30después de jugar con la consola). Esto se corrigió en julio de 2013, según el informe de error vinculado anteriormente en el comentario de gabrielmaldi . Me alarma que sigo recibiendo votos positivos, me hace pensar que el votante no entiende ni la pregunta ni mi respuesta.

Voy a dejar mi respuesta original aquí por razones históricas, pero voy upvote respuesta de Mikaël lugar .


El truco es que no puede cambiar una variable local directamente, pero puede modificar las propiedades de un objeto. También puede modificar el valor de una variable global:

var g_n = 0;
function go()
{
    var n = 0;
    var o = { n: 0 };
    return g_n + n + o.n;  // breakpoint here
}

consola:

> g_n = 10
  10
> g_n
  10
> n = 10
  10
> n
  0
> o.n = 10
  10
> o.n
  10

Verifique el resultado de go()después de establecer el punto de interrupción y ejecutar esas llamadas en la consola, y encontrará que el resultado es 20, en lugar de 0 (pero lamentablemente, no 30).

gilly3
fuente
2016/01/19 Chrome último, código trivial (var a = 1; depurador; console.log (a);) el error aún está presente ...
Offirmo
@Offirmo - 1está registrado. Cual es el error? ¿Qué esperabas que se registrara?
gilly3
con el depurador abierto, cambie el valor de aa cualquier cosa (por ejemplo, 42) en el panel "alcance" y luego reanude: 1 está registrado
Offirmo
@Offirmo - no para mí: captura de pantalla . Pero, si lo envuelvo en una función, veo lo que describe. Interesante. Pero luego, puedo cambiar el valor ingresándolo directamente en la consola (lo que personalmente encuentro más fácil que usar el panel de alcance). captura de pantalla Supongo que nunca intenté cambiar valores en el panel de alcance. Siempre ejecuto expresiones en la consola que cambian el valor, y eso parece funcionar pase lo que pase.
gilly3
3
Elegí mi voto porque tu respuesta cumple con todos los criterios de "una buena respuesta" y mencionas otra respuesta que brinda información más nueva y mejor, que, proveniente de una respuesta aceptada, le da credibilidad instantánea. Así que gracias. ¡Y disfruta de los votos a favor!
gfullam
67

Esto ahora es posible en Chrome 35 (hoy a partir del 11 de julio de 2014). Sin embargo, no sé qué versión lo permitió primero.

Acabo de probar el ejemplo de @ gilly3 en mi máquina y funciona.

  • Abra la consola, en Sourcesy la pestaña Snippets, agregue un nuevo fragmento, pegue el siguiente código en él:

    var g_n = 0; function go() { var n = 0; var o = { n: 0 }; return g_n + n + o.n; // breakpoint here }

  • Haga clic con el botón derecho en el nombre del fragmento, haga clic en 'Ejecutar' (aunque esto no activa la función)

  • Agregue el punto de interrupción en la declaración de devolución.
  • En la consola a continuación, escriba go()
  • y cambie los valores de las variables como se muestra a continuación

función con modificación local permitida.

y el resultado devuelto g_n + n + o.nes 30.

Mikaël Mayer
fuente
1
La regresión de este error se rastrea en el enlace proporcionado en la respuesta de Brian .
Mike
7

Este es un error reconocido en las herramientas de desarrollo de Chrome:

http://code.google.com/p/chromium/issues/detail?id=124206

brianpeiris
fuente
Parece que se corrigió el 21 de marzo de 2013. No estoy seguro de cómo saber en qué versión de Chrome estará.
David
@David Lo arreglaron en Blink, es posible que tengamos que esperar un tiempo para obtener una compilación de Chrome que use Blink
Anshul
3
Está roto (nuevamente) en la versión 49.0.2623.87 de Chrome. Inicie sesión en el enlace anterior y destaque el problema si desea elevar su importancia.
Mike
5

¡Si! ¡Finalmente! Lo probé con Chrome, versión 66.0.3359.170 (compilación oficial) (64 bits) en Mac.

Puede cambiar los valores en los ámbitos como en la primera imagen, o con la consola como en la segunda imagen.

Valores de cambio del depurador de Chrome

ingrese la descripción de la imagen aquí

Tyler Collier
fuente
Eso parece funcionar también para situaciones complejas (como Intervalos y disparadores).
Gerfried
4

Parece que no.

Ponga un punto de interrupción, cuando se detenga, cambie a la consola, intente establecer la variable. No se produce un error cuando le asigna un valor diferente, pero si lo lee después de la asignación, no se modifica. : - /

Vlad GURDIGA
fuente
Ok ... al menos estás viendo el mismo comportamiento que veo. Pero ... ¿es posible?
tato
4

Firebug parece permitirte hacer eso.

Bobo
fuente
3
Y también IE y Opera Dragonfly.
Keith K
5
Realmente extraño Opera Dragonfly -____-
ThorSummoner
2

De hecho, hay una solución. Copie el método completo, modifique su nombre, por ejemplo, originalName () a originalName2 () pero modifique la variable interna para que tome el valor que desee, o páselo como parámetro.

Luego, si llama a este método directamente desde la consola, tendrá la misma funcionalidad pero podrá modificar los valores de las variables.

Si el método se llama automáticamente, escriba en la consola

originalName = null;
function originalName(original params..)
{
    alert("modified internals");
    add whatever original code you want
}
mdubez
fuente
2

Puedo modificar el valor de una variable de secuencia de comandos por asignación en la consola. Parece más simple.

Jeff Lowery
fuente
1

No sé por qué el equipo de Chrome no permite esta función tonta ... pero la única forma en que podría cambiar los valores de las variables con éxito es modificar el script directamente en el editor de Chrome en la pestaña "Fuentes" (esto cambia el comportamiento de su script hasta que actualice la página), pero esos cambios se perderán cuando se actualice, así que tenga cuidado.

LeonardoX
fuente
0

Estaba teniendo el mismo problema, fui a 'Acerca de Google Chrome' -> Ayuda y me dijo que necesitaba reiniciar mi navegador para obtener las últimas actualizaciones.

Hice esto y, de repente, ahora puedo cambiar las variables locales. Simplemente haga clic en la variable que desea editar en la ventana Variables de alcance y escriba su nuevo valor.

Sin embargo, noté algunas rarezas, que tuve que pasar por encima de algunas asignaciones de var no relacionadas antes de poder alterar el texto en la ventana de la derecha (Variables de alcance).

GilesDMiddleton
fuente
Si ha utilizado el almacenamiento local para almacenar propiedades, también puede ir a Recursos-> Almacenamiento local y editar las propiedades que ha guardado directamente allí.
GilesDMiddleton
0

Para modificar un valor cada vez que se ejecuta un bloque de código sin tener que interrumpir el flujo de ejecución :

La función "Logpoints" en el depurador está diseñada para permitirle registrar valores arbitrarios en la consola sin romperse. Evalúa el código dentro del flujo de ejecución, lo que significa que puede usarlo para cambiar valores sobre la marcha sin detenerse.

Haga clic con el botón derecho en un número de línea y seleccione "Punto de registro", luego ingrese la expresión de asignación. Se parece a esto:

ingrese la descripción de la imagen aquí

Lo encuentro muy útil para establecer valores en un estado que de otro modo no sería fácil de reproducir, sin tener que reconstruir mi proyecto con líneas de depuración. ¡RECUERDA eliminar el punto de interrupción cuando hayas terminado!

Matthew Marichiba
fuente