☰

Recargar un script/hoja de estilo en Chrome

tag-icon • tag-icon google-chrome
Recargar un script/hoja de estilo en Chrome

Usando las herramientas de desarrollo de Chrome, ¿es posible recargar solo uno (o más) de los scripts u hojas de estilo inyectados en una página sin recargar toda la página? Entonces, si estoy en page.htmlese uso script.jsy style.css, ¿es posible recargar, digamos script.js, sin actualizar page.html?

Respuesta1

Una forma sencilla que debería funcionar con casi todos.hojas de estilo e imágeneses cambiar el nombre del archivo agregando una consulta a su URL.

Por ejemplo, en superusuario, el CSS es:

<link rel="stylesheet" type="text/css" href="//cdn.sstatic.net/superuser/all.css?v=a5d649727a07">

Cambia eso a

<link rel="stylesheet" type="text/css" href="//cdn.sstatic.net/superuser/all.css?v=a5d649727a07&refresh">

Y obtenga reglas de estilo recargadas (aunque iguales).

Esto se puede convertir en un bookmarklet o copiar a la consola.

[].forEach.call(document.querySelectorAll("link[rel=stylesheet]"), function(link) {
   link.href+=(link.href.indexOf("?") > -1) ? "&refresh" : "?refresh";
})

Según los guiones, no deberías. Casi todosguionesestán modificando la página al cargar o adjuntándose a algún controlador. Puede cargar fácilmente otro archivo js, ​​pero los cambios realizados por el anterior son muy difíciles de deshacer.

Respuesta2

Puedo ver dónde esto sería útil al intentar depurar un formulario de varias páginas o algo cargado por Ajax en respuesta a una serie de preguntas; sin embargo, personalmente he visto ocasiones en las que modificar CSS o scripts en las herramientas de desarrollo de Chrome crea un resultado diferente que cuando esos mismos cambios se agregan al archivo apropiado y la página se recarga desde cero. No sucede todo el tiempo, pero lo he visto suceder tantas veces que dudo en confiar en los resultados después de realizar múltiples cambios en las herramientas de desarrollo.

No estoy seguro de por qué quiere hacer esto, pero, asumiendo que es para depurar algún proceso encadenado largo, sugeriría agregar una prueba simple para determinar si está depurando. Dependiendo de cómo esté configurado su código, intentaría agregar puntos de depuración que actúen como el siguiente ejemplo aproximado:

If (current-point != debug-point && debugging === true) Then
   ---code to bypass steps here---
Else
   ---other code to aid the debug process or allow regular execution---
End If

Obviamente hacer una función sería ideal. Puede que requiera un poco de esfuerzo configurar esto y tendría que eliminarlo o deshabilitarlo antes de publicarlo, pero ahorraría tiempo al recargar repetidamente una página y tener que rehacer una larga cadena de pasos.

Es posible que esto no sea posible si su código es significativamente complicado (mediante el uso de bibliotecas externas o simplemente código descuidado) o si tiene que trabajar en un sistema en vivo. Sin embargo, si es posible, automatizar u omitir los pasos hasta el punto que necesite le permitirá depurar y trabajar más rápido con resultados más precisos que confiar en las herramientas de desarrollo de Chrome para interpretar y reflejar con precisión todos los cambios que realice después de cargar la página.

información relacionada