Desativando o cache do Chrome para desenvolvimento de sites

Estou modificando a aparência de um site (modificações de CSS), mas não consigo ver o resultado no Chrome por causa do cache persistente e irritante. Eu tentei Shift+ atualizar, mas não funciona.

Como posso desativar temporariamente o cache ou atualizar a página de alguma forma para que eu possa ver as alterações?

O Chrome DevTools pode desativar o cache.

1. Clique com o botão direito e escolha Inspect Elementabrir o DevTools. Ou use um dos seguintes atalhos de teclado :
   • F12
   • Command+ Option+ ino Mac
   • Control+ Shift+ ino Windows ou Linux
2. Clique Network na barra de ferramentas para abrir o painel de rede.
3. Marque a Disable cachecaixa de seleção na parte superior.

Lembre-se, como afirmou um tweet de @ChromiumDev , essa configuração está ativa apenas enquanto os devtools estão abertos .

Observe que isso resultará em todos os recursos sendo recarregados. Caso deseje desativar o cache apenas para alguns recursos, você pode modificar o cabeçalho HTTP que seu servidor envia juntamente com seus arquivos.

Se você não quiser usar a Disable cachecaixa de seleção, pressione e segure o botão de atualização com o DevTools aberto para exibir um menu com as opções Hard Reloadou as Empty Cache and Hard Reloadquais devem ter um efeito semelhante. Leia sobre a diferença entre as opções . Os seguintes atalhos estão disponíveis:

• Command+ Option+ Rno Mac
• Control+ Shift+ Rno Windows ou Linux

Limpar o cache é muito irritante quando você precisa limpá-lo 30 vezes por hora. Por isso, instalei uma Extensão do Chrome chamada Classic Cache Killer que limpa o cache em cada carregamento de página.

Link da loja do Chrome (grátis) (agora sem malware!)

Agora, meus json, javascript, css, html e dados simulados são atualizados toda vez em cada carregamento de página .

Eu não precisa se preocupar se eu preciso para limpar meu cache.

Encontrei cerca de 20 limpadores de cache para o Chrome, mas este parecia leve e sem esforço. Em uma atualização, o Cache Killer agora pode ficar "sempre ativo".

Nota: Não conheço o autor do plug-in de nenhuma maneira. Eu apenas achei útil.

1. Abra o console do desenvolvedor do Chrome pressionando F12e, em seguida (com o console aberto):

2. Clique com o botão direito do mouse (ou mantenha pressionado o botão esquerdo) no botão recarregar na parte superior do navegador e selecione "Esvaziar o cache e recarregar com força".

Isso vai além do "Hard Reload" para esvaziar completamente o cache, garantindo que qualquer coisa baixada via javascript ou etc. também evite o uso do cache. Você não precisa mexer nas configurações nem nada, é uma solução rápida de uma tomada.

Existem mais duas opções para desativar o cache de páginas no Chrome :

1. Desative o cache do Chrome no registro

Abra o Registro (Iniciar -> Comando -> Regedit)

Procurar por: HKEY_CLASSES_ROOT\ChromeHTML\shell\open\command

Altere a parte após ... chrom.exe "para este valor: –disable-application-cache –media-cache-size=1 –disk-cache-size=1 — "%1"

Exemplo: "C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" -disable-application-cache –media-cache-size=1 –disk-cache-size=1 — "%1"

IMPORTANTE:

• existe um espaço e um hífen após ... chrome.exe "

• deixe o caminho para chrome.exe, pois é

• Se você copiar a linha, verifique se as aspas são reais.

2. Desative o cache do Chrome alterando as propriedades do atalho

Clique com o botão direito do mouse no ícone do Chrome e selecione "Propriedades" no menu de contexto. Adicione o seguinte valor ao caminho: –disk-cache-size=1

Exemplo: "C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" –disk-cache-size=1

IMPORTANTE:

• existe um espaço e um hífen após ... chrome.exe "

• deixe o caminho para chrome.exe, pois é

Se você não deseja editar as configurações do Chrome, use o modo de navegação anônima para obter os mesmos resultados.

Além da opção desativar cache (que você acessa por meio de um botão no canto inferior direito da janela das ferramentas do desenvolvedor - Tools | Developer Tools, ou Ctrl+ Shift+ I), no painel de rede das ferramentas do desenvolvedor, agora você pode clicar com o botão direito do mouse e escolha "Limpar cache" no menu pop-up.

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

Atualmente, isso está na guia Preferências, que é o padrão. Pode ser necessário rolar para baixo. Essa caixa de seleção foi movida pelo menos algumas vezes desde que essa pergunta foi feita. A última vez que verifiquei, estava na coluna do meio, na parte inferior. Se você a abrir em uma tela mais fina e houver 2 colunas em Preferências, pode estar perto do canto superior direito. Sinta-se livre para atualizar esta postagem, se ela mudar ou comentar, e eu atualizarei a postagem.

Em vez de pressionar "F5" Basta pressionar:

"Ctrl + F5"

No Canary Channel (e talvez o canal dev e stable se siga), isso deve ser encontrado como a segunda opção geral no lado esquerdo, na seção "Geral".

Além disso, sempre há a opção de alternar para o Modo de navegação anônima via Ctrl + Shift + N. Mesmo que isso infelizmente também encerre sua sessão.

Usar o Ctrl+ Shift+ Rpara atualizar foi bom, mas não conseguiu tudo o que eu precisava. ainda algumas coisas não seriam atualizadas, como dados armazenados em js e css. encontrou uma solução: uma barra de ferramentas do google para desenvolvedores da web chrome . Depois de instalar a barra de ferramentas, selecione as opções e "redefinir página".

Para ficar claro, a caixa de seleção desativar cache no Chrome (v17 aqui, mas desde a v15 eu acredito) não está na interface principal das configurações. Está na interface do usuário das configurações das ferramentas do desenvolvedor.

1. No menu do ícone de chave inglesa da janela do navegador (menu prefs), escolha Ferramentas → Ferramentas do desenvolvedor

2. Na interface do usuário das ferramentas do desenvolvedor que aparece, clique no ícone de roda dentada na parte inferior direita.

3. Marque a caixa de seleção 'Desativar cache' na seção Rede.

Desativar cache no chrome só funciona quando você tem ferramentas de desenvolvimento abertas

Até que o erro seja corrigido, você pode usar o plugin Clear Cache Chrome e também pode definir um atalho de teclado para ele.

Após a instalação, clique com o botão direito do mouse e vá para as opções:

Verifique Automatically reload active tab after clearing data:

Selecione Everythingpara Período:

E então você pode ir para Menu => Ferramentas => Extensões:

Clique nos atalhos do teclado na parte inferior:

E defina o atalho do teclado, por exemplo Ctrl+ Shift+ R:

Na verdade, se você não se importa em usar a largura de banda, é mais seguro, por várias razões, desativar o cache e recomendado por muitos sites de segurança.

O Chromium não deve ser arrogante o suficiente para tomar decisões e aplicar configurações aos usuários.

Você pode desativar o cache no UNIX com --disk-cache-dir = / dev / null.

Como isso ocorre, podem ocorrer falhas inesperadas, mas se ocorrerem, isso indicará claramente um erro mais grave que deve ser corrigido em qualquer caso.

Isso pode ajudar alguém.

Eu montei meu Nginx para cache louco. Portanto, desabilitar o cache nas ferramentas de rede e limpar explicitamente o cache não funcionam.

Uma solução muito simples, porém chata, é abrir uma nova guia de navegação anônima. Surpreendentemente, funciona, o tempo todo!

Uma atualização intensa no modo de navegação anônima funciona quando quiser recarregar no mesmo modo.

Que tal um bookmarklet que altera o nome da página para impedir que ela seja armazenada em cache. No Chrome, você criaria um novo marcador e colaria o código no URL. Clique no marcador e a página será recarregada com carimbo de data e hora para impedir o cache.

javascript:(function(){var idx = location.href.indexOf('?');var d = new Date();var str = location.href.substr(0,idx) + '?version=' + d.getTime();location.href=str; void 0;})();

Eu fui pego de surpresa, mas não necessariamente devido ao Chrome.

Estou usando o jQuery para fazer solicitações AJAX. Eu tinha o atributo de cache definido como true na solicitação:

   $.ajax({
        type: 'GET',
        cache: true,
        ....

Configurando isso como false corrigiu meu problema, mas isso não é o ideal.

Não tenho idéia de onde esses dados são salvos, mas sei que o chrome nunca atinge o servidor para uma solicitação.

Existe uma maneira melhor e mais rápida agora (versão 59.xx do Chrome):

Clique com o botão direito do mouse no ícone de recarga (à esquerda do campo de URL) e, para obter um menu suspenso, selecione a terceira opção: 'cache vazio e recarga forçada'.

Esta opção está disponível apenas quando as ferramentas do desenvolvedor estão abertas. (Observe a diferença para a opção 2: 'Hard reload' -cmd-shift-R). Nenhum cache esvaziando aqui!

Há uma extensão do Chrome disponível na loja virtual do Chrome chamada Clear Cache .

Eu uso todos os dias e acho que é uma ferramenta muito útil. Você pode usá-lo como um botão de recarga e pode limpar o cache e, se desejar, também cookies, armazenamento de localidade, dados de formulário etc. Também é possível definir em qual domínio isso acontece. Portanto, você pode limpar toda essa merda com apenas o botão de recarga que você precisa pressionar - nos domínios escolhidos.

Muito muito bom!

Você também pode definir um atalho de teclado para isso nas opções!

Outra maneira é iniciar a janela do Chrome no modo de navegação anônima. Aqui o cache também deve ser completamente desativado.

Mais uma opção para desativar o cache é fornecida pelo meu terceiro inspetor de tamanho de página da extensão do Chrome que desativa o cache exatamente da mesma maneira que o Devtools.

Além disso, a extensão relata rapidamente o tamanho da página, o uso do cache, as solicitações de rede e o tempo de carregamento de uma página da Web de maneira conveniente. Além disso, seu código aberto no Github .

Não tenho certeza do que você está usando, mas se você estiver usando o ASP.Net, poderá fazer o seguinte, que funciona como um encanto:

<link href="@Url.Content("~/Content/Site.css")[email protected]" rel="stylesheet" />

Basicamente, ele anexará automaticamente Data e Hora ao final do arquivo toda vez que for executado, ou seja, como o nome do arquivo é tecnicamente diferente, você nunca precisará se preocupar com o cache novamente.

Eu tive o mesmo problema, tentei:

• Control Shift R,
• Desativar cache no F12
• Controle F5.

Descobri que o uso de um manifesto .appcache para um site não https foi descontinuado . Eu removi meu arquivo site.appcache e sua referência na tag html e agora estou vendo a versão mais recente de cada página!

Se você estiver usando ServiceWorkers (por exemplo: para aplicativos da Web progressivos), provavelmente precisará verificar "Atualizar ao recarregar" em Aplicativo> Trabalhadores de serviço nas ferramentas de desenvolvimento também.

Desde a versão 50 (se bem me lembro), a opção "Desativar cache" foi removida das Configurações do Devtool. Vá para a guia "Rede" e há a opção "Desativar cache".

Ei, se o seu site estiver usando PHP, coloque o seguinte pequeno trecho de PHP no início da sua página html:

   //dev versioning - stop caching
   $rand = rand(1, 99999999);

Agora, em todos os lugares em que você carrega recursos como arquivos CSS ou JS em um script ou elemento de link, você anexa o valor aleatório gerado ao URL da solicitação após anexar '?' para o URI via PHP:

    echo $rand;

É isso aí! Não haverá mais navegador que armazene em cache seu site - independentemente de qual tipo.

Obviamente, remova seu código antes de publicar ou simplesmente defina $ rand como uma string vazia para permitir o armazenamento em cache novamente.

Eu usei as outras opções descritas acima, mas acho que o melhor é adicionar o seguinte parâmetro à inicialização do chrome.exe.

"C: \ Arquivos de programas (x86) \ Google \ Chrome \ Application \ chrome.exe" --disk-cache-size = 1 -media-cache = 1

Acho que desativar o cache de mídia é uma boa idéia, mas está aqui por uma questão de integridade.

Na verdade, eu quero uma opção para desativar completamente o cache, usar a memória para E / S em vez do meu disco (o que tornaria o tempo de carregamento 10x mais rápido também!), Mas eu não acho que o Chrome ou qualquer navegador, nesse sentido, ainda tenha essa opção .

Como posso desativar temporariamente o cache ou atualizar a página de alguma forma para que eu possa ver as alterações?

Não está claro a qual "cache" você está se referindo. Existem vários métodos diferentes nos quais um navegador pode armazenar em cache o conteúdo persistentemente. Web Storage sendo um deles, Cache-Controloutro.

Alguns navegadores também têm um Cache, usado em conjunto com Service Workers , para criar PWAs (Progressive Web Apps), fornecendo suporte offline.

Para limpar o cache de um PWA

self.caches.keys().then(keys => { keys.forEach(key => console.log(key)) })

para listar os nomes das chaves de cache e execute:

self.caches.delete('my-site-cache')

para excluir uma chave de cache por nome (ou seja, my-site-cache). Atualize a página.

Se você encontrar algum erro relacionado ao trabalhador no console após a atualização, também poderá ser necessário cancelar o registro dos trabalhadores registrados:

navigator.serviceWorker.getRegistrations()
  .then(registrations => {
    registrations.forEach(registration => {
      registration.unregister()
    }) 
  })

O cache killer do Chrome é de longe a melhor opção. Como o URL da loja para instalar o cache killer está inativo, você pode fazer o download do arquivo CRX aqui:

https://www.crx4chrome.com/extensions/jpfbieopdmepaolggioebjmedmclkbap/

depois que o arquivo de extensão for baixado, abra Chrome -> mais ferramentas -> extensões e arraste o arquivo CRX do File Explorer ou da área de trabalho (dependendo do local em que você baixou o arquivo) para a janela do Chrome para instalar a extensão.

Eu uso (no Windows), ctrl + shift + delete e quando a caixa de diálogo do Chrome aparecer, pressione a tecla Enter. Isso pode ser configurado com o que precisa ser limpo toda vez que você executar esta sequência. Não há necessidade de ter dev. ferramentas abertas neste caso.

Eu estava em uma situação em que o navegador carregava os dados do cache do disco, mesmo que eu verifiquei se o cache estava desativado (eu estava usando o Chrome). Todo o meu CSS e JS estavam carregando do servidor, mas não da página da web. Isso estava acontecendo tanto na minha produção local quanto na minha.

Para corrigi-lo, preciso colocar um parâmetro extra na minha URL para forçar o navegador a obter a página da Web do servidor, mesmo que o controlador não precise.

Eu estava usando o asp.net, então aqui está o meu exemplo:

//Controller function
public ActionResult Index()
    {
        return View();
    }
//Link
@Html.Action("Index", "Home", new { ts = DateTime.Now.Ticks.ToString()})

O resultado é que ele gerará um link como: http://www.myweb.com/Home/Index?ts=636558555408282209

Esta é a minha situação e solução. Espero que ajude alguém.