it-swarm-pt.tech

Desativando o cache do Chrome para desenvolvimento de website

Estou modificando a aparência de um site (modificações CSS), mas não consigo ver o resultado no Chrome devido a um cache persistente irritante. eu tentei Shift+ atualize mas não funciona.

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

1532
tomermes

O Chrome DevTools pode desativar o cache.

  1. Clique com o botão direito do mouse e escolha Inspect Element para abrir o DevTools. Ou use o seguinte atalhos de teclado :
    • F12
    • Command+Option+i no Mac
    • Control+Shift+i no Windows ou Linux
  2. Clique em Network na barra de ferramentas para abrir o painel de rede.
  3. Marque a caixa de seleção Disable cache no topo.

screenshot of development tools panel

Tenha em mente, como Tweet from @ ChromiumDev declarado, esta configuração é ativa somente enquanto os devtools estiverem abertos .

Note que isso resultará em todos os recursos sendo recarregados. Se você deseja desabilitar o cache apenas para alguns recursos, você pode modificar o cabeçalho HTTP que seu servidor envia ao lado de seus arquivos.

Se você não quiser usar a caixa de seleção Disable cache, um toque longo no botão de atualização com o DevTools aberto mostrará um menu com as opções Hard Reload ou Empty Cache and Hard Reload, que deve ter um efeito semelhante. Leia sobre o diferença entre as opções . Os seguintes atalhos estão disponíveis:

  • Command+Option+R no Mac
  • Control+Shift+R no Windows ou Linux

long press

1919
Steve

enter image description here

Limpando o cache é muito chato quando você precisa limpar o cache 30 vezes por hora .. então eu instalei uma extensão do Chrome chamada Classic Cache Killer que limpa o cache em cada carregamento de página.

Chrome Store Link (grátis)(Agora sem malware!)

Agora meu json mock, javascript, css, html e atualização de dados toda vez on every page load

Eu nunca tenho que me preocupar se precisar limpar meu cache.

Existem cerca de 20 limpadores de cache para o Chrome que encontrei, mas este parecia um esforço leve e zero. Em uma atualização, o Cache Killer agora pode ficar "sempre ligado".

Nota: eu não conheço o autor do plugin de alguma forma. Eu achei útil.

236
Evildonald

Picture of reload menu

  1. Abra o console do desenvolvedor do Google Chrome pressionando F12 e depois (com o console aberto):

  2. Clique com o botão direito do mouse (ou segure o botão esquerdo) no botão de recarga na parte superior do navegador e selecione "Cache Vazio e Recarga Difícil".

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

195
JackArbiter

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

1. Desativar o cache do Chrome no Registro

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

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

Altere a peça depois de ... 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 depois de ... chrome.exe " 

  • deixe o caminho para chrome.exe como é 

  • Se você copiar a linha, certifique-se de verificar se as aspas são cotas reais. 

2. Desativar o cache do Chrome, alterando as propriedades de atalho

Clique com o botão direito 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 depois de ... chrome.exe " 

  • deixe o caminho para chrome.exe como é

39
user2653348

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

24
Karl Morrison
  1. F12 para abrir o Chrome DevTools
  2. F1 abrir as configurações do DevTools
  3. Verifique Desativar cache (enquanto DevTools está aberto) como mostrado abaixo:

Isso está atualmente na guia Preferences, que é o padrão. Você pode precisar rolar para baixo. Esta 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ê tiver aberto em uma tela mais fina e houver duas colunas em Preferências, pode estar perto do canto superior direito. Sinta-se à vontade para atualizar esta postagem se ela mudar ou comentar e eu atualizarei a postagem.

enter image description here

21
Tony L.

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

21
Tim Keating

Em vez de apertar "F5" Basta acertar:

"Ctrl + F5"

17
Arvand

No Canary Channel (e talvez o canal dev e stable acompanhe) esta é a segunda opção geral no lado esquerdo sob a seção "General".

Disable Cache in Chrome Canary Channel

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

17
Bruiser

Para ser claro, a caixa de seleção desativar cache no Chrome (v17 aqui, mas desde v15 eu acredito) não está nas configurações principais da interface do usuário. Está na interface de configurações de 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, clique no ícone de engrenagem no canto inferior direito.

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

14
Mason

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

14
tomermes

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

13
jamiethepiper

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

Depois de instalá-lo, clique com o botão direito e vá para as opções:

enter image description here

Verifique Automatically reload active tab after clearing data:

enter image description here

Selecione Everything para o período de tempo:

enter image description here

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

enter image description here

Clique nos atalhos de teclado na parte inferior:

enter image description here

E defina seu atalho de teclado, por exemplo Ctrl + Shift +R:

enter image description here

12
Răzvan Flavius Panda

Na verdade, se você não se importar em usar a largura de banda, ela será mais segura por vários motivos para desabilitar o cache e aconselhada por muitos sites de segurança.

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

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

Como isso é inesperado, podem ocorrer falhas, mas se ocorrerem, isso indicará claramente um bug mais grave que deve ser corrigido em qualquer caso.

8
Kevin Chadwick

Isso pode ajudar alguém. 

Eu montei meu Nginx para cache maluco. Assim, desabilitar o cache nas ferramentas de rede e limpar explicitamente o cache não funciona.

Uma solução simples e chata é que eu abro uma nova guia anônima. Surpreendentemente, funciona o tempo todo!

Uma atualização difícil no modo de navegação anônima faz o truque sempre que desejo recarregar no mesmo modo.

6
Rexford

Que tal um bookmarklet que altera o nome da página para impedir o cache da página. No Chrome, você cria um novo favorito e cole o código no URL. Clique no marcador e a página será recarregada com timestamp 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
mbokil

Acabei de ser pego, mas não necessariamente devido ao Chrome.

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

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

Configurando isso para false consertou meu problema, mas isso não é o ideal.

Não tenho ideia de onde esses dados são salvos, mas sei que o Chrome nunca atingiu o servidor para uma solicitação.

4
DynamicDan

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

Clique com o botão direito do mouse no ícone de recarregamento (à esquerda do campo de URL) e você terá um menu suspenso, selecionando a terceira opção: 'cache vazio e recarregamento do disco rígido'.

Esta opção só está disponível quando as ferramentas do desenvolvedor estão abertas. (Observe a diferença para a opção 2: 'Recarregar hard' -cmd-shift-R). Nenhum esvaziamento de cache aqui!

4
Luftwaffle

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

Eu uso todos os dias e é uma ferramenta muito útil, eu acho. Você pode usá-lo como um botão de recarga e pode limpar o cache e se você também gosta de cookies, armazenamento local, dados de formulário, etc. Você também pode definir em qual domínio isso acontece. Então, 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 também é iniciar sua janela do Chrome no modo de navegação anônima. Aqui o cache também deve estar completamente desabilitado.

3
chris

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

Não está claro qual "cache" você está se referindo. Existem vários métodos diferentes em que um navegador pode armazenar conteúdo em cache de forma persistente. Web Storage sendo um deles, Cache-Control sendo outro.

Alguns navegadores também têm um Cache , usado em conjunto com Service Workers , para criar Progressive Web Apps (PWAs) 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, execute:

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

para excluir uma chave de cache pelo nome (por exemplo, my-site-cache). Em seguida, atualize a página.

Se você vir algum erro relacionado ao trabalho no console após a atualização, talvez seja necessário cancelar o registro dos trabalhadores registrados:

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

Uma outra opção para desativar o cache é fornecida pela minha terceira extensão do Chrome Page Size Inspector , que desativa o cache exatamente da mesma maneira que o Devtools.

Além disso, a extensão informa 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 .

Screenshot - Page Size Inspector

2
Tomi Mickelsson

Se você estiver usando ServiceWorkers (por exemplo, para aplicativos da Web progressivos), provavelmente será necessário verificar "Atualizar ao recarregar" em Application> Service Workers em ferramentas de desenvolvimento também.

enter image description here

2
Bob

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

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

Basicamente, ele anexará automaticamente a Data e a Hora ao final do arquivo toda vez que for executado, o que significa que, como o nome do arquivo é tecnicamente diferente, você nunca terá que se preocupar com a obtenção do cache novamente.

2
MattE

Eu tive o mesmo problema, tentei:

  • Controle Remoto R,
  • Desativar cache no F12
  • Controle F5.

Então, descobri que usar 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!

1
Ole EH Dufour

Ei, se seu site estiver usando PHP, coloque o seguinte trecho 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 depois de anexar '?' para o URI via PHP:

    echo $Rand;

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

Claro, remova seu código antes de publicar ou simplesmente configure $ Rand para uma string vazia para permitir o cache novamente.

0
Torsten Barthel

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

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

Acho não desabilitar o cache de mídia é uma boa idéia, mas está aqui por completo.

Na verdade, eu quero uma opção para desativar completamente o cache, para usar a memória para IO em vez do meu disco (o que tornaria o carregamento 10 vezes mais rápido também!), Mas não acredito que o Chrome ou qualquer navegador tem essa opção ainda.

0
Ahmed

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 baixar o arquivo CRX aqui:

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

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

0
BernieSF

Eu estava em uma situação que o navegador carregar os dados de cache do disco, mesmo eu verifiquei o cache desativado (eu estava usando o Chrome). Todos os meus css e js estavam carregando do servidor, mas não da página da web. Isso estava acontecendo tanto no meu local quanto na produção.

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

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 irá gerar um link como: http://www.myweb.com/Home/Index?ts=636558555408282209

Esta é minha situação e solução. Espero que possa ajudar alguém.

0
Jansen

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
boi_echos

Adicione essa string de código ao seu e isso deve funcionar.

<meta name="robots" content="noarchive">
0
Hossein Hajizadeh

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

0
santon