Outils de développement Chrome - Modifier javascript et recharger

196

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)?

javascript google-chrome-devtools CDT
la source

Réponses:

220

C'est un peu une solution 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 se met en pause 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, lors du prochain rechargement, les modifications auront disparu - au moins, cela vous permet d'exécuter un côté client JS légèrement modifié.

Ashley Schroder
la source
10
Il s'avère que c'était la réponse que je cherchais. Placez un point d'arrêt sur la première ligne du code javascript. Ensuite, lorsque la rupture se produit, collez-y votre code modifié. Unpause et ça marche!
Nicholas Blasgen
comment éditer ou coller du code là-dedans? Je ne vois certainement pas cette fonctionnalité dans la console Chrome. Je peux éditer JS / HTML à partir de la section Elements, mais cela ne se recharge pas automatiquement. Mais à l'endroit où les points d'arrêt sont définis, cela semble être en lecture seule
Josh Sutterfield
Malheureusement, ce n'est toujours pas une excellente solution. Tout code que vous ajoutez n'est pas disponible dans la console. Par exemple, l'ajout var foo = 'bar'd'un script n'expose pas fooà la console.
AgmLauncher
quoi de neuf avec les scripts externes? les points d'arrêt semblent en disparaître.
OlehZiniak
Cela fonctionne tant que vous souhaitez modifier des scripts chargés en externe, ni Chrome ni les outils de débogage FireFox ne permettent de modifier le javascript en ligne, même si son exécution est interrompue par un point d'arrêt.
Marek
151

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

"Les remplacements locaux vous permettaient d'apporter des modifications dans DevTools et de conserver ces modifications lors des chargements de page. Auparavant, toutes les modifications que vous aviez apportées dans DevTools étaient perdues lorsque vous rechargiez la page. Les remplacements locaux fonctionnaient 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 local modifié plutôt que la ressource réseau.

Pour configurer des remplacements locaux:

  1. Ouvrez le panneau Sources.
  2. Ouvrez l'onglet Remplacements.
  3. Cliquez sur Remplacements de configuration.
  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. Apportez vos modifications. "

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

Nico
la source
13
Avec la sortie de Chrome 65, cela devrait être la nouvelle réponse acceptée. (La fonctionnalité était déjà disponible dans Chrome Canary)
Micros
1
J'ai un fichier "a.js? Ver = 1.2". Il est enregistré dans le dossier de remplacement en tant que "a.js" et non chargé en tant que remplacement. Cela ne fonctionne pas lorsqu'il y a des paramètres? Y at-il un travail autour?
Ralf
Fonctionne comme prévu, mais doit prendre soin d'une chose. Vous devez effacer les configurations de remplacement ou supprimer le fichier modifié localement (enregistré dans le dossier que vous spécifiez lors de la configuration des remplacements) une fois que vous souhaitez charger vos fichiers js d'origine.
Muhammad Murad Haider le
61

L' extension Resource Override vous permet de faire exactement cela:

  • créer une règle de fichier pour l'URL que vous souhaitez remplacer
  • éditez le js / css / etc dans l'extension
  • rechargez aussi souvent que vous le souhaitez :)
laktak
la source
1
M'a fait le truc merci. J'utilisais Fiddler pour Windows avant cette extension. À l'heure actuelle, je peux déboguer des fichiers distants sur n'importe quelle plate-forme.
Ahmad Alfy
Je ne comprends pas le logiciel, quelqu'un peut-il expliquer comment exactement je dois le configurer?
Black
0

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

(à peu près sûr que certains développeurs Web connaissent déjà cet outil)

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

entrez la description de l'image ici

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, les forums et les groupes de discussion bloqués sur le réseau d'entreprise :)

Mars Robertson
la source
-8

Oui, ouvrez simplement l'onglet "Source" dans les outils de développement et accédez au script que vous souhaitez modifier. Faites vos ajustements directement dans la fenêtre des outils de développement, puis appuyez sur ctrl + s pour enregistrer le script - sachez que les nouveaux js seront utilisés jusqu'à ce que vous actualisiez toute la page.

jacksbox
la source
Quelle version de chrome? Oui, vous pouvez "modifier" le contenu d'un script (pas les scripts sur la page elle-même), mais les modifications n'ont aucun effet, et ctrl-s / save as vous permet simplement de sauvegarder le script localement (comme ctrl-as dans la fenêtre principale).
davidkonrad
J'utilise la version 34 - lorsque j'édite un script, par exemple ajouter un console.log à un événement de clic (déjà lié) et enregistrer, la console affiche le message suivant: "Recompilation et mise à jour réussies." - après ça. lorsque je déclenche l'événement de clic, j'obtiens la sortie du journal dans la console.
jacksbox
Lorsque vous rechargez la page, il semble que le fichier modifié localement n'a pas été utilisé.
Jake Wilson
32
vous m'avez eu à "oui" ... mais ensuite vous m'avez perdu à "jusqu'à ce que vous actualisiez la page entière" ....
Cool Blue