Comment puis-je forcer un rechargement dur dans Chrome pour Android

207

Dans Chrome pour ordinateur, j'ai des options dans les outils de développement pour désactiver complètement le cache lorsque les outils de développement sont ouverts et j'ai les options pour effectuer manuellement un rechargement dur en cliquant longuement sur le bouton de rechargement (avec les outils de développement ouverts).

Existe-t-il une telle technique pour Chrome pour Android? Je n'ai trouvé aucun réglage. Que puis-je faire lorsque je veux forcer le navigateur à télécharger un fichier javascript ou css au lieu d'utiliser un fichier mis en cache lors du développement?

Riesling
la source
Je viens de revenir pour étendre (ce qui avait été) une application web stable et j'ai découvert que cela se produisait. Les dernières données d'état sont stockées dans un fichier .js avec un suffixe d'URL cache-buster. Cela ne fonctionne plus, dans Chrome sur Windows, ChromeOS ou Android.
Euan M
il semble qu'un simple rafraîchissement (en cliquant sur la flèche du cercle w) détecte tous les changements de nos jours. pas de trucs. ... faites-moi savoir si je me trompe.
Ronnie Royston

Réponses:

168

J'utilise window.location.reload(true)selon MDN (et cette question similaire), cela force la page à se recharger depuis le serveur.

Vous pouvez exécuter ce code dans le navigateur en tapant javascript:location.reload(true)dans la barre d'adresse.

Konrad Dzwinel
la source
7
Tapez-le simplement dans la barre d'adresse en préfixant le code javascript:.
Konrad Dzwinel
4
En fait, vous devriez pouvoir éviter une window.partie. javascript:location.reload(true)devrait faire l'affaire.
Konrad Dzwinel
5
n'a pas fonctionné pour moi sur chrome v55.0.2883.91 / android5.1.1
Kev
20
Cela ne fonctionne pas sur le mien, v56.0.2924.87 sur Android 7.1.1. Pourquoi pouvez-vous appuyer sur Actualiser et faire re-télécharger le navigateur comme il fonctionnait auparavant? Une telle gêne en essayant de se développer.
Scott Wilson
33
J'ouvre une fenêtre de
navigation privée
133

L'affichage de la page en mode navigation privée désactivera le cache. C'était la seule façon de forcer une actualisation sur une feuille de style sans vider manuellement le cache via les paramètres.

Michael
la source
2
@Kev Ni pour moi.
Ricky Boyce
1
Oui, celui-ci fonctionne pour moi sur Android 6.0.1 avec Chrome 59.
Avio
4
Cela fonctionne mieux que la réponse acceptée, au moins sur Android 7.1.2 et Chrome 61. La mise en cache est en quelque sorte vraiment agressive. Même vider les fichiers mis en cache pour ce domaine n'a pas fonctionné pour moi.
Ogier Schelvis
Je l'utilise plus souvent, si cela ne fonctionne pas pour vous, le cache est probablement sur le serveur et non sur le navigateur.
Deepak Kamat
2
Il ne videra le cache en mode navigation privée que la première fois. Après cela, le même problème apparaît
Mara
75

Aussi une option:

  1. Menu
  2. Paramètres
  3. Intimité
  4. Effacer les données de navigation
  5. Cochez "Cache" et appuyez sur "CLEAR"

puis rechargez la page.

échec et mat711
la source
1
Maintenant, son changé en Clear Browsing Data, où vous pouvez cocher en clear cacheutilisant la case à cocher.
shaijut
1
Non, puis KILL Chrome, relancez Chrome, puis rechargez la page. Ouais, ça a empiré.
ADTC
4
Mise à jour: même tuer Chrome ne fonctionne plus. Je n'ai aucune idée de l'enfer que l'option "Images et fichiers mis en cache" est en train de supprimer .. elle conserve toujours le fichier CSS mis en cache. Cela devient plus ridicule!
ADTC
1
Mise à jour: Voir la réponse de heidgert. L'effacement du cache peut toujours charger le résultat "mis en cache" à partir des serveurs de Google si "Data Saver" est activé dans les paramètres de Chrome.
ADTC
1
Cela effacera le cache de TOUS les sites, pas seulement celui inspecté.
Obmerk Kronen
46

Vous pouvez utiliser l' option Demander un site de bureau dans le menu de l'application (à droite de la barre d'adresse), ce qui forcera la page à se recharger.

Appuyez simplement dessus, attendez l'actualisation, puis désélectionnez-la.

lucoweb
la source
Travail confirmé sur Chrome. J'ai failli manquer cette réponse en parcourant. Suppression des commentaires sur Firefox pour aider la prochaine personne. J'espère que cela ne semble pas en conflit avec l'intention de l'auteur .
Ishmaeel
1
C'est de loin la meilleure réponse pour le développement lorsque vous obtenez un fichier CSS ou JS bloqué. Je trouve généralement que le rafraîchissement fonctionne bien, mais parfois pour une raison inexplicable, un fichier js ou css est bloqué, et c'est le seul moyen de le décoller que j'ai trouvé. J'aimerais pouvoir donner plus d'une voix positive, lol, car c'est une solution si simple.
Lizardx
8
Cela fonctionnait il y a quelque temps, mais ne fonctionne plus sur aucune version récente de Chrome en décembre 2017.
Capagris
1
Cela a fonctionné pour moi avec Chrome 2018 65.0.3325.109 sur Samsung Android 5.1.1; SM-T900 Build / LMy47X. Il avait l' avantage supplémentaire de ne pas détruire les données mises en cache (telles que les localStoragevaleurs).
CODE-REaD
1
Ne fonctionne pas en avril 2019. Chrome 73+ ne fonctionne pas.
SE frappe à nouveau malheureusement le
31

Mentionner cela parce que vous avez mentionné "lors du développement".

Vous pouvez contrôler l'appareil mobile via votre navigateur de bureau Chrome.

Visitez chrome://inspect/#devicessur votre bureau. EtInspect l'appareil connecté à votre bureau. D'accord quand on vous demande la permission.

Vous devriez maintenant voir une fenêtre Devtool complète pour la page actuelle sur l'appareil mobile.

Maintenant, utilisez le raccourci de rechargement dur (Cmd + Shift + R) sur le bureau pour effectuer un rechargement dur sur l'appareil mobile!

Aakash Goel
la source
3
ce commentaire est obsolète mais me met sur la bonne voie. Vous devez d'abord activer le téléphone réel pour le débogage via Chrome.
Deborah
Pour des instructions détaillées sur la façon d'activer le débogage USB sur un téléphone Android, voir: stackoverflow.com/a/16707217/1024735 . Et cette fonctionnalité est impressionnante pour plus que la simple capacité de rechargement dur. Merci!
kevinmicke
Pour tester dans les émulateurs Android, Ctrl + Shift + R dans devtools est vraiment agréable et rapide. Pas d'activation et de désactivation des paramètres, etc. Merci.
Rainer Schwarze
21

N'oubliez pas de vous assurer que le paramètre "Réduire l'utilisation des données" est désactivé, car il semble télécharger les données mises en cache (à partir des serveurs Google?) Même si votre cache local est vidé.

heidgert
la source
1
Je pense que ce paramètre est maintenant simplement appelé "Data Saver".
Bletch
19

Comment réinitialiser toutes les données d'une URL / d'un site Web donné sur Chrome Mobile pour Android:

1 - Ouvrez le menu Chrome et appuyez sur l'icône "i (info)"

une

2 - appuyez sur "Paramètres du site"

deux

3 - Appuyez sur l'icône de la corbeille

Trois

Voilà, même le technicien de service le plus profondément ancré pour cette URL va maintenant mourir.

yPhil
la source
7
Cela ne fonctionne pas sur Chrome 73.0.3683.90 sur un Samsung S9 +. J'ai essayé cela plus de 15 fois, ainsi que javascript: location.reload (true), et cela ne fonctionne pas. Il semble que les utilisateurs d'Android ne puissent pas également être des développeurs, selon Guug-Ul, seigneur des ténèbres.
SE frappe à nouveau malheureusement le
Fonctionne sur ma Note 8 .. Mais je dois rafraîchir la page après.
Chris Cudmore
Vous pouvez également accéder à ce menu en cliquant sur l'icône de verrouillage (ou tout ce qu'elle affiche pour les connexions non sécurisées) à gauche de l'URL.
Chris Cudmore
De loin la meilleure solution! <3
bArraxas
12

Je sais que c'est une vieille question, mais j'ai trouvé que la réponse acceptée ne fonctionnait pas pour moi.

Une autre solution serait d'ajouter l'URL avec un nouveau paramètre url tels que website.com?a=1, website.com?a=2, etc.

Si vous avez déjà des paramètres, bien sûr, vous utiliserez une esperluette, c.-à-d. website.com?q=test&a=1

Phobie de la banane
la source
Cela marche. Juste ?asuffit si vous ne souhaitez recharger qu'une seule fois.
Dan Dascalescu
11
Ce n'est pas très faisable pour recharger des fichiers de référence mis en cache (comme CSS ou JS), car vous ne pouvez pas vraiment modifier le HTML principal pour ajouter le ?a- bien sûr, sauf si vous êtes l'hôte du site.
ADTC
7

Depuis 2018, à partir du centre d'aide Google (testé sur Chrome 63):

  1. appuyez sur le menu à trois points ;
  2. choisissez Historique> Effacer les données de navigation ;
  3. si nécessaire, choisissez la période (au-dessus de la liste de contrôle);
  4. décochez tous les éléments sauf les images et fichiers mis en cache ;
  5. poursuivre avec Effacer les données et confirmer.

Comme mentionné dans une autre réponse, les onglets de navigation privée sont également d'une grande utilité pour le développement.

Skippy le Grand Gourou
la source
Remarque étape 3: choisissez la période. Cela a fait l'affaire pour moi car j'essayais d'effacer les pages en cache d'il y a 3 semaines.
Dror
Ce n'est pas de votre faute, mais c'est une solution assez terrible car elle efface également les données de navigation pour tous les autres sites, ce qui est pénible si vous utilisez votre navigateur pour autre chose que du travail de développement!
GameKyuubi
@GameKyuubi En fait, si vous sélectionnez des données de la dernière heure, la douleur est limitée. Mais bien sûr , cette solution est assez pauvre, je ne référencé parce que c'est l'officiel et il ne travail (contrairement à quelques autres).
Skippy le Grand Gourou
C'est un peu ce que je veux dire, le fait que ce soit la solution officielle est carrément gênant.
GameKyuubi
7

J'ai trouvé une solution qui fonctionne, mais c'est moche.

  • Connectez l'appareil Android à votre PC avec un câble USB et ouvrez Chrome sur votre bureau .
  • Faites un clic droit n'importe où sur une page et sélectionnez "Inspecter".
  • Cliquez sur le menu à trois points et sélectionnez "Appareils distants" dans le menu "Plus d'outils":

    entrez la description de l'image ici

  • Dans le panneau qui s'ouvre, sélectionnez votre appareil puis le bouton "Inspecter" à côté du nom de l'onglet sur votre téléphone qui doit être actualisé:

    entrez la description de l'image ici

  • Dans la fenêtre qui s'ouvre, cliquez sur l'onglet "Réseau" et cochez la case "Désactiver le cache":

    entrez la description de l'image ici

  • Rechargez la page sur votre téléphone ou en utilisant le bouton de rechargement dans la fenêtre DevTools.

Remarque: si votre téléphone n'apparaît pas dans la liste des appareils:

  • assurez-vous que la connexion USB utilise le mode de transfert de fichiers et ne se charge pas simplement
  • essayez de redémarrer ADB ou exécutez adb devicespour voir si le périphérique est détecté
Nathan Osman
la source
1
solution géniale, cela fonctionne principalement pour "inspecter" la page Web de l'appareil directement sur le bureau, et vous pouvez également vider le cache. Merci.
juanram0n
C'est en fait la plus belle réponse.
John
6

Débogage à distance vous permet d'utiliser les outils de développement de bureau:

https://developers.google.com/chrome-developer-tools/docs/remote-debugging

Swonkie
la source
oui merci je sais déjà - j'aurais dû le mentionner, mais parfois je ne veux pas le brancher mais j'ai toujours cette option
Riesling
2
Vous pouvez effacer le cache comme ceci: support.google.com/chrome/answer/2392709
Swonkie
5
Merci, une option sans vider le cache entier pour tous les sites serait bien
Riesling
Il s'agit de l'option la plus fiable lorsque vous activez Réseau> Désactiver le cache
Rupert Rawnsley
6

Les versions récentes du cache Chrome sont très agressives. Même les techniques de contournement du cache telles que " http: // url? Updated = datecode " ont cessé de fonctionner. Vous devez vider le cache ou lancer une fenêtre de navigation privée à chaque fois (et vous assurer que l'économiseur de données est désactivé).

Greg Searle
la source
Intéressant, je n'en étais pas conscient. Avez-vous une source qui soutient cette affirmation?
Antoine
2
C'est juste un comportement observé lorsque je développe mes propres applications Javascript. J'ai dû spécifier la directive CACHE-CONTROL: NO-CACHE dans l'en-tête HTTP de mon serveur Web de développement pour éviter de devenir fou avec des bogues qui ne disparaîtraient tout simplement pas (parce que Chrome insistait pour mettre en cache l'ancien code). Firefox n'affiche pas ce comportement.
Greg Searle
4

Le seul moyen fiable que j'ai trouvé qui ne nécessite pas de brancher le téléphone à un PC est le suivant:

1. Forcez l'arrêt de l'application Chrome.

Cela doit être fait en premier et vous ne pouvez pas rouvrir Chrome avant d'avoir terminé ces étapes. Il existe plusieurs façons de forcer l'arrêt. La plupart des lanceurs à domicile vous permettront d'accéder aux "Informations sur l'application" en maintenant votre doigt sur l'icône en chrome et en sélectionnant une icône "i". Alternativement, vous pouvez accéder aux paramètres Android et rechercher simplement «Chrome».

Une fois dans "Informations sur l'application", sélectionnez "Forcer l'arrêt" comme indiqué ci-dessous:


2. Vider le cache de Chrome

Sélectionnez "Stockage" sur le même écran:


Enfin, sélectionnez "Vider le cache".

Lorsque vous revenez à l'application Chrome, la page doit se recharger et diffuser une version non mise en cache.

De plus, j'ai trouvé un site qui permet de tester facilement si vous avez vidé votre cache: https://refreshyourcache.com/en/cache-test/
Je n'y suis en aucun cas affilié. Notez que la méthode pour effacer le cache mentionné sur ce site est en fait obsolète et n'est plus valide.

Bort
la source
1
Parfait, c'est la seule solution qui a fonctionné pour moi sans débogage USB.
Luis Lema
2

EDIT: cette méthode est déconseillée dans Google Chrome et ne fonctionnera plus.

RÉPONSE ORIGINALE:

J'ai pu vider le cache (y compris les xhr suivantes) en utilisant chrome: // net-internals

intérieur net chromé

Cliquez ensuite sur la petite flèche en haut à droite

menu

Sélectionnez "vider le cache" dans ce menu.

Tom Kay
la source
Dans Chrome 75, chrome: // net-internals dit "La visionneuse d'événements net-internals et les fonctionnalités associées ont été supprimées ..."
Bort
@Bort merci pour l'avertissement. Il semble que cette méthode ne fonctionnera plus.
Tom Kay
1

Voici une autre solution simple qui peut fonctionner lorsque d'autres échouent:

Aujourd'hui, une solution côté développeur assez simple a fonctionné pour moi lorsque le problème de mise en cache était un fichier CSS mis en cache. En bref: créez une copie de fichier html temporaire et accédez-y pour mettre à jour le cache CSS.

Cette astuce peut actualiser le fichier CSS, au moins dans le navigateur par défaut d'icônes de globe bleu d'Android (mais très probablement son jumeau, le navigateur Chrome officiel, et tous les autres navigateurs que nous rencontrons sur les téléphones "intelligents" avec leur tendance à la mise en cache agressive ).

Détails:

Au début, j'ai essayé certaines des solutions assez simples partagées ici, mais sans succès (par exemple, effacer l'historique récent du site spécifique, mais pas des mois et des mois). Mon dernier CSS ne serait cependant pas appliqué lors de l'actualisation. Et cela même si j'avais déjà utilisé l'astuce de numéro de version dans l'appel de fichier CSS dans la section head du html qui m'avait aidé à éviter ces mises en cache agressives agaçantes dans le passé. (exemple: link rel = "stylesheet" href = "style.css? v = 001" où vous mettez à niveau ce numéro de pseudo-version chaque fois que vous apportez une modification à un fichier CSS, par exemple 001, 002, 003, 004 ... (devrait être fait dans chaque fichier html du site))

Cette fois (août 2019), la mise à jour du numéro de version du fichier CSS ne suffisait plus, et certaines des mesures plus simples mentionnées ici ne fonctionnaient pas pour moi, ou je n'ai même pas pu accéder à certaines d'entre elles (sur un téléphone Android emprunté).

Au final, j'ai essayé quelque chose de relativement simple qui a finalement résolu le problème:

J'ai fait une copie du fichier index.html du site en lui donnant un nom différent (indexcopy.html), je l'ai téléchargé, je l'ai parcouru sur l'appareil Android, puis je suis retourné à la page d'origine, actualisé (avec le bouton d'actualisation à gauche de la barre d'adresse), et voilà: cette fois, le rafraîchissement de index.html a finalement fonctionné.

Explication: La dernière version du fichier CSS a finalement été appliquée sur Android lors de l'actualisation de la page html en question, car la copie en cache du fichier CSS avait maintenant été mise à jour lorsque le fichier CSS a été appelé à partir d'une page html temporaire nommée différemment qui n'existait nulle part dans l'historique du navigateur et que je pourrais supprimer à nouveau par la suite. La mise en cache agressive a apparemment ignoré l'URL CSS et est passée à la place par l'URL HTML, même si c'était le fichier CSS qui devait être mis à jour dans le cache.

DirkTheWebPhoenix
la source
Malheureusement, c'est le seul qui semble fonctionner de nos jours. Cela signifie que chaque fois que vous travaillez sur css, vous devez continuer à mettre à jour functions.php dans wordpress pour mettre à jour la version. Oui, une autre chose stupide à propos de Google, qui ne pense pas et qui est là-haut avec Microsoft maintenant. Mais oui, un vieux truc :)
Gavin Simpson
1

Si c'est juste la question des fichiers inclus, ajoutez simplement la version après le chemin ( ?v=12345678)

<link rel="stylesheet" type="text/css" href="style.css?v=12345678" />

Celui qui charge à nouveau la page verra les changements.

Novasol
la source
1
Excellente réponse sous-estimée!
lisandro