Modification dans le débogueur Chrome

247

Comment modifier "dynamiquement" le code JavaScript dans le débogueur Chrome? Ce n'est pas pour moi, donc je n'ai pas accès au fichier source. Je souhaite modifier le code et voir quels effets ils ont sur la page, dans ce cas, empêcher une animation de faire la queue plusieurs fois.

javascript  google-chrome  debugging 
— À M
source
5
Vous pouvez utiliser Opera. Opera permet l'édition de fichiers JS. Après avoir rechargé la page en douceur, vos modifications seront appliquées. Clic droit> Source> Apporter des modifications> Appliquer les modifications.
— XP1
Il s'agit d'un didacticiel génial pour le débogueur Chrome. Il montre les étapes très simples pour apporter des modifications dans le débogueur à vos scripts.
— SaganRitual
1
Vous pouvez également "injecter" du code via un point d'arrêt conditionnel . Dans l'exemple donné, utilisez num = 5, console.log(arguments[0], num), falsepour mettre à jour et enregistrer la valeur à l'intérieur de la foofonction.
— mems
— stackinfostack

Réponses:

80

Vous pouvez utiliser le débogueur JavaScript intégré dans Chrome Developer Tools sous l'onglet "Scripts" (dans les versions ultérieures, c'est l'onglet "Sources"), mais les modifications que vous appliquez au code ne sont exprimées qu'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 de la page n'auront aucun effet. A la différence par exemple des modifications au code résidant dans les Mouseover gestionnaires, que vous pouvez tester à la volée.

Une vidéo de l'événement Google I / O 2010 présente d'autres fonctionnalités des outils de développement Chrome.

— Adam
source
26
Dans les versions ultérieures de Chrome, les icônes d'onglet ont disparu et l'onglet «Scripts» est renommé «Sources» - il n'est donc pas évident de trouver le débogueur javascript. Plus d'infos ici stackoverflow.com/questions/12113769/…
— chrisjleu
9
Il n'y a pas une telle méthode. Je ne parviens pas non plus à modifier le code sous l'onglet Sources.
— Melab
17
Le débogueur Chrome ne permet pas la modification locale de javascript. Faux.
— omikes
1
@oMiKeY Qu'est-ce qui est faux? Chrome permet certainement de modifier le script dans le débogueur.
— JLRishe
6
@oMiKeY vous pouvez modifier si le script n'est pas prettifié
— peterchaula
284

Je suis tombé sur cela aujourd'hui, quand 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 avant ce que je voulais modifier dynamiquement. Et puisque les points d'arrêt restent même après un rechargement de la page , j'ai pu modifier les modifications que je voulais pendant une pause au point d'arrêt, puis j'ai continué à laisser la page se charger.

Donc, comme solution rapide, et si cela fonctionne avec votre situation:

  1. Ajouter un point d'arrêt à un point antérieur du script
  2. Rafraîchir la page
  3. Modifiez vos modifications dans le code
  4. CTRL+ s(enregistrer les modifications)
  5. Annuler le débogueur
— sjacob
source
1
Merci! J'ai trouvé que cela fonctionnait lorsqu'il fallait apporter des modifications à une fonction anonyme auto-exécutable qui était appelée juste à côté du chargement de la page.
— Peter
1
Argh, parce que j'avais essayé ça plus tôt et ça n'a pas marché et bien oh mec, comment ai-je raté ça. Mais oui, ça ne marche pas pour moi.
— Jamie Hutber
8
Pour moi, il était crucial de savoir que les modifications devaient être enregistrées (étape 4). Merci!
— Sergey Goliney
3
Ne fonctionne pas sur javascript dans les fichiers html pour moi. De plus, si vous avez ajouté un dossier à l'espace de travail, sélectionnez le fichier js local , cliquez avec le bouton droit et mappez ce fichier sur le réseau dito.
— oo
1
Il n'y a donc aucun moyen de modifier les scripts dans les fichiers html?
— Warrior
13

Voici ce que vous recherchez:

1.- Accédez à l'onglet Source et ouvrez le fichier javascript

2.- Modifiez le fichier, faites un clic droit dessus et un menu apparaîtra: cliquez sur Enregistrer et enregistrez-le localement.

Afin d'afficher le diff ou d'annuler vos modifications, faites un clic droit 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 détaillées ici: http://www.sitepoint.com/edit-source-files-in-chrome/

— artémisien
source
5

Assez facile, allez dans l'onglet 'scripts'. Et sélectionnez le fichier source que vous souhaitez et double-cliquez sur n'importe quelle ligne pour le modifier.

— gnur
source
4
Ce serait génial si vous pouviez enregistrer les modifications sur le disque dans le cas de file: // URLs
— Jim Blackler
3
C'est exactement ce que j'ai fait, mais les changements n'ont pas été reflétés sur la page, comme on pouvait s'y attendre. J'ai besoin de changer $ (sélecteur) .fadeIn () ... en $ (sélecteur) .stop (vrai, vrai) .fadeIn () ... Vous savez? Et je veux pouvoir voir cela se produire sur la page.
— Tom
1
Oh putain, tu as raison. Maintenant, je me demande pourquoi Chrome nous permet de modifier quoi que ce soit si cela n'a aucun effet ..
— gnur
"Enregistrer sous ..." enregistre uniquement le fichier sur votre ordinateur. Il n'applique pas les modifications une fois la page rechargée. Si vous souhaitez appliquer des modifications aux fichiers JS pour le débogage, vous pouvez utiliser Opera.
— XP1
1
et celui-ci appelé tincr: chrome.google.com/webstore/detail/…
— JustGoscha
3

Comme c'est une question assez populaire qui traite de l'édition en direct de JS, je veux souligner 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 voulais modifier dynamiquement. Et puisque les points d'arrêt restent même après un rechargement de la page, j'ai pu modifier les modifications que je voulais pendant une pause au point d'arrêt, puis j'ai continué à laisser la page se charger.

La solution ci-dessus ne fonctionnait pas pour moi pour un JS assez volumineux (bundle webpack - version minifiée de 3,21 Mo, 130k lignes de code dans la version prettifiée) - Chrome s'est écrasé et a demandé un rechargement de page qui a annulé toutes les modifications enregistrées. La voie à suivre dans ce cas était Fiddler où vous pouvez définir l'option Réponse automatique pour remplacer toute ressource distante par n'importe quel 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 au violoneux pour réussir à simuler la réponse.

— dominik
source
2

Si son javascript qui s'exécute sur un bouton clique, alors faire le changement sous Sources> Sources (dans les outils de développement en chrome) et appuyer sur Ctrl + S pour sauvegarder, suffit . Je le fais tout le temps.

Si vous actualisez la page, vos modifications javascript auraient disparu, mais Chrome se souviendra toujours de vos points d'arrêt.

— developer747
source
2

Google Chrome a maintenant introduit une nouvelle fonctionnalité. En utilisant cette fonctionnalité, vous pouvez modifier votre code dans la navigation Chrome. (Changement permanent sur l'emplacement du code)

Pour cela, appuyez sur F12 -> onglet Source - (côté droit) -> Système de fichiers - dans lequel veuillez sélectionner votre emplacement de code. puis le navigateur Chrome vous demandera la permission et après ce code sera coulé de couleur verte. et vous pouvez modifier votre code et cela réfléchira également sur l'emplacement de votre code (cela signifie qu'il changera de façon permanente)

Merci

— stackinfostack
source
2

Tout comme la réponse de @mark, nous pouvons créer des extraits dans Chrome DevTools, avec overridele code JavaScript par défaut. Enfin, nous pouvons voir quels effets ils ont sur la page.

Image

— vin kami
source
1

voici une douce introduction au débogueur js en chrome que j'ai écrit. Peut-être que cela aidera ceux qui recherchent des informations à ce sujet: http://meeech.amihod.com/getting-started-with-javascript-debugging-in-chrome/

— meeech
source
1
C'est un bon résumé. Malheureusement, cela ne dit rien de modifier JS dans le débogueur, ce qui est la tâche en question.
— Bruno Bronosky
Être en désaccord. Vous voyez à la fin, je donne spécifiquement un exemple comment "" dynamiquement "modifier le code JavaScript dans le débogueur Chrome" qui fait partie de la question.
— meeech
1
À moins que je ne comprenne mal votre message, vous montrez comment évaluer JS sur la console. C'est différent de la modification d'une fonction de sorte que lorsque la fonction sera appelée à l'avenir, elle se comportera différemment.
— Bruno Bronosky
C'est suffisant. J'ai compris que modifier signifiait changer les valeurs de la page en direct et pensais que l'écriture aiderait, car une fois que vous l'avez dans la console, vous pouvez jouer avec les valeurs et tout autre chose js dans le contexte d'exécution.
— me
1
oui, meeech, j'ai fait exactement ce que vous décrivez pendant de nombreuses années. J'ai finalement été frustré de ne pas pouvoir réaliser une bonne boucle de rétroaction pour modifier les gestionnaires d'événements. Surtout ceux qui se déclenchent lors du chargement de la page. Comme AaronLS et moi en avons discuté dans les commentaires de la réponse de gnur, la modification dans DevTools> Sources> Sources fonctionne parfois et parfois non. Mais quand ça marche, c'est plutôt doux!
— Bruno Bronosky
1

vous pouvez modifier les fichiers javascrpit dynamiquement dans le débogueur Chrome, sous l' onglet Sources , mais vos modifications seront perdues si vous actualisez la page, pour suspendre le chargement de la page avant d'effectuer vos modifications, vous devrez définir un point d'arrêt, puis recharger la page et éditez vos modifications et enfin suspendez le débogueur pour voir vos modifications prendre effet. Débogueur Chrome

— Seif Tamallah
source
vous devez garder la console ouverte pour que le chrome s'arrête dans les points d'arrêt, sinon le chrome ignorera les points d'arrêt
— Seif Tamallah
Ca ne fonctionne pas. Je recharge en utilisant F5 et ça s'arrête, je change le fichier, puis je continue à courir et j'obtiens la même erreur que je viens de corriger. C'est un fichier js à côté de la page principale.,
— darkgaze
1

Je cherchais un moyen de changer le script et de déboguer ce nouveau script. Voici comment j'ai réussi à le faire:

  1. Définissez le point d'arrêt dans la première ligne du script que vous souhaitez modifier et déboguer.

  2. Recharger la page pour que le point d'arrêt soit atteint

  3. Collez votre nouveau script et définissez-y les points d'arrêt souhaités

  4. Ctrl + s et la page s'actualisera, provoquant l'atteinte de ce point d'arrêt dans la première ligne.

  5. F8 pour continuer, et maintenant votre script nouvellement collé remplace celui d'origine tant qu'aucune redirection et rechargement n'est effectué.

— 100r
source
0

Vous pouvez utiliser les "Remplacements" dans Chrome pour conserver les modifications Javascript entre les chargements de page, même lorsque vous n'hébergez pas la source d'origine.

  1. Créez un dossier sous Developer Tools> Sources> Overrides
  2. Chrome vous demandera l'autorisation d'accéder au dossier, cliquez sur Autoriser
  3. Modifiez le fichier dans Sources> Page puis enregistrez (ctrl-s). Un point violet indique que le fichier est enregistré localement.

Le sous-onglet Substitutions des outils de développement Chrome

— Mark Foreman
source
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.