Desativando o cache do Chrome para desenvolvimento de sites


1607

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?


185
Este é provavelmente o pior bug do Chrome. Eu perdi muito tempo me perguntando por que as coisas estavam dando errado, apenas para descobrir que - apesar de ter forçado uma recarga completa com ^ F5 -, ele está usando um recurso obsoleto de uma hora.
21912 Glenn Maynard

45
Os navegadores devem armazenar em cache. Lembre-se de que seus usuários também estarão armazenando em cache - e, portanto, podem não ver as alterações que você faz após o site estar em produção. A maneira de evitar isso é a versão dos seus arquivos. my_css.css? version = something_unique. Se o navegador não viu a versão antes, ele baixa o arquivo novamente. something_unique pode, por exemplo, ser a última data de modificação.
user984003

34
@ user984003 Ctrl+Shift+Rou Shift+Rdeve liberar o cache ...
Adonis K. Kakoulidis

19
@ user984003 Não, se eu lhes disser para não armazenar em cache. Sim, um número de versão que impede o cache é ótimo para a versão final, pois é isso que os usuários estão usando, mas quando estou construindo um novo site e quero ver alterações incrementais à medida que avanço, não altero o número da versão todas as vezes . Por isso, desenvolvo com o Firefox - ele tem as opções mais confiáveis ​​para desativar o cache!
217136

11
@ user984003 sim, os navegadores devem armazenar em cache ... ao navegar. Ao desenvolver, você precisa de mais controle sobre isso.
Ahnbizcad

Respostas:


1976

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.

captura de tela do painel de ferramentas de desenvolvimento

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

pressão longa


255
Pela minha experiência, essa configuração (e todas as configurações desse painel) só entra em vigor quando as ferramentas de desenvolvimento estão abertas.
7118 Johann

28
@ Steve Isso não funciona para mim. Não estou recebendo nenhuma alteração, apesar de ter o Chrome 19.0.1084.52, e marquei a caixa para desativar o cache. Eu tentei com o painel de desenvolvimento aberto. Eu tentei com ele fechado. Até tentei reiniciar o navegador e reiniciar o computador. Ainda parece continuar a me fornecer uma versão em cache da página. O que devo fazer? O Chrome me deu problemas como esse antes, então excluí tudo do Google do meu computador e instalei o Chrome de volta. Ele corrigiu a maioria das coisas, como a "guia histórico do carregamento contínuo". Eu acho que ainda não funciona.
21812 Tgwizman

11
Descobri que isso não funcionava ao atualizar a página atual após alterar a configuração. Somente quando eu me afastei e voltei novamente, ele começou a funcionar.
Matt Gibson

3
... ou você pode simplesmente depurar no modo de navegação anônima! (que não armazena em cache todos os arquivos)
Kwame

5
essa configuração é a maior mentira na história do desenvolvimento web. reiniciado o meu computador e cromo ainda está mostrando resultados errados enquanto o Firefox está exibindo até à data css :(
Claudiu Creanga

247

insira a descrição da imagem aqui

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.


4
Sim, a opção Ferramentas de desenvolvimento do Chrome não parece funcionar para mim. Mas o assassino de cache funciona como um encanto. O tempo de recarga é significativamente mais lento, como 4-5x, mas a veiculação real do novo conteúdo é obviamente muito mais rápida.
Bryce Johnson

2
Limpar cache e Desativar cache só funcionam quando se trabalha no host local, no meu mac. Para conteúdo on-line, estou atualizando e atualizando, esperando ver alguma alteração. Esta extensão é um salva-vidas.
Sbpro 24/02

2
Descobri que o uso do Disable Cache causa problemas no armazenamento local, especificamente no armazenamento angular com Auth0. O assassino de cache funciona perfeitamente e não causa problemas no armazenamento local.
trevorc

5
Removido da Chrome Extensions Store por causa de malware :( Alternativas?
Semyon Vyskubov 27/10

3
Acabei escrevendo o meu próprio, funciona da mesma forma, mas pode alternar por guia. Licença MIT e nenhum malware, eu prometo! github.com/themichaelyang/cache-clearer
Michael Yang

199

Imagem do menu de recarga

  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.


7
assim ele definitivamente não funciona em Mac, porém, eu clicado o botão de recarga com vários chave combinações-;)
MJB

1
O que é o Hard Reload?
ManirajSS

@ManirajSS: Ele recarregará tudo e evitará o uso do cache, mas não fará o download novamente dos itens baixados por javascript após o carregamento da página. Não sei por que alguém iria usá-lo, mas acho que você poderia criar alguns casos de canto onde isso seria útil.
JackArbiter

2
Nem limpará o cache dos iframes dentro da página.
Pablo Mescher

7
Não sei por quanto tempo isso é verdade, mas no Chrome 41, clique e segure o botão recarregar funciona no OS X, desde que você tenha a janela das ferramentas do desenvolvedor aberta.
Tim Keating

47

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 é


1
use tags de código para tornar sua resposta mais legível. Eu acho que essa pode ser uma das melhores respostas.
precisa saber é o seguinte

3
Boa resposta. Embora para a maioria das pessoas, desabilitar o cache seja algo temporário durante o desenvolvimento. Desabilitá-lo permanentemente reduzirá significativamente a experiência normal de navegação e é uma cidadania ruim da Internet, pois carrega desnecessariamente os servidores da Web que você visita.
Danielson317

3
Não concordo com a má cidadania da Internet, estamos falando aqui sobre a criação de algum atalho para o trabalho de desenvolvedor. Portanto, esta é definitivamente a melhor resposta IMHO. Apenas uma coisa pequena. Sempre que copio isso no Windows desta página do SO para algum atalho do Chrome, alguns caracteres não saem corretamente. Estes são os corretos: "C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --disable-application-cache --media-cache-size=1 --disk-cache-size=1Além disso, qual é o char certo antes "%1"? Isso eu não sei.
Peter.petrov 13/09/18

32

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


22

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.


22
  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.

insira a descrição da imagem aqui


2
Isso faz o mesmo que marcar "Desativar cache" diretamente no F12 Devtools do Chrome e será redefinido quando você reiniciar o Chrome.
Bogdan Verbenets

18

Em vez de pressionar "F5" Basta pressionar:

"Ctrl + F5"


6
Ele também funciona no Firefox (não porque ele é relevante para esta pergunta, mas alguém pode achar que é útil)
Donald Duck

17

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".

Desativar cache no Canal Canário do Chrome

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.


4
Na minha experiência, isso só funciona enquanto as ferramentas de desenvolvimento são abertas. Fiquei intrigado por que o cache ainda estava segurando as páginas até perceber que havia fechado as ferramentas de desenvolvimento. É estranho que a configuração não substitua tudo.
mbokil

Infelizmente, o modo de navegação anônima armazena algumas imagens e arquivos.
GobSmack

16

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".


2
+1. Ainda não é perfeito: para o desenvolvimento em um computador local, o cache é completamente desnecessário e apresentará problemas; portanto, eu ainda estaria interessado em um recurso de desativação como o firebug.
c089 18/05/11

15

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.


14

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


talvez seja um bug ou talvez ele só é destinado a desenvolvedores - que disse que eu teria pensado não-desenvolvedores gostaria de usar a opção de cache desativar também ¯ \ _ (ツ) _ / ¯
jamiethepiper

14

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:

insira a descrição da imagem aqui

Verifique Automatically reload active tab after clearing data:

insira a descrição da imagem aqui

Selecione Everythingpara Período:

insira a descrição da imagem aqui

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

insira a descrição da imagem aqui

Clique nos atalhos do teclado na parte inferior:

insira a descrição da imagem aqui

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

insira a descrição da imagem aqui


9

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.


8

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.


6

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;})();

5

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.


5

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!


3

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.


Não é possível encontrar a opção para definir em qual domínio ele faz. Não parece muito bom. Que tal chrome.google.com/webstore/detail/cache-killer/… ..?
Nkollaw

vá para o ícone clearcache no navegador, clique com o botão direito do mouse, opções e depois em cookies. Há um pequeno ícone de configurações.
chris

2

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 .

Captura de tela - Inspetor de tamanho de página


2

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")?time=@DateTime.Now" 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.


absolutamente. Eu usei isso e a compilação condicional, para que não apareça nas versões de teste e lançamento.
Cee McSharpface

Ainda melhor maneira é usar o tempo de modificação de arquivos css como um valor variável. Essa solução também pode ser usada no ambiente de produção. Ele simplesmente funciona :) Não tenho certeza de como é feito no ASP, mas no PHP algo como isto <link href = "style.css? Time = <? Php echo fileminfo ('style.css');?>" Rel = "stylesheet" >
Oliver Manner

2

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!


2

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.

insira a descrição da imagem aqui


1

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".


0

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.


0

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 .


0

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()
    }) 
  })

0

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.


0

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.


0

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.

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.