Chrome Dev Tools: modifique JavaScript y vuelva a cargar

196

¿Es posible modificar el JavaScript de una página y luego volver a cargar la página sin volver a cargar el archivo JavaScript modificado (y así perder modificaciones)?

javascript google-chrome-devtools CDT
fuente

Respuestas:

220

Esta es una solución, pero una forma de lograrlo es agregando un punto de interrupción al comienzo del archivo o bloque de JavaScript que desea manipular.

Luego, cuando vuelva a cargar, el depurador se detendrá en ese punto de interrupción, y puede realizar los cambios que desee en la fuente, guardar el archivo y luego ejecutar el depurador a través del código modificado.

Pero como todos han dicho, la próxima recarga se habrá ido, al menos te permite ejecutar un lado del cliente JS ligeramente modificado.

Ashley Schroder
fuente
10
Resulta que esta fue la respuesta que estaba buscando. Coloque un punto de interrupción en la primera línea del código de JavaScript. Luego, cuando ocurra la interrupción, pegue su código modificado allí. ¡Pausa y funciona!
Nicholas Blasgen
¿Cómo editas o pegas el código allí? Definitivamente no veo esa funcionalidad en la consola de Chrome. Puedo editar JS / HTML desde la sección Elementos, pero eso no se recarga automáticamente. Pero en el lugar donde se establecen los puntos de interrupción, eso parece ser de solo lectura
Josh Sutterfield,
Lamentablemente, esto todavía no es una gran solución. Cualquier código que agregue no está disponible en la consola. Por ejemplo, agregar var foo = 'bar'un script no lo expone fooa la consola.
AgmLauncher
¿Qué pasa con los scripts externos? los puntos de interrupción parecen desaparecer de ellos.
OlehZiniak
Esto funciona siempre que desee modificar los scripts cargados externamente, ni Chrome ni las herramientas de depuración de FireFox no permitirán modificar el JavaScript en línea, incluso si su ejecución se interrumpe con un punto de interrupción.
Marek
150

Buenas noticias, la solución llegará en marzo de 2018, consulte este enlace: https://developers.google.com/web/updates/2018/01/devtools

"Las anulaciones locales le permiten realizar cambios en DevTools y mantener esos cambios en las cargas de página. Anteriormente, cualquier cambio que hiciera en DevTools se perdería cuando volviera a cargar la página. Las anulaciones locales funcionan para la mayoría de los tipos de archivos

Cómo funciona:

  • Usted especifica un directorio donde DevTools debe guardar los cambios. Cuando realiza cambios en DevTools, DevTools guarda una copia del archivo modificado en su directorio.
  • Cuando vuelve a cargar la página, DevTools sirve el archivo local modificado, en lugar del recurso de red.

Para configurar anulaciones locales:

  1. Abre el panel de Fuentes.
  2. Abra la pestaña Anulaciones.
  3. Haga clic en Anulaciones de configuración.
  4. Seleccione en qué directorio desea guardar sus cambios.
  5. En la parte superior de su ventana gráfica, haga clic en Permitir para otorgar a DevTools acceso de lectura y escritura al directorio.
  6. Haz tus cambios ".

ACTUALIZACIÓN (19 de marzo de 2018): es en vivo, explicaciones detalladas aquí: https://developers.google.com/web/updates/2018/01/devtools#overrides

Nico
fuente
12
Con el lanzamiento de Chrome 65, esta debería ser la nueva respuesta aceptada. (La funcionalidad ya estaba disponible en Chrome Canary)
Micros
1
Tengo un archivo "a.js? Ver = 1.2". Se guarda en la carpeta de anulación como "a.js" y no se carga como anulación. ¿No funciona cuando hay parámetros? ¿Hay alguna solución?
Ralf
Funciona según lo previsto, pero debe ocuparse de una cosa. Debe borrar las configuraciones de anulación o eliminar el archivo modificado localmente (guardado en la carpeta que especifique al configurar las anulaciones) una vez que desee cargar su js original.
Muhammad Murad Haider
61

La extensión de anulación de recursos le permite hacer exactamente eso:

  • cree una regla de archivo para la url que desea reemplazar
  • edite js / css / etc en la extensión
  • recarga tantas veces como quieras :)
laktak
fuente
1
Me hizo el truco, gracias. Solía ​​usar Fiddler para Windows antes de esa extensión. Ahora mismo puedo depurar archivos remotos en cualquier plataforma.
Ahmad Alfy
No entiendo el software, ¿alguien puede explicar cómo exactamente tengo que configurarlo?
Negro
0

Sé que no es la respuesta a la pregunta precisa (Chrome Developer Tools), pero estoy usando esta solución con éxito: http://www.telerik.com/fiddler

(bastante seguro de que algunos desarrolladores web ya conocen esta herramienta)

  1. Guarde el archivo localmente
  2. Edite según sea necesario
  3. ¡Lucro!

ingrese la descripción de la imagen aquí

Documentos completos: http://docs.telerik.com/fiddler/KnowledgeBase/AutoResponder

PD. Prefiero tenerlo implementado en Chrome como una bandera preserve after reload, no puedo hacer esto ahora, foros y grupos de discusión bloqueados en la red corporativa :)

Mars Robertson
fuente
-8

Sí, solo abra la pestaña "Fuente" en las herramientas de desarrollo y navegue hasta el script que desea cambiar. Realice los ajustes directamente en la ventana de herramientas de desarrollo y luego presione ctrl + s para guardar el script; sepa que se usarán los nuevos js hasta que actualice la página completa.

jacksbox
fuente
¿Qué versión de Chrome? Sí, puede "editar" el contenido de un script (sin embargo, no los scripts en la página en sí), pero los cambios no tienen ningún efecto, y ctrl-s / save solo le permite guardar el script localmente (como ctrl-as en La ventana principal).
davidkonrad
Uso la versión 34: cuando edito un script, por ejemplo, agrego un archivo console.log a un evento de clic (ya enlazado) y lo guardo, la consola emite el siguiente mensaje: "La compilación y la actualización se realizaron correctamente". - después de esto. cuando disparo el evento click obtengo el log-output en la consola.
jacksbox
Cuando vuelve a cargar la página, parece que no utilizó el archivo modificado localmente.
Jake Wilson
32
me tenías en "sí" ... pero luego me perdiste en "hasta que actualizas toda la página" ....
Cool Blue