Comment forcer le débogueur de script Chrome à recharger javascript?
J'aime beaucoup la possibilité d'éditer du javascript dans le débogueur de chrome, mais je trouve qu'il peut être très difficile de demander au débogueur de récupérer le code JavaScript du serveur.
Parfois, je dois aller aussi loin qu'en fermant le débogueur et en rechargeant le cadre, mais d'autres fois (un dI ne peut pas déterminer dans quelles conditions cela se produit), je dois vider mon cache Internet temporaire. Parfois, je jure que je dois fermer Chrome complètement, puis vider le cache, puis charger la page avant que le débogueur ne me montre enfin le script le plus récent.
(NB. Il n'y a pas de cache du script par le serveur web)
Je me demandais si quelqu'un connaissait un moyen simple et rapide de dire au débogueur d'invalider tout son code javascript et de tout récupérer à nouveau lors du rechargement de page?
Pendant que vous développez votre script, essayez de désactiver le cache Chrome.
Lorsque vous rechargez la page, le code JavaScript devrait maintenant être actualisé.
Chrome vers 2011
Chrome vers 2018
Vous pouvez également y accéder via l'onglet Réseau:
Le menu contextuel présenté ci-dessus est accessible par clic droit/pression prolongée le bouton "Recharger", tandis que Chrome Dev Tools est ouvert.
Le cache vide et la recharge dure me conviennent le mieux.
Un autre avantage: Cette option permet de conserver tous les autres onglets ouverts et les données du site Web. Il ne fait que recharger et effacer la page en cours.
Vous pouvez toujours effacer un fichier spécifique en procédant comme suit:
- Ouvrir les outils de développement
- Cliquez sur l'onglet Sources
- Trouvez votre script/image/fichier
- Consultez le panneau de droite pour voir si votre fichier est à jour.
Si non:
- Faites un clic droit sur la ressource dans le panneau de gauche et choisissez "Ouvrir le lien dans un nouvel onglet".
- Forcer un rechargement de la ressource avec les méthodes ci-dessus. (Voir l'exemple de @Bishoy Hanna)
C'est très pratique si vous avez des ressources dans des cadres et que CTRL+F5 ne les force pas à être actualisées.
Shift+F5 efface rapidement le cache.
Pour Google Chrome, ce n'est pas Ctrl+F5. Ses Shift+F5 pour effacer le cache actuel! Ça marche pour moi !
Voici un raccourci vers DevTools:
- F12 ouvrir Chrome DevTools
- F1 ouvrir les paramètres de DevTools
- Vérifiez Désactivez le cache (lorsque DevTools est ouvert) comme indiqué ci-dessous:
Note: Mis à jour par le commentaire de Dimi. Ils ont tendance à le déplacer, alors faites le moi savoir ou mettez à jour le message si vous remarquez qu'il a changé.
Sous Windows, Ctrl+Shift+r forcerait recharger le script en chrome.
Si vous apportez des modifications locales à un javascript dans les outils de développement, vous devez vous assurer que vous désactivez ces modifications avant de recharger la page.
Dans l'onglet Sources, avec votre script ouvert, cliquez avec le bouton droit de la souris sur votre script, puis sélectionnez l'option "Modifications locales" dans le menu contextuel. Cela fait apparaître la liste des scripts sur lesquels vous avez enregistré les modifications. Si vous le voyez dans cette fenêtre, les outils de développement conserveront toujours votre copie locale au lieu de l'actualiser à partir du serveur. Cliquez sur le bouton "Revenir", puis actualisez-vous à nouveau et vous devriez obtenir la nouvelle copie.
Il semble que le débogueur Chrome charge les fichiers source dans la mémoire et ne les laisse pas partir malgré les mises à jour du cache du navigateur, c’est-à-dire qu’il dispose de son propre cache, à l’exception du cache du navigateur qui n’est pas synchronisé. C'est du moins le cas lorsque vous utilisez des fichiers mappés source (je débogue les sources TypeScript). Après avoir actualisé avec succès le cache du navigateur et l'avoir validé en accédant directement au fichier source, vous téléchargez le fichier mis à jour, mais dès que vous rouvrez le fichier dans le débogueur, il renvoie en permanence l'ancien, quelle que soit la version du cache du navigateur ordinaire. Très énervant en effet.
Je considérerais cela comme un bug en chrome. J'utilise la version Version 46.0.2490.71 m.
La seule chose qui aide, est de redémarrer Chrome (fermez tous les navigateurs Chrome).
Si vous utilisez un serveur local sur Apache, vous pouvez obtenir ce qui ressemble à des problèmes de mise en cache ... C'est ce qui m'est arrivé lorsqu'un serveur Apache s'exécutait sous Vagrant (dans la virtualbox).
Ajoutez simplement les lignes suivantes à votre fichier de configuration (/etc/httpd/conf/httpd.conf ou équivalent):
#Disable image serving for network mounted drive
EnableSendfile off
Notez que cela vaut la peine de chercher dans le fichier de configuration pour voir si EnableSendfile est défini sur on n'importe où.
À mon avis, il est plus facile de travailler dans une "session de navigation privée" de chrome, pour s'assurer que vos fichiers javascript ne proviennent pas du cache.
Il existe également 2 solutions (rapides):
- Utilisez le mode incognito pour le débogage, fermez la fenêtre et rouvrez-la.
- Supprimer votre historique de navigation
La désactivation des points d'arrêt a provoqué le chargement du nouveau script.
Si les fichiers que vous chargez sont mis en cache et si les modifications que vous avez apportées ne sont pas reflétées dans le code, il existe 2 façons de gérer cela
Vider la cache comme tout le monde le dit
Si vous voulez du cache et que seuls les fichiers doivent être rechargés, vous pouvez aller à l'onglet Réseau de l'outil de développement et effacer tout ce qui a été chargé. la prochaine fois, il ne le chargera pas du cache. vous aurez vos dernières modifications.