Comment puis-je modifier javascript dans mon navigateur comme je peux utiliser Firebug pour modifier CSS/HTML?

dans les fichiers JSP, j'ai du Javascript assez compliqué. Sur une machine de production, nous voyons un bogue très étrange que nous n'avons pas pu comprendre. Nous n'avons jamais été en mesure de le reproduire dans un environnement local ou de développement. Cela pourrait être lié au javascript, mais je n'ai pas trouvé une bonne façon de le faire: utiliser mon navigateur pour visiter la page (sur le site de production), puis utiliser les outils du navigateur pour éditer le javascript qui s'exécute sur cette page, y compris sur les téléchargements de page.

je suis toujours capable de faire cela pour modifier CSS, etc, mais comme ces questions le soulignent, il n'est pas évident comment modifier js côté client:

  • meilleure façon de saisir les erreurs JavaScript dans la production?
  • comment éditez-vous Javascript dans le navigateur?
  • comment modifier JavaScript dans Firebug?
  • Comment puis-je modifier un fichier js envoyé par le serveur avant qu'il arrive à mon navigateur?
  • comment remplacer Javascript du site de production avec Javascript local?
  • avec firefox w/firebug, Comment puis-je écrire javascript dans le navigateur et utiliser le .fichier js objets aussi?

cependant, ces réponses ne m'aident pas parce que:

  • "Execute JS" (addon Firefox) ne semble pas fonctionner (ne pas faire plus que la console de Chrome peut déjà le faire),
  • "Charles" pourrait fonctionner si j'avais utilisé des fichiers JS séparés, mais mon javascript est intégré dans JSP

Il semble que Comment modifier le code javascript à la volée dans le navigateur en mode de débogage? est la chose la plus proche de ce dont je parle, mais ce gars n'est pas capable de parler de ce qu'il a fait parce que il était pour son employeur.

Merci pour votre aide! Ryan

43
demandé sur Community 2011-07-12 02:03:58

5 réponses

le problème avec l'édition de JavaScript comme vous pouvez CSS et HTML est qu'il n'y a aucun moyen propre pour propager les changements. JavaScript peut modifier le DOM, envoyer des requêtes Ajax et modifier dynamiquement des objets et des fonctions existants à l'exécution. Donc, une fois que vous avez chargé une page avec JavaScript, il se peut que ce soit complètement différent après que le JavaScript ait été lancé. Le navigateur devrait garder une trace de chaque modification que votre code JavaScript effectue de sorte que lorsque vous éditez le JS, il renverse le changements à une page propre.

mais, vous pouvez modifier JavaScript dynamiquement de quelques autres façons:

  • injections JavaScript dans la barre D'URL: javascript: alert (1);
  • Via une console JavaScript (il y en a une intégrée dans Firefox, Chrome, et les versions plus récentes D'IE
  • si vous voulez modifier les fichiers JavaScript au fur et à mesure qu'ils sont fournis à votre navigateur (c'est-à-dire les saisir en transit et les modifier), alors je ne peux pas vous offrir beaucoup d'aide. Je suggère d'utiliser un proxy de débogage: http://www.fiddler2.com/fiddler2 /

les deux premières options sont excellentes parce que vous pouvez modifier toutes les variables et fonctions JavaScript actuellement dans la portée. Cependant, vous ne pourrez pas modifier le code et l'exécuter avec une page "just-served" comme vous le pouvez avec la troisième option.

en dehors de cela, pour autant que je sache, il n'y a pas d'éditeur JavaScript édité-et-exécuté dans le navigateur. Espérons que cela aide,

25
répondu Chris Laplante 2011-07-11 22:08:37

je sais que vous pouvez modifier un fichier javascript en utilisant Google Chrome.

  1. ouvrez L'Inspecteur Chrome, allez à l'onglet" Scripts".
  2. Appuyez sur le menu déroulant et sélectionnez le fichier javascript que vous souhaitez modifier.
  3. double-cliquez dans le champ de texte, tapez ce que vous voulez et supprimez ce que vous voulez.
  4. alors tout ce que vous avez à faire est d'appuyer sur Ctrl + S pour enregistrer le fichier.

Avertissement: Si vous actualisez la page, tous les changements de revenir au fichier d'origine. Je recommande de copier / coller le code ailleurs si vous voulez l'utiliser à nouveau.

Espérons que cette aide!

24
répondu Jacob 2013-02-18 04:45:26

j'aimerais revenir à Fiddler . Après avoir joué avec cela pendant un certain temps, c'est clairement la meilleure façon d'éditer toutes les requêtes web à la volée. Être JavaScript, POST, GET, HTML, XML, n'importe quoi. C'est gratuit, mais un peu délicat à mettre en œuvre. Voici mon HOW-TO:

pour utiliser Fiddler pour manipuler JavaScript (à la volée) avec Firefox, faites ce qui suit:

1) Télécharger et installer Fiddler

2) Télécharger et installer L'extension Fiddler: " 3 syntaxe-surlignage add-ons

3) Redémarrez Firefox et activez le" FiddlerHook "extension

4) Ouvrez Firefox et activez le FiddlerHook bouton de barre d'outils : View > Toolbars > Customize...

5) Cliquez sur le bouton Outil Fiddler et attendez que fiddler commencer.

6) dirigez votre navigateur vers les URL de test de Fiddler: 

Echo Service:  http://127.0.0.1:8888/
DNS Lookup:    http://www.localhost.fiddler:8888/

7) Ajouter Fiddler Rules afin d'intercepter et de modifier JavaScript avant d'atteindre le navigateur/serveur. Dans un violon sur: Rules > Customize Rules... . [CTRL-R] Cela va démarrer le ScriptEditor.

8) éditer et ajouter le règles suivantes :

a) pour mettre en pause JavaScript pour permettre l'Édition, Ajouter sous la fonction " OnBeforeResponse : 

if (oSession.oResponse.headers.ExistsAndContains("Content-Type", "javascript")){
  oSession["x-breakresponse"]="reason is JScript"; 
}

b) pour mettre en pause les messages HTTP pour permettre l'édition lorsque vous utilisez le verbe POST, éditez " OnBeforeRequest ": 

if (oSession.HTTPMethodIs("POST")){
  oSession["x-breakrequest"]="breaking for POST";
}

c) pour mettre en pause une demande de fichier XML pour permettre l'édition, éditer " OnBeforeRequest ": 

if (oSession.url.toLowerCase().indexOf(".xml")>-1){
  oSession["x-breakrequest"]="reason_XML"; 
}

[9] TODO: modifier le CustomRules.js ci-dessus pour permettre de désactiver (a-c) .

10) le chargement du navigateur va s'arrêter sur chaque JavaScript trouvé et afficher une pause rouge marque pour chaque script. Pour continuer à charger la page vous devez cliquer le bouton vert "Run to Completion" pour chaque script. (C'est pourquoi nous aimerions mettre [9].)

6
répondu not2qubit 2014-01-16 13:48:35

Firefox Developer Edition (59.0b6) a Scratchpad (Shift +F4) où vous pouvez exécuter javascript

2
répondu Mindau 2018-02-07 11:33:15

je recommande toujours Firebug. Non seulement il peut déboguer JS dans vos fichiers JSP, mais il peut améliorer l'expérience de débogage avec des addons comme JS Deminifier (si votre production JS est miniifié), FireQuery , FireRainbow et plus encore.

il y a aussi Firebug lite qui n'est rien d'autre qu'un bookmarklet. Il vous permet de faire des choses limitées mais est toujours utile.

Chrome comme une console de développeur intégré qui vous permettrait de modifier javascript.

en utilisant ces outils, vous devriez être en mesure d'injecter votre propre JS aussi.

-2
répondu Mrchief 2014-01-16 01:20:12