Recarregue um script / folha de estilo no Chrome

Question

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 em page.html que usa script.js e style.css , é possível recarregar, digamos, script.js , sem atualizar page.html ?

    

Answer 1

Uma maneira fácil de trabalhar com quase todas as folhas de estilo e imagens é alterar o nome do arquivo adicionando uma consulta ao URL.

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

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

Altere 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 as mesmas).

Isso pode ser feito 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 de scripts, você não deveria. Quase todos os scripts estão modificando a página ao carregar 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.

    

Answer 2

Eu posso ver onde isso seria útil ao tentar depurar um formulário de várias páginas ou algo que é carregado pelo Ajax em resposta a uma série de perguntas; no entanto, eu pessoalmente já vi tempos em que modificar CSS ou scripts nas ferramentas de desenvolvimento do Chrome cria um resultado diferente do que 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 eu 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ê quer fazer isso, mas, supondo que seja para fins de depuração de um processo encadeado longo, sugiro adicionar um teste simples para determinar se você está depurando. Dependendo de como seu código é configurado, eu tentaria adicionar pontos de depuração que agem como o exemplo aproximado a seguir:

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 ideal. Pode ser preciso um pouco de esforço para configurá-lo e você terá que removê-lo ou desativá-lo antes de entrar em operação, mas economizará tempo repetidamente ao recarregar uma página e precisar refazer uma longa cadeia de etapas.

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