☰

Recarregar um script/folha de estilo no Chrome

tag-icon • tag-icon google-chrome
Recarregar um script/folha de estilo no Chrome

Usando os devtools do Chrome, é possível recarregar apenas um (ou mais) dos scripts ou folhas de estilo injetados em uma página sem recarregar a página inteira? Então, se eu estiver page.htmlusando script.jse style.css, é possível recarregar, digamos script.js, sem atualizar page.html?

Responder1

Uma maneira fácil que deve funcionar com quase todosfolhas de estilo e imagensé alterar o nome do arquivo adicionando uma consulta ao seu URL.

Por exemplo, no superusuário, o css é:

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

Mude isso para

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

E obtenha regras de estilo recarregadas (embora iguais).

Isso pode ser transformado em um bookmarklet ou copiado para o console

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

A partir dos scripts, você não deveria. Quase tudoroteirosestão modificando a página durante o carregamento ou anexando-se a algum manipulador. Você pode facilmente carregar outro arquivo js, ​​mas as alterações feitas pelo anterior são muito difíceis de desfazer.

Responder2

Posso ver onde isso seria útil ao tentar depurar um formulário de várias páginas ou algo carregado pelo Ajax em resposta a uma série de perguntas; no entanto, pessoalmente já vi momentos em que a modificação de CSS ou scripts nas ferramentas de desenvolvimento do Chrome cria um resultado diferente de quando essas mesmas alterações são adicionadas ao arquivo apropriado e a página é recarregada do zero. Isso não acontece o tempo todo, mas já vi isso acontecer o suficiente para hesitar em confiar nos resultados depois de fazer várias alterações nas ferramentas de desenvolvimento.

Não sei por que você deseja fazer isso, mas, supondo que seja para fins de depuração de algum processo de longa cadeia, sugiro adicionar um teste simples para determinar se você está depurando. Dependendo de como seu código está configurado, eu tentaria adicionar pontos de depuração que agem como o seguinte exemplo 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 fazer uma função seria o ideal. Pode exigir um pouco de esforço para configurar isso e você terá que removê-lo ou desativá-lo antes de ir ao ar, mas economizaria tempo ao recarregar repetidamente uma página e ter que refazer uma longa cadeia de etapas.

Isso pode não ser possível se o seu código for significativamente complicado (através do uso de bibliotecas externas ou simplesmente de código desleixado) ou se você tiver que trabalhar em um sistema ativo. No entanto, se for possível, automatizar ou ignorar as etapas até o ponto necessário permitirá que você depure e trabalhe mais rapidamente com resultados mais precisos do que depender das ferramentas de desenvolvimento do Chrome para interpretar e refletir com precisão todas as alterações feitas após o carregamento da página.

informação relacionada