Chrome Dev Tools - Modifier le javascript et le recharger

Question

Est-il possible de modifier le JavaScript d'une page puis de recharger la page sans recharger le fichier JavaScript modifié (et donc perdre les modifications) ?

Answer 1

Il s'agit d'une solution de contournement, mais l'une des façons d'y parvenir est d'ajouter un point d'arrêt au début du fichier ou du bloc javascript que vous souhaitez manipuler.

Ensuite, lorsque vous rechargez, le débogueur s'arrête sur ce point d'arrêt, et vous pouvez apporter toutes les modifications que vous souhaitez à la source, enregistrer le fichier, puis exécuter le débogueur sur le code modifié.

Mais comme tout le monde l'a dit, au prochain rechargement, les changements auront disparu. Au moins, cela vous permet d'exécuter des JS légèrement modifiés côté client.

Answer 2

Bonne nouvelle, le correctif arrive en mars 2018, voir ce lien : https://developers.google.com/web/updates/2018/01/devtools

"Les remplacements locaux vous permettent d'apporter des modifications dans DevTools et de conserver ces modifications lors des chargements de pages. Auparavant, toutes les modifications apportées dans DevTools étaient perdues lorsque vous rechargiez la page. Les remplacements locaux fonctionnent pour la plupart des types de fichiers

Comment cela fonctionne :

• Vous spécifiez un répertoire dans lequel DevTools doit enregistrer les modifications. Lorsque vous DevTools enregistre une copie du fichier modifié dans votre répertoire. dans votre répertoire.
• Lorsque vous rechargez la page, DevTools sert le fichier fichier local modifié, plutôt que la ressource réseau.

Pour mettre en place des dérogations locales :

1. Ouvrez le panneau "Sources".
2. Ouvrez l'onglet Remplacements.
3. Cliquez sur Setup Overrides.
4. Sélectionnez le répertoire dans lequel vous souhaitez enregistrer vos modifications.
5. En haut de votre fenêtre, cliquez sur Autoriser pour donner à DevTools un accès en lecture et en écriture au répertoire.
6. Faites vos changements."

MISE À JOUR (19 mars 2018) : C'est en direct, explications détaillées ici : https://developers.google.com/web/updates/2018/01/devtools#overrides

Answer 3

Le site Remplacement des ressources vous permet de faire exactement cela :

• créer une règle de fichier pour l'url que vous voulez remplacer
• modifier les js/css/etc dans l'extension
• rechargez aussi souvent que vous le souhaitez :)

Answer 4

1. Dans les préférences de devtools, cochez la case Activer les surcharges locales.
2. Allez dans l'onglet réseau, trouvez le fichier que vous voulez modifier, cliquez dessus et sélectionnez Save for overrides (dans l'onglet sources/overrides, vous devez ajouter un dossier local).
3. Le fichier apparaît dans un nouvel onglet de l'onglet Sources en tant que copie locale, vous pouvez donc modifier ce fichier, et après le rechargement du site, le nouveau fichier de remplacement (et modifié) se chargera sur le site !

Answer 5

Je sais que ce n'est pas la réponse à la question précise (Chrome Developer Tools) mais j'utilise cette solution de contournement avec succès : http://www.telerik.com/fiddler

(je suis sûr que certains des développeurs web connaissent déjà cet outil)

1. Sauvegarder le fichier localement
2. Modifier selon les besoins
3. Profit !

Docs complets : http://docs.telerik.com/fiddler/KnowledgeBase/AutoResponder

PS. Je préférerais qu'il soit implémenté dans Chrome comme un drapeau. preserve after reload Je ne peux pas le faire maintenant, les forums et les groupes de discussion sont bloqués sur le réseau de l'entreprise :)