Chrome Outils de développement - Modifiez javascript et rechargez
Est-il possible de modifier le code JavaScript d'une page, puis de recharger la page sans recharger le fichier JavaScript modifié (et donc de perdre des modifications)?
Ceci est un peu un travail de contournement, mais vous pouvez y parvenir en ajoutant un point d'arrêt au début du fichier javascript ou du bloc que vous souhaitez manipuler.
Ensuite, lorsque vous rechargez, le débogueur s'interrompt sur ce point d'arrêt et vous pouvez apporter les modifications souhaitées à la source, enregistrer le fichier, puis exécuter le débogueur via le code modifié.
Mais comme tout le monde l’a dit, les modifications suivantes n’auront plus lieu pour le rechargement. Au moins, cela vous permettra d’exécuter du côté client JS légèrement modifié.
Bonne nouvelle, le correctif arrive en mars 2018, voir le lien suivant: https://developers.google.com/web/updates/2018/01/devtools
"Les remplacements locaux vous permettent d’apporter des modifications à DevTools et de les conserver lors du chargement des 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 ça fonctionne:
- Vous spécifiez un répertoire dans lequel DevTools doit enregistrer les modifications. Lorsque vous apportez des modifications dans DevTools, DevTools enregistre une copie du fichier modifié dans votre répertoire.
- Lorsque vous rechargez la page, DevTools sert le fichier modifié local plutôt que la ressource réseau.
Pour configurer des remplacements locaux:
- Ouvrez le panneau Sources.
- Ouvrez l'onglet Remplacements.
- Cliquez sur Setup Overrides.
- Sélectionnez le répertoire dans lequel vous souhaitez enregistrer vos modifications.
- En haut de la fenêtre, cliquez sur Autoriser pour donner à DevTools un accès en lecture et en écriture au répertoire.
- Faites vos changements. "
UPDATE (19 mars 2018): c'est en direct, des explications détaillées ici: https://developers.google.com/web/updates/2018/01/devtools#overrides
L'extension Resource Override vous permet de faire exactement cela:
- créer une règle de fichier pour l'URL que vous souhaitez remplacer
- éditer le js/css/etc dans l'extension
- recharger aussi souvent que vous le souhaitez :)
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
(certains développeurs Web sont déjà au courant de cet outil)
- Enregistrez le fichier localement
- Modifier au besoin
- Profit!
Documents complets: http://docs.telerik.com/fiddler/KnowledgeBase/AutoResponder
PS. Je préférerais qu'il soit implémenté dans Chrome en tant que drapeau preserve after reload, je ne peux pas le faire maintenant, forums et groupes de discussion bloqués sur le réseau de l'entreprise :)