Como forçar o depurador de scripts do Chrome a recarregar o javascript?

244

Eu realmente gosto da capacidade de editar o javascript no depurador do chrome, no entanto, acho que pode ser realmente problemático fazer com que o depurador busque novamente o JavaScript no servidor.

Às vezes, tenho que ir tão longe, fechando o depurador e recarregando o quadro, funciona bem - mas outras vezes (um dI não pode determinar em que condições isso ocorre) tenho que limpar meu cache temporário da Internet. Às vezes, juro que preciso fechar o chrome completamente, limpar o cache e carregar a página antes que o depurador finalmente me mostre o script mais atualizado.

(NB. Não há armazenamento em cache do script pelo servidor da web)

Eu queria saber se alguém sabia de uma maneira rápida e fácil de dizer ao depurador para invalidar todo o seu javascript e buscar tudo de novo na atualização da página?

Chris Fewtrell
fonte
1
Às vezes, tenho que reiniciar o IIS Express para que as coisas sejam recarregadas corretamente.
Chris O

Respostas:

330

Enquanto você estiver desenvolvendo seu script, tente desativar o cache do Chrome.

Quando você recarrega a página, o JavaScript agora deve ser atualizado.


Chrome por volta de 2011

Abrir configurações Desativar o cache


Chrome por volta de 2018

Abrir configurações Desativar o cache

Você também pode acessá-lo na guia rede:

Guia Rede

adrianbanks
fonte
8
Então, isso se aplica o tempo todo ou apenas quando o depurador está aberto?
PilotBob
7
somente quando as Ferramentas de Desenvolvimento estiverem abertas #
Karolis
11
Eu tive esse cenário o tempo todo e, de repente, estou preso a um determinado arquivo. Alguém encontrou uma solução?
IronicMuffin
5
Isso acabou de adicionar alguns anos à minha vida. Eu tentei o CMD + SHIFT + R, mas isso não aconteceu. Obrigado
Kevin Zych
7
Para aqueles que estão chegando a essa pergunta mais recentemente, observe que o menu de configurações está desativado no menu de três pontos verticais nas Ferramentas do desenvolvedor. Lá, você poderá marcar a caixa para desativar o cache.
22675 Scott C Wilson
136

insira a descrição da imagem aqui

O menu de contexto mostrado acima é acessível clicando / pressionando e mantendo pressionado o botão "recarregar", enquanto o Chrome Dev Tools é aberto .

O cache vazio e o recarregamento rígido funcionam melhor para mim.

Outra vantagem: Essa opção mantém todas as outras guias abertas e dados do site intocados. Ele apenas recarrega e limpa a página atual.

Bishoy Hanna
fonte
5
Essa é útil principalmente porque é simples de explicar. Eu estava com o problema de um cliente não ver a modificação feita no site dele. Pressione F12 e clique com o botão direito do mouse no botão recarregar, escolha Esvaziar cache e recarregar com força. I foi feito, thans para que o comentário :-)
Gull_Code
É o melhor recurso do Chrome :), a qualquer momento.
Bishoy Hanna
1
Obrigado! Eu estava tentando descobrir por que o botão Recarregar às vezes me dava um menu e às vezes não.
Iconoclast
1
Não tive problemas com Ctrl + Shift + R ao recarregar arquivos Javascript, mas isso não traria de volta o conteúdo atualizado exibido em arquivos HTML. O cache vazio e o Hard Reload fizeram o truque para isso.
Julio
A melhor maneira de fazê-lo, usar esse cache vazio e recarga dura
hoogw
34

Você sempre pode limpar um arquivo específico, fazendo o seguinte:

  1. Abrir Ferramentas de Desenvolvimento
  2. Clique na guia Fontes
  3. Encontre seu script / imagem / arquivo
  4. Verifique o painel direito para ver se seu arquivo está atualizado

Se não:

  1. Clique com o botão direito do mouse no recurso no painel esquerdo e escolha 'Abrir link na nova guia'
  2. Force uma recarga do recurso com os métodos acima. (Veja o exemplo de @Bishoy Hanna)

Isso é muito útil se você tiver recursos que estão em quadros e CTRL+F5não forçar a atualização deles.

Steve Tauber
fonte
1
verdade. pressionando CTRL + F5 = Limpar cache atualiza página atual
STEEL
Eu não tenho uma guia Recursos.
Mike W
@MikeW ele foi renomeado para Fontes - Eu atualizei a resposta
Steve Tauber
12

Shift+ F5limpa rapidamente o cache.

Peter Kelly
fonte
18
ctrl-f5 não corta a mostarda, eu tenho medo. O arquivo javascript antigo permanece no depurador.
precisa saber é o seguinte
9

Para o Google Chrome, não é Ctrl+ F5. É Shift+ F5para limpar o cache atual! Funciona para mim !

RPDeshaies
fonte
Por quê ? Não entendo qual é a diferença entre isso e um comentário. No final, a pergunta mais útil será vista na parte superior do post.
RPDeshaies
2
O questionador não mencionou em nenhum momento Ctrl-F5 ; portanto, por definição, sua resposta não é uma resposta à pergunta do questionador, é um comentário , uma correção às respostas de outras pessoas e deve ser tratada como tal.
Edward A
9

Aqui está um atalho para o DevTools:

  1. F12 abrir o Chrome DevTools
  2. F1 abrir as Configurações do DevTools
  3. Marque Desativar cache (enquanto o DevTools estiver aberto), como mostrado abaixo:

insira a descrição da imagem aqui

Nota: Atualizado de acordo com o comentário de Dimi. Eles tendem a movê-lo, então, deixe-me saber ou atualizar a postagem, se você perceber que ela foi alterada.

Tony L.
fonte
3

No Windows, o Ctrl+ Shift+ rforçaria a recarregar o script no chrome.

Vijay Nandwana
fonte
2

Se você estiver fazendo alterações locais em um javascript nas Ferramentas do desenvolvedor, desative essas alterações antes de recarregar a página.

Na guia Fontes, com o script aberto, clique com o botão direito do mouse no script e clique na opção "Modificações locais" no menu de contexto. Isso exibe a lista de scripts nos quais você salvou as modificações. Se você vir nessa janela, as Ferramentas do Desenvolvedor sempre manterão sua cópia local em vez de atualizá-la do servidor. Clique no botão "reverter", atualize novamente e você deverá obter a nova cópia.

Steve K
fonte
1

Parece que o depurador do Chrome carrega os arquivos de origem na memória e não os deixa ir, apesar das atualizações do cache do navegador, ou seja, ele possui seu próprio cache além do cache do navegador que não está sincronizado. Pelo menos, esse é o caso ao trabalhar com arquivos mapeados de origem (estou depurando fontes de texto datilografado). Após atualizar com êxito o cache do navegador e validá-lo, navegando diretamente para o arquivo de origem, você baixa o arquivo atualizado, mas assim que reabrir o arquivo no depurador, ele continuará retornando o arquivo antigo, independentemente da versão do cache comum do navegador. Muito irritante mesmo.

Eu consideraria isso um bug no chrome. Eu uso a versão Versão 46.0.2490.71 m.

A única coisa que ajuda é reiniciar o Chrome (feche todos os navegadores Chrome).

David Fahlander
fonte
0

Se os arquivos que você está carregando estiverem armazenados em cache e se as alterações feitas não refletirem no código, existem duas maneiras de lidar com isso.

  1. Limpe o cache como todos disseram

  2. Se você deseja cache e apenas os arquivos precisam ser recarregados, você pode ir para a guia rede da ferramenta dev e limpar o que foi carregado. da próxima vez, não o carregará do cache. você terá as últimas alterações.

iamshravan
fonte
0

Se você estiver executando um servidor local no Apache, poderá ter a aparência de problemas de cache. Isso aconteceu comigo quando eu tinha um servidor Apache executando no Vagrant (na caixa virtual).

Basta adicionar as seguintes linhas ao seu arquivo de configuração ( /etc/httpd/conf/httpd.confou equivalente):

#Disable image serving for network mounted drive
EnableSendfile off

Observe que vale a pena pesquisar no arquivo de configuração para ver se EnableSendfileestá definido em onqualquer outro lugar.

MattCochrane
fonte
0

Existem também 2 soluções (rápidas):

  1. Use a depuração de modo anônimo, feche a janela e abra-a novamente.
  2. Excluir seu histórico de navegação
Vladimir verleg
fonte
0

Desativar pontos de interrupção fez com que o novo script fosse carregado para mim.

Mike W
fonte
0

Na minha opinião, é mais fácil trabalhar em uma 'sessão de navegação privada' do chrome, para garantir que seus arquivos javascript não venham do cache.

scottbiker
fonte