Edición en el depurador de Chrome

247

¿Cómo edito "dinámicamente" el código JavaScript en el depurador de Chrome? No es para mí, así que no tengo acceso al archivo fuente. Quiero editar el código y ver qué efectos tienen en la página, en este caso evitar que una animación se ponga en cola un montón de veces.

javascript  google-chrome  debugging 
— Tom
fuente
55
Podrías usar Opera. Opera permite la edición de archivos JS. Después de volver a cargar la página, se aplicarán los cambios. Haga clic derecho> Fuente> Realizar cambios> Aplicar cambios.
— XP1
Este es un tutorial increíble para el depurador de Chrome. Muestra los pasos muy simples para realizar cambios en el depurador en sus scripts.
— SaganRitual
1
También puede "inyectar" código a través del punto de interrupción condicional . En el ejemplo dado, use num = 5, console.log(arguments[0], num), falsepara actualizar y registrar el valor dentro de la foofunción.
— mems
— stackinfostack el

Respuestas:

80

Puede usar el depurador de JavaScript incorporado en las Herramientas para desarrolladores de Chrome en la pestaña "Scripts" (en versiones posteriores es la pestaña "Fuentes"), pero los cambios que aplica al código se expresan solo en el momento en que la ejecución los atraviesa. Eso significa que los cambios en el código que no se ejecuta después de que se cargue la página no tendrán efecto. A diferencia de, por ejemplo, cambios en el código que reside en los controladores del mouseover , que puede probar sobre la marcha.

Hay un video del evento Google I / O 2010 que presenta otras capacidades de las Herramientas para desarrolladores de Chrome.

— Adán
fuente
26
En versiones posteriores de Chrome, los íconos de las pestañas desaparecieron y la pestaña 'Scripts' se renombró a 'Fuentes', por lo que podría no ser obvio encontrar el depurador de JavaScript. Más información aquí stackoverflow.com/questions/12113769/…
— chrisjleu
99
No hay tal método. Tampoco puedo modificar el código en la pestaña Fuentes.
— Melab
17
El depurador de Chrome no permite la modificación local de javascript. Falso.
— omikes
1
@oMiKeY ¿Qué es falso? Chrome ciertamente permite modificar el script en el depurador.
— JLRishe
66
@oMiKeY puede modificar si el script no está prettified
— peterchaula
284

Me encontré con esto hoy, cuando estaba jugando con el sitio web de otra persona.

Me di cuenta de que podía adjuntar un punto de interrupción en el depurador a alguna línea de código antes de lo que quería editar dinámicamente. Y dado que los puntos de interrupción permanecen incluso después de una recarga de la página , pude editar los cambios que quería mientras estaba en pausa en el punto de interrupción y luego continué dejando que la página se cargara.

Entonces, como una solución rápida, y si funciona con su situación:

  1. Agregue un punto de interrupción en un punto anterior del script
  2. Recargar página
  3. Edite sus cambios en el código
  4. CTRL+ s(guardar cambios)
  5. Anular la pausa del depurador
— sjacob
fuente
1
¡Gracias! Descubrí que esto funcionaba cuando necesitaba hacer cambios en una función anónima de ejecución automática que se llamaba cerca de la carga de la página.
— Peter
1
Argh, porque había intentado esto antes y no funcionó y aunque, oh hombre, ¿cómo lo extrañé? Pero sí, no funciona para mí.
— Jamie Hutber
8
Para mí fue crucial saber que los cambios deben guardarse (paso 4). ¡Gracias!
— Sergey Goliney
3
No funciona en javascript dentro de los archivos html para mí. Además, si ha agregado una carpeta al espacio de trabajo, seleccione el archivo js local , haga clic con el botón derecho y asigne ese archivo a la red dito.
— oo
1
Entonces, ¿no hay forma de modificar los scripts en los archivos html?
— Guerrero
13

Esto es lo que estás buscando:

1.- Navegue a la pestaña Fuente y abra el archivo javascript

2.- Edite el archivo, haga clic derecho y aparecerá un menú: haga clic en Guardar y guárdelo localmente.

Para ver el diferencial o revertir sus cambios, haga clic derecho y seleccione la opción Modificaciones locales ... del menú. Verá sus cambios con respecto al archivo original si expande la marca de tiempo que se muestra.

Información más detallada aquí: http://www.sitepoint.com/edit-source-files-in-chrome/

— artemisiano
fuente
5

Bastante fácil, vaya a la pestaña 'scripts'. Y seleccione el archivo de origen que desee y haga doble clic en cualquier línea para editarlo.

— gnur
fuente
44
Sería increíble si pudiera guardar los cambios en el disco en el caso del archivo: // URLs
— Jim Blackler
3
Eso fue exactamente lo que hice, pero los cambios no se reflejaron en la página, como era de esperar. Necesito cambiar $ (selector) .fadeIn () ... a $ (selector) .stop (true, true) .fadeIn () ... ¿Sabes? Y quiero poder ver que eso suceda en la página.
— Tom
1
Oh maldita sea, tienes razón. Ahora me pregunto por qué Chrome nos permite editar cualquier cosa si no tiene ningún efecto ..
— #
"Guardar como ..." solo guarda el archivo en su computadora. No aplica los cambios después de volver a cargar la página. Si desea aplicar cambios a los archivos JS para la depuración, puede usar Opera.
— XP1
1
— JustGoscha
3

Como esta es una pregunta bastante popular que trata con la edición en vivo de JS, quiero señalar otra opción útil. Como lo describe svjacob en su respuesta:

Me di cuenta de que podía adjuntar un punto de interrupción en el depurador a alguna línea de código antes de lo que quería editar dinámicamente. Y dado que los puntos de interrupción permanecen incluso después de una recarga de la página, pude editar los cambios que quería mientras estaba en pausa en el punto de interrupción y luego continué dejando que la página se cargara.

La solución anterior no funcionó para mí para JS bastante grande (paquete de paquete web - versión minimizada de 3.21MB, 130k líneas de código en versión prettificada) - Chrome se bloqueó y solicitó la recarga de la página que revirtió cualquier cambio guardado. El camino a seguir en este caso fue Fiddler, donde puede configurar la opción AutoRespond para reemplazar cualquier recurso remoto con cualquier archivo local de su computadora; consulte esta pregunta de SO para obtener más detalles .

En mi caso, también tuve que agregar encabezados CORS al violinista para simular con éxito la respuesta.

— dominik
fuente
2

Si es javascript que se ejecuta con un botón, entonces hacer el cambio en Fuentes> Fuentes (en las herramientas de desarrollador en Chrome) y presionar Ctrl + S para guardar, es suficiente . Hago esto todo el tiempo.

Si actualiza la página, sus cambios de JavaScript desaparecerán, pero Chrome aún recordará sus puntos de interrupción.

— desarrollador747
fuente
2

Ahora Google Chrome ha introducido una nueva función. Mediante el uso de esta función, puede editar su código en Chrome Chrome. (Cambio permanente en la ubicación del código)

Para eso, presione F12 -> Pestaña Fuente - (lado derecho) -> Sistema de archivos - en eso, seleccione su ubicación de código. y luego el navegador Chrome le pedirá permiso y luego ese código se hundirá en color verde. y puede modificar su código y también se reflejará en la ubicación de su código (significa que cambiará permanentemente)

Gracias

— stackinfostack
fuente
2

Al igual que la respuesta de @mark, podemos crear fragmentos en Chrome DevTools, con overrideel JavaScript predeterminado. Finalmente, podemos ver qué efectos tienen en la página.

Imagen

— vino kami
fuente
1

Aquí hay una suave introducción al depurador js en Chrome que escribí. Tal vez ayude a otros que buscan información sobre esto: http://meeech.amihod.com/getting-started-with-javascript-debugging-in-chrome/

— meeech
fuente
1
Esa es una buena crítica. Desafortunadamente, no dice nada de editar JS en el depurador, que es la tarea en cuestión.
— Bruno Bronosky
Discrepar. Verá al final, específicamente, doy un ejemplo de cómo "" dinámicamente "editar el código JavaScript en el depurador de Chrome", que es parte de la pregunta.
— reunión
1
meeech, a menos que esté malinterpretando tu publicación, demuestras cómo evaluar JS en la consola. Eso es diferente de editar una función para que cuando se llame a la función en el futuro, se comporte de manera diferente.
— Bruno Bronosky
Lo suficientemente justo. Entendí que la edición significaba un cambio alrededor de los valores de la página en vivo, y pensé que la redacción ayudaría, ya que una vez que la tienes en la consola, puedes jugar con los valores y cualquier otra cosa en el contexto de ejecución.
— reunión el
1
Sí, amigo, hice exactamente lo que me describiste durante muchos años. Finalmente, me frustré al no poder lograr un buen ciclo de retroalimentación para alterar los controladores de eventos. Especialmente aquellos que se disparan durante la carga de la página. Como AaronLS y yo discutimos en los comentarios de la respuesta de gnur, a veces la edición en DevTools> Fuentes> Fuentes funciona y otras veces no. Pero cuando funciona, ¡es muy dulce!
— Bruno Bronosky
1

puede editar los archivos javascrpit dinámicamente en el depurador de Chrome, en la pestaña Fuentes , sin embargo, sus cambios se perderán si actualiza la página, para pausar la carga de la página antes de realizar los cambios, deberá establecer un punto de interrupción y luego volver a cargar la página y edite sus cambios y finalmente desactive el depurador para ver que sus cambios surtan efecto. Depurador de Chrome

— Seif Tamallah
fuente
debe mantener la consola abierta para que el cromo se detenga en los puntos de interrupción, de lo contrario, Chrome ignorará los puntos de interrupción
— Seif Tamallah
no funciona. Vuelvo a cargar usando F5 y se detiene, cambio el archivo, luego sigo corriendo y obtengo el mismo error que acabo de solucionar. Es un archivo js al lado de la página principal.,
— darkgaze
1

Estaba buscando una manera de cambiar el guión y depurar ese nuevo guión. La forma en que logré hacer eso es:

  1. Establezca el punto de interrupción en la primera línea del script que desea cambiar y depurar.

  2. Vuelva a cargar la página para que se llegue al punto de interrupción

  3. Pegue su nuevo script y establezca los puntos de interrupción deseados en él

  4. Ctrl + s, y la página se actualizará haciendo que se golpee ese punto de interrupción en la primera línea.

  5. F8 para continuar, y ahora su script recién pegado reemplaza el original siempre que no se realicen redireccionamientos y recargas.

— 100r
fuente
0

Puede usar "Anulaciones" en Chrome para persistir los cambios de JavaScript entre las cargas de la página, incluso cuando no aloja la fuente original.

  1. Cree una carpeta en Herramientas para desarrolladores> Fuentes> Anulaciones
  2. Chrome le pedirá permiso a la carpeta, haga clic en Permitir
  3. Edite el archivo en Orígenes> Página y luego guarde (ctrl-s). Un punto morado indicará que el archivo se guarda localmente.

La subpestaña Anulaciones en las Herramientas para desarrolladores de Chrome

— Mark Foreman
fuente
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.