Modification dans le débogueur de Chrome
Comment modifier de manière "dynamique" du code JavaScript dans le débogueur de Chrome? Ce n'est pas pour moi, donc je n'ai pas accès au fichier source. Je souhaite modifier le code et voir ses effets sur la page, en empêchant dans ce cas une animation de faire la queue plusieurs fois.
Vous pouvez utiliser le débogueur JavaScript intégré dans les outils de développement Chrome sous l'onglet "Scripts" (dans les versions ultérieures, c'est l'onglet "Sources"), mais les modifications que vous appliquez au code sont exprimées uniquement au moment où l'exécution les traverse. Cela signifie que les modifications du code qui ne s'exécutent pas après le chargement des pages n'auront aucun effet. Contrairement à ex. modifications apportées au code résidant dans les gestionnaires mouseover, que vous pouvez tester à la volée.
Il existe une vidéo de l'événement Google I/O 2010 présentant d'autres fonctionnalités des outils de développement Chrome.
Je suis tombé sur cela aujourd'hui, alors que je jouais avec le site Web de quelqu'un d'autre.
J'ai réalisé que je pouvais attacher un point d'arrêt dans le débogueur à une ligne de code auparavant ce que je voulais éditer dynamiquement. Et depuis les points d'arrêt restent même après un rechargement de la page, j'ai été en mesure de modifier les modifications souhaitées en pause au point d'arrêt, puis j'ai laissé la page se charger.
Donc, comme solution rapide, et si cela fonctionne avec votre situation:
- Ajouter un point d'arrêt à un stade antérieur du script
- Rafraîchir la page
- Editez vos modifications dans le code
- CTRL + s (Sauvegarder les modifications)
- Désactiver le débogueur
C'est ce que vous recherchez:
1.- Accédez à l'onglet Source et ouvrez le fichier javascript.
2.- Éditez le fichier, cliquez dessus avec le bouton droit de la souris et un menu apparaîtra: cliquez sur Enregistrer et enregistrez-le localement.
Pour afficher le diff ou annuler vos modifications, cliquez avec le bouton droit de la souris et sélectionnez l'option Modifications locales ... dans le menu. Vous verrez vos modifications différer par rapport au fichier d'origine si vous développez l'horodatage affiché.
Plus d'informations ici: http://www.sitepoint.com/edit-source-files-in-chrome/
Assez facile, allez dans l'onglet 'scripts'. Et sélectionnez le fichier source souhaité et double-cliquez sur n'importe quelle ligne pour le modifier.
Maintenant, Google Chrome a introduit de nouvelles fonctionnalités. En utilisant cette fonction, vous pouvez éditer votre code dans Chrome. (Changement permanent sur l'emplacement du code)
Pour cela, appuyez sur F12 -> Onglet Source - (côté droit) -> Système de fichiers - veuillez sélectionner votre emplacement de code. et puis navigateur Chrome va vous demander la permission et après ce code sera couler avec la couleur verte. et vous pouvez modifier votre code et il reflètera également l'emplacement de votre code (cela signifie qu'il changera de façon permanente)
Merci
Comme il s’agit d’une question très répandue concernant l’édition en direct de JS, je voudrais signaler une autre option utile. Comme décrit par svjacob dans sa réponse:
J'ai réalisé que je pouvais attacher un point d'arrêt dans le débogueur à une ligne de code avant ce que je souhaitais modifier dynamiquement. Et comme les points d'arrêt sont conservés même après un rechargement de la page, j'ai pu modifier les modifications souhaitées tout en faisant une pause au point d'arrêt, puis j'ai laissé la page se charger.
La solution ci-dessus ne fonctionnait pas pour JS (ensemble de packs Web - version réduite de 3,21 Mo, 130 000 lignes de code dans la version simplifiée) - Chrome se bloquait et demandait un rechargement de page qui annulait toutes les modifications enregistrées. Dans ce cas, le chemin à suivre était Fiddler, où vous pouvez définir l'option de réponse automatique pour remplacer toute ressource distante par tout fichier local de votre ordinateur - voir cette question SO pour plus de détails .
Dans mon cas, j'ai également dû ajouter des en-têtes CORS à un violoniste pour réussir à simuler une réponse.
Si son javascript s'exécute sur un bouton, il suffit de faire la modification sous Sources> Sources (dans les outils de développement en chrome) et en appuyant sur Ctrl + S pour enregistrer,. Je le fais tout le temps.
Si vous actualisez la page, vos modifications javascript auront disparu, mais Chrome gardera toujours en mémoire vos points d'arrêt.
Je cherchais un moyen de changer le script et de déboguer ce nouveau script. Voici comment j'ai réussi à le faire:
Définissez le point d'arrêt dans la première ligne du script que vous souhaitez modifier et déboguer.
Recharger la page pour que le point d'arrêt soit touché
Collez votre nouveau script et définissez-y les points d'arrêt souhaités.
Ctrl + s, et la page s'actualise, ce qui a pour effet de frapper le point d'arrêt de la première ligne.
F8 pour continuer, et maintenant votre script nouvellement collé remplace le script original tant qu'aucune redirection ni rechargement n'est effectué.
vous pouvez modifier les fichiers javascrpit de manière dynamique dans le débogueur de Chrome, sous l'onglet Sources, mais vos modifications seront perdues si vous actualisez la page. Pour suspendre le chargement de la page avant de le faire, vous devrez point d'arrêt puis rechargez la page, éditez vos modifications et enfin relâchez le débogueur pour que vos modifications prennent effet . 
voici une introduction douce au débogueur js en chrome que j'ai écrit. Peut-être que cela aidera les autres à la recherche d’informations à ce sujet: http://meeech.amihod.com/getting-started-with-javascript-debugging-in-chrome/
Chrome DevTools comporte un panneau Snippets dans lequel vous pouvez créer et modifier le code JavaScript comme vous le feriez dans un éditeur, puis l'exécuter . Ouvrez DevTools, sélectionnez le panneau Sources, puis sélectionnez l'onglet Extraits.
https://developers.google.com/web/tools/chrome-devtools/snippets
Tout comme la réponse de @mark, nous pouvons créer des extraits de code dans Chrome DevTools, pour override le code JavaScript par défaut. Enfin, nous pouvons voir quels effets ils ont sur la page.
