web-dev-qa-db-fra.com

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

Dans les fichiers JSP, j'ai du Javascript assez compliqué. Sur une machine de production, nous voyons un bug très étrange que nous n'avons pas pu comprendre. Nous n'avons jamais été en mesure de le répliquer dans un environnement local ou de développement. C'est peut-être lié au javascript, mais je n'ai pas trouvé de moyen de le faire: utiliser mon navigateur pour visiter la page (sur le site de production), puis utiliser les outils du navigateur pour modifier le javascript exécuté sur cette page, notamment: lors des rechargements de la page.

Je suis toujours capable de faire cela pour Tweak CSS, etc., mais comme le soulignent ces questions, il n'est pas évident de savoir comment Tweak JS côté client:

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

  • "Exécuter JS" (addon Firefox) ne semble pas fonctionner (ne fait pas plus que la console dans 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é à JSP

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

Merci de votre aide! Ryan

javascriptbrowserfirebug
52
Ryan

Le problème avec l'édition de JavaScript comme vous pouvez le faire en CSS et HTML est qu'il n'y a pas de moyen propre de propager les modifications. JavaScript peut modifier le DOM, envoyer des demandes Ajax et modifier dynamiquement des objets et des fonctions existants au moment de l'exécution. Ainsi, une fois que vous avez chargé une page avec JavaScript, il se peut que ce soit complètement différent une fois que JavaScript est exécuté. Le navigateur doit suivre chaque modification effectuée par votre code JavaScript afin que, lorsque vous modifiez le JS, il annule les modifications apportées à une page vierge.

Mais, vous pouvez modifier JavaScript de manière dynamique de plusieurs manières:

  • Injections de JavaScript dans la barre d'URL: javascript: alert (1);
  • Via une console JavaScript (une version intégrée à Firefox, Chrome et les versions plus récentes d’IE
  • Si vous souhaitez modifier les fichiers JavaScript au fur et à mesure qu'ils sont transmis à votre navigateur (c'est-à-dire les récupérer en transit et les modifier), 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 intéressantes, car 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 "juste-servi" comme vous pouvez le faire avec la troisième option.

En dehors de cela, pour autant que je sache, il n'y a pas d'éditeur JavaScript éditer et exécuter dans le navigateur. J'espère que cela t'aides,

32
Chris Laplante

Je sais que vous pouvez modifier un fichier javascript lorsque vous utilisez Google Chrome.

  1. Ouvrez Chrome Inspector, allez sur 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. Il suffit ensuite d’appuyer sur Ctrl + S pour enregistrer le fichier.

Avertissement: Si vous actualisez la page, toutes les modifications seront restaurées dans le fichier d'origine. Je recommande de copier/coller le code ailleurs que si vous voulez l'utiliser à nouveau.

J'espère que cela t'aides!

26
Jacob

J'aimerais revenir à Fiddler. Après avoir joué avec cela pendant un certain temps, c'est clairement le meilleur moyen de modifier des demandes Web à la volée. Être JavaScript, POST, GET, HTML, XML, etc. C'est gratuit, mais un peu délicat à mettre en œuvre. Voici mon guide pratique:

Pour utiliser Fiddler pour manipuler JavaScript (à la volée) avec Firefox, procédez comme suit:

1) Téléchargez et installez Fiddler

2) Téléchargez et installez l'extension Fiddler: " add-ons Syntax-Highlighting "

3) Redémarrez Firefox et activez l’extension " FiddlerHook "

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

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

6) Pointez votre navigateur sur les URL de test de Fiddler:

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

7) Ajoutez Règles Fiddler afin d’intercepter et de modifier JavaScript avant d’atteindre le navigateur/serveur. Dans Fiddler, cliquez sur: Rules > Customize Rules.... [CTRL-R] Ceci lancera ScriptEditor.

8) Modifier et ajouter le règles suivantes :

a) Pour suspendre JavaScript afin de permettre sa modification, ajoutez la fonction " OnBeforeResponse":

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

b) Pour mettre en pause les HTTP POST afin de permettre l'édition lorsque vous utilisez le verbe POST, modifiez " OnBeforeRequest ":

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

c) Pour suspendre une demande de fichier XML afin de permettre son édition, éditez " OnBeforeRequest":

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

[9] TODO: Éditez ce qui précède CustomRules.js pour permettre la désactivation (a-c) .

10) Le chargement du navigateur s'arrête maintenant sur chaque JavaScript trouvé et affiche une marque de pause rouge pour chaque script. Afin de continuer à charger la page, vous devez cliquer sur le bouton vert "Run to Completion" de chaque script. (C'est pourquoi nous aimerions implémenter [9].)

6
not2qubit

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

2
Mindau