¿Cómo forzar al depurador de scripts de Chrome a recargar javascript?


244

Realmente me gusta la capacidad de editar javascript en el depurador de Chrome, sin embargo, encuentro que puede ser realmente problemático conseguir que el depurador vuelva a buscar el JavaScript del servidor.

A veces tengo que ir tan lejos simplemente cerrando el depurador y volver a cargar el marco funciona bien, pero otras veces (y no puedo precisar en qué condiciones ocurre esto) tengo que borrar mi caché temporal de Internet. A veces juro que tengo que cerrar Chrome por completo, luego borrar el caché y luego cargar la página antes de que el depurador finalmente me muestre el script más actualizado.

(Nota: el servidor web no almacena en caché el script)

Me preguntaba si alguien sabía de una manera rápida y fácil de decirle al depurador que invalide todo su javascript y lo recupere todo en la recarga de la página.


1
A veces, incluso tengo que reiniciar IIS Express para que las cosas se vuelvan a cargar correctamente.
Chris O

Respuestas:


330

Mientras desarrolla su script, intente deshabilitar el caché de Chrome.

Cuando vuelve a cargar la página, el JavaScript ahora debería actualizarse.


Chrome circa 2011

Configuración abierta Deshabilitar el caché


Chrome circa 2018

Configuración abierta Deshabilitar el caché

También puede acceder a él en la pestaña de red:

Pestaña red


8
Entonces, ¿esto se aplica todo el tiempo, o solo cuando el depurador está abierto?
PilotBob

77
solo cuando las Herramientas de desarrollo están abiertas
Karolis

11
He tenido ese conjunto todo el tiempo, y ahora, de repente, estoy atascado con un archivo determinado. ¿Alguien encuentra una solución?
IronicMuffin

55
Esto acaba de agregar algunos años a mi vida. Probé el CMD + SHIFT + R pero eso no lo hizo. Gracias
Kevin Zych

77
Para aquellos que vienen a esta pregunta más recientemente, tenga en cuenta que el menú de configuración está fuera del menú de tres puntos verticales en Herramientas para desarrolladores. Allí podrá marcar la casilla para deshabilitar el caché.
Scott C Wilson

136

ingrese la descripción de la imagen aquí

Se puede acceder al menú contextual que se muestra arriba haciendo clic derecho / presionando y manteniendo presionado el botón "recargar", mientras se abre Chrome Dev Tools .

La memoria caché vacía y la recarga dura funcionan mejor para mí.

Otra ventaja: esta opción mantiene intactas todas las demás pestañas abiertas y los datos del sitio web. Solo recarga y borra la página actual.


55
Ese es útil especialmente porque es simple de explicar. Tenía el problema de que un cliente no veía la modificación realizada en su sitio web. Presione F12, luego haga clic derecho en el botón de recarga, elija Vaciar caché y Recarga dura. Terminé, gracias a ese comentario :-)
Gull_Code

Es la mejor característica de Chrome :), en cualquier momento compañero.
Bishoy Hanna

1
¡Gracias! Estaba tratando de entender por qué el botón Recargar algunas veces me daba un menú y otras no.
iconoclasta

1
No tuve problemas con Ctrl + Shift + R al volver a cargar archivos Javascript, pero esto no devolvería el contenido actualizado que se sirvió en los archivos HTML. Empty Cache y Hard Reload hicieron el truco para eso.
S. Baggy

La mejor manera de hacerlo es usar esta memoria caché vacía y recargar de forma dura
hoogw

34

Siempre puede borrar un archivo específico haciendo lo siguiente:

  1. Open Dev Tools
  2. Haga clic en la pestaña Fuentes
  3. Encuentra tu script / imagen / archivo
  4. Verifique el panel derecho para ver si su archivo está actualizado

Si no:

  1. Haga clic con el botón derecho en el recurso en el panel izquierdo y elija 'Abrir enlace en una pestaña nueva'
  2. Forzar una recarga del recurso con los métodos anteriores. (Ver el ejemplo de @Bishoy Hanna)

Esto es muy útil si tiene recursos que están en marcos y CTRL+F5no obliga a actualizarlos.


1
cierto. presionando CTRL + F5 = Borrar la página actual de actualización de caché
STEEL

No tengo una pestaña de Recursos.
Mike W

@MikeW ha cambiado su nombre a Fuentes - He actualizado la respuesta
Steve Tauber

12

Shift+ F5borra rápidamente el caché.


18
ctrl-f5 no corta la mostaza, me temo. El antiguo archivo javascript permanece en el depurador.
Chris Fewtrell

9

Para Google Chrome no es Ctrl+ F5. ¡Es Shift+ F5borrar el caché actual! Esto funciona para mi !


Por qué ? No entiendo cuál es la diferencia entre eso y un comentario. Al final, la pregunta más útil se verá en la parte superior de la publicación.
RPDeshaies

2
El interlocutor no mencionó en ningún momento Ctrl-F5 , por lo que, por definición, su respuesta no es una respuesta a la pregunta formulada por el interlocutor, es más bien un comentario , una corrección a las respuestas de otras personas y debe tratarse como tal.
Edward A

9

Aquí hay un acceso directo a DevTools:

  1. F12 abrir Chrome DevTools
  2. F1 abrir la configuración de DevTools
  3. Marque Deshabilitar caché (mientras DevTools está abierto) como se muestra a continuación:

ingrese la descripción de la imagen aquí

Nota: Actualizado según el comentario de Dimi. Tienden a moverlo, así que avíseme o actualice la publicación si nota que ha cambiado.



2

Si está realizando cambios locales en un javascript en las Herramientas para desarrolladores, debe asegurarse de desactivar esos cambios antes de volver a cargar la página.

En la pestaña Fuentes, con su script abierto, haga clic derecho en su script y haga clic en la opción "Modificaciones locales" en el menú contextual. Eso muestra la lista de scripts en los que ha guardado modificaciones. Si lo ve en esa ventana, las Herramientas para desarrolladores siempre mantendrán su copia local en lugar de actualizarla desde el servidor. Haga clic en el botón "revertir", luego actualice nuevamente y debería obtener la copia nueva.


1

Parece que el depurador de Chrome carga archivos de origen en la memoria y no los deja ir a pesar de las actualizaciones de la memoria caché del navegador, es decir, tiene su propia memoria caché aparte de la memoria caché del navegador que no está sincronizada. Al menos, este es el caso cuando se trabaja con archivos mapeados de origen (estoy depurando fuentes de mecanografiado). Después de actualizar con éxito la memoria caché del navegador y validarlo navegando directamente al archivo fuente, descarga el archivo actualizado, pero tan pronto como vuelva a abrir el archivo en el depurador, seguirá devolviendo el archivo antiguo sin importar la versión de la memoria caché del navegador ordinario. Muy molesto de hecho.

Consideraría esto un error en Chrome. Yo uso la versión Versión 46.0.2490.71 m.

Lo único que ayuda es reiniciar Chrome (cierre todos los navegadores Chrome).


0

Si los archivos que está cargando se almacenan en caché y los cambios que ha realizado no se reflejan en el código, entonces hay 2 formas de tratar esto

  1. Limpia la caché como todos dijeron

  2. Si desea Caché y solo los archivos tienen que volver a cargarse, puede ir a la pestaña de red de la herramienta de desarrollo y borrar lo que se cargó. la próxima vez no lo cargará desde el caché. Tendrás tus últimos cambios.


0

Si está ejecutando un servidor local en Apache, puede obtener lo que parecen problemas de almacenamiento en caché. Esto me sucedió cuando tenía un servidor Apache ejecutándose en Vagrant (en virtualbox).

Simplemente agregue las siguientes líneas a su archivo de configuración ( /etc/httpd/conf/httpd.confo equivalente):

#Disable image serving for network mounted drive
EnableSendfile off

Tenga en cuenta que vale la pena buscar a través del archivo de configuración para ver si EnableSendfileestá configurado en onotro lugar.


0

También hay 2 soluciones (rápidas):

  1. Utilice el modo de incógnito durante la depuración, cierre la ventana y vuelva a abrirla.
  2. Eliminar tu historial de navegación

0

La desactivación de los puntos de interrupción causó que el nuevo script se cargara para mí.


0

En mi opinión, es más fácil trabajar en una 'sesión de navegación privada' de Chrome, para garantizar que sus archivos javascript no provengan del caché.


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.