Forçar o Google Chrome a procurar novos arquivos JavaScript sempre que acessar um site


25

Então, se eu for para as opções da Internet no Internet Explorer: insira a descrição da imagem aqui

Posso ajustar as configurações para quando o IE verificar atualizações: insira a descrição da imagem aqui

Posso fazer algo semelhante no Google Chrome? No momento em que altero meu arquivo JavaScript e depuro no Visual Studio, o Chrome sempre usa a versão em cache em vez da versão modificada. Para poder usar a versão atual, preciso limpar manualmente meus arquivos / cache temporários da Internet, o que é realmente irritante.


14
Por que você não desabilita o cache feito pelo Visual Studio? (Sério, que o diabo projeta um IDE com cache?)
jpmc26

2
@ jpmc26 Que cache?
EJoshuaS - Reintegrar Monica

21
Eu escrevi meu último comentário vagamente; minhas desculpas se isso deixasse claro. Os navegadores armazenam em cache os arquivos apenas se o servidor retornar cabeçalhos específicos. É estúpido o servidor de desenvolvimento do Visual Studio enviar de volta os cabeçalhos de cache por padrão, já que mudanças nesses arquivos devem ser esperadas . Um carregamento extra de meio segundo na página vale a pena não lidar com problemas de arquivos JS e CSS desatualizados que estão sendo armazenados em cache no navegador. Espero sinceramente que haja alguma maneira de desativá-lo.
jpmc26

1
Não foi possível encontrar nenhuma opção do Visual Studio, mas uma alteração no desenvolvimento web.config pode resolver o cache no visual studio. iis.net/configreference/system.webserver/staticcontent/…
GER

1
Chrome extensão "Cache Killer" resolvido para mim, eu não sei porquê, mas ctrl + f5 às vezes não funciona para mim
flagg19

Respostas:


55

Opção 1: desativar temporariamente o cache

  1. Abra Ferramentas do desenvolvedor (pressione F12ou Menu, Mais ferramentas, Ferramentas do desenvolvedor)
  2. Abra as Configurações das Ferramentas do desenvolvedor (menu Pressione F1ou DevTools, Configurações)
  3. Marque "Desativar cache (enquanto o DevTools estiver aberto)" sob o cabeçalho Rede do painel Preferências

Opção 2: desativar o cache para a sessão

Inicie o Chrome com as opções de linha de comando --disk-cache-size=1 --media-cache-size=1que limitarão os caches a 1 byte, desativando efetivamente o cache.

Opção 3: Atualização forçada manual

Recarregue a página atual, ignorando o conteúdo em cache: Shift+ F5ou Ctrl+ Shift+r

Atalhos de teclado do Chrome - Ajuda do Chrome (em "Atalhos de página da web")

Opção 4: Opções de recarga extra ( origem )

Com as Ferramentas do desenvolvedor abertas, clique com o botão direito do mouse no botão Recarregar para exibir um menu de recarga com o seguinte:

  • Recarga normal (Ctrl + R)
  • Recarregamento total (Ctrl + Shift + R)
  • Cache vazio e recarregamento total

1
@ Bruno Odd, eu também sempre usei ctrl + f5. Apenas testado e ambos parecem funcionar.
Jeroen #

Sugiro usar a opção 2, com um toque. Faça um atalho separado para o Chrome com as opções e dê um nome diferente. Coloque-o em diferentes extremidades da barra de tarefas do Windows.
Christopher Hostage

8

Pode não estar 100% relacionado à atualização do cromo, mas ao desenvolvimento posterior. Como o @Dom disse, você pode adicionar a? V = # após o seu recurso. Uma maneira de automatizar o processo é misturar o conteúdo do arquivo mencionado e usá-lo como versão.

Eu tenho um código de trecho sobre como fazer isso em C # (Razor para implementação), se isso puder ajudar.

Ajudante:

public static string HashUrl(string relativeUrl)
    {
        var server = HttpContext.Current.Server;
        if (File.Exists(server.MapPath(relativeUrl)))
        {
            byte[] hashData;
            using (var md5 = MD5.Create())
            using (var stream = File.OpenRead(server.MapPath(relativeUrl)))
                hashData = md5.ComputeHash(stream);

            return relativeUrl.Replace("~", "") + "?v=" + BitConverter.ToString(hashData).Replace("-", "");
        }
        return relativeUrl + "?v=notFound";
    }

Implementação:

<link rel="stylesheet" href=@Util.HashUrl("~/Controllers/Home/Views/Index.css") />

Espero que isto ajude

EDIT --- Alguns pediram algum tempo de execução da compilação e 1000 pequenos recursos, leva aproximadamente 11 ms.

https://en.code-bude.net/2013/08/07/md5-hashes-in-c-benchmark-and-speed-%E2%80%8B%E2%80%8Boptimization/

insira a descrição da imagem aqui https://en.code-bude.net/wp-content/uploads/2013/08/md5_performance_benchmark_2.png


2
Recursos de versão como este (ou incorporando a versão / hash no próprio nome do recurso) podem ser muito úteis, especialmente ao implantar atualizações no mundo real, onde - ao contrário do que dizem as regras no cabeçalho de controle de cache - de todas as maneiras do cache pode estar acontecendo, e muitos usuários não saberão como (ou a necessidade de) atualizar o cache. Se você (criar seu aplicativo) solicitar um recurso recém-nomeado, ele não poderá ser armazenado em cache.
TripeHound 6/04/2017

1
Não é uma grande perda de desempenho? Colocar hash em todos os arquivos css e js toda vez que um link é inserido em uma página ... Você executou benchmarks para isso?
Raidri diz Reinstate Monica

2
@Raidri Hashing on the fly provavelmente não é uma boa ideia (eu não tinha notado que estava fazendo isso quando comentei pela primeira vez). A atualização de referências para usar um hash ou versão durante o processo de construção é.
TripeHound 6/04

@ Raidri Eu tenho um aplicativo bastante pequeno, com 20 recursos que eu usei e não vi diferença no tempo de compilação, então não tentei compará-lo. Também não tenho certeza se entendi sua segunda frase, mas os recursos são armazenados em cache e o navegador apenas os recupera novamente se o hash for alterado => se você alterar o próprio recurso.
Fred beauchamp

O hash não é calculado no momento da criação, mas em cada geração de página. Esse é um problema do servidor e não tem nada a ver com o cache no navegador.
Raidri diz Reinstate Monica

5

Em outros casos em que isso pode não ser possível, por exemplo, desejando forçar uma atualização no computador do usuário final ao qual você não tem acesso, você pode anexar um número de versão ao nome do script como um parâmetro de consulta, fazendo o navegador identificar como um arquivo diferente . ie example.js?v=1. Lembre-se de que você precisará alterar o número em cada recarga para forçá-lo.

Você também pode fazer isso com o desenvolvimento local, mas o método dev tools é muito mais eficiente.


3

além da resposta @Steven, quando você abre o Developer Tools Console , pode clicar com o botão direito do mouse no botão Atualizar e usar o menu suspenso.

Neste menu, você tem uma opção para "Cache vazio e recarga forçada" .

É o que você está procurando.


1
Suponho que você esteja usando uma versão não inglesa do Chrome. Eu uso a versão em inglês, e é chamada "Cache vazio e recarga pesada".
Nzall #

1

Se você estiver desenvolvendo o site, deve saber que o Chrome exige a must-revalidateconfiguração Cache-Controlpara buscar novamente os arquivos corretamente quando eles são alterados no servidor.

As outras respostas mostram como pressionar SHIFT-F5 para forçar sua própria versão do Chrome a buscar novamente todos os arquivos. Mas é razoável dizer a todos os usuários do site que façam isso toda vez que o site for alterado? Se você definir Cache-Controla inclusão must-revalidate, o Chrome verificará se algum arquivo foi alterado e faça o download corretamente quando necessário.

Veja os detalhes nesta postagem do blog: https://agiletribe.wordpress.com/2018/01/29/caching-for-chrome/

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.