Outils de développement Chrome-modifier javascript et recharger
Est-il possible de modifier le JavaScript d'une page, puis de recharger la page sans recharger le fichier JavaScript modifié (et ainsi perdre des modifications)?
5 réponses
C'est un peu un travail, mais une façon d'y parvenir est d'ajouter un point d'arrêt au début du fichier javascript ou du bloc que vous voulez manipuler.
Ensuite, lorsque vous rechargez, le débogueur fait une pause sur ce point d'arrêt, et vous pouvez apporter toutes les modifications que vous voulez à la source, enregistrer le fichier, puis exécuter le débogueur via le code modifié.
Mais comme tout le monde l'a dit, le prochain rechargement des modifications aura disparu - au moins, nous allons vous lancer quelques JS légèrement modifiés côté client.
Le Ressource Remplacer extension vous permet de faire exactement cela:
- créez une règle de fichier pour l'url que vous souhaitez remplacer
- modifier le js/css/etc dans l'extension
- recharger aussi souvent que vous le souhaitez :)
Bonnes nouvelles, le correctif arrive en mars 2018, voir ce lien: https://developers.google.com/web/updates/2018/01/devtools
" les remplacements locaux vous permettent d'effectuer des modifications dans DevTools et de conserver ces modifications entre les 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 ça marche:
- vous spécifiez un répertoire dans lequel DevTools doit enregistrer les modifications. Lorsque vous apporter des modifications dans DevTools, DevTools enregistre une copie du fichier modifié à votre répertoire.
- lorsque vous rechargez la page, DevTools Local, fichier modifié, plutôt que la ressource réseau.
Pour configurer les remplacements locaux:
- ouvrez le panneau Sources.
- ouvrez l'onglet Remplacements.
- Cliquez Sur Remplacements De Configuration.
- Sélectionnez le répertoire que vous souhaitez enregistrer vos modifications.
- en haut de votre fenêtre, cliquez sur Autoriser pour donner à DevTools lecture et écriture accès à l'annuaire.
- faites vos modifications."
Mise à jour (19 mars 2018): c'est en direct, explications détaillées ici: https://developers.google.com/web/updates/2018/01/devtools#overrides
Je sais que ce n'est pas l'asnwer à la question précise (outils de développement Chrome) mais j'utilise cette solution de contournement avec succès: http://www.telerik.com/fiddler
(je suis sûr que certains développeurs web connaissent déjà 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 comme un drapeau preserve after reload, ne peut pas le faire maintenant, les forums et les groupes de discussion bloqués sur le réseau d'entreprise:)
Oui, ouvrez simplement l'onglet "Source" dans les outils de développement et accédez au script que vous souhaitez modifier . Effectuez vos ajustements directement dans la fenêtre Outils de développement, puis appuyez sur ctrl + s pour enregistrer le script-sachez que le nouveau js sera utilisé jusqu'à ce que vous actualisiez toute la page.