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.
247
num = 5, console.log(arguments[0], num), falsepour mettre à jour et enregistrer la valeur à l'intérieur de lafoofonction.Réponses:
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.
la source
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:
la source
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/
la source
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.
la source
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:
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.
la source
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.
la source
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
la source
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.la source
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/
la source
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.
la source
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 atteint
Collez votre nouveau script et définissez-y les points d'arrêt souhaités
Ctrl + s et la page s'actualisera, provoquant l'atteinte de ce point d'arrêt dans la première ligne.
F8 pour continuer, et maintenant votre script nouvellement collé remplace celui d'origine tant qu'aucune redirection et rechargement n'est effectué.
la source
Chrome DevTools possède un panneau d' extraits dans lequel vous pouvez créer et modifier du code JavaScript comme vous le feriez dans un éditeur, et l'exécuter. Ouvrez DevTools, puis sélectionnez le panneau Sources, puis sélectionnez l'onglet Extraits.
https://developers.google.com/web/tools/chrome-devtools/snippets
la source
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.
la source