Comment éditez-vous Javascript dans le navigateur?
Je cherchais un moyen de modifier à la volée du code JavaScript dans un navigateur tel que Firefox, et de l'exécuter. Firebug nous permet d'éditer du code HTML et CSS à la volée, mais JavaScript est pénible. Je dois revenir à la source et modifier cela.
Je ne comprends pas pourquoi les outils de développement de navigateur n'autorisent pas l'édition. Y a-t-il un moyen de le faire?
[Mise à jour]: Marqué une nouvelle réponse en 2015
Pointeurs rapides:
- IE fournit maintenant l'une des meilleures expériences de développement/débogage
- Chrome fournit IntelliSense lors de l'écriture de javaScript, ce qui est cool
- FF fonctionne de la même manière qu'en 2010 ..!
On peut utiliser les trois consoles de navigateur (Firefox, Internet Explorer et Chrome) pour mettre à jour une fonction existante: disons que j'avais une fonction a() qui faisait autrefois console.log ('a'), je peux aller à la console, redéfinir la fonction a() en tant que alert('a') et exécutez-le à nouveau pour afficher un message d’alerte.
Lorsque j’avais posé cette question en 2010, les navigateurs n’étaient pas aussi doués pour le débogage de JavaScript et j’ignorais probablement qu’une fonction pouvait être remplacée à la volée.
en Chrome: Tous les éléments de Chrome DevTools -> Sources, pour plus de détailsCtrl+Oоткрыть файлы, включенные в страницу.
Затем вы можете отредактировать файл и нажатьCtrl+Sсохранить изменения и посмотреть, что произойдет с новыми кодами. Обычно делаю то с помощью точки останова.
Если вы отлаживаете и хотите сохранить изменения в вашей локальной файловой системе, вы можете щелкнуть правой кнопкой мыши по навигации и выбрать Добавить папку в рабочую область:
В этом случае если.
Например я добавляю папку в рабочую область, в ней есть 1.js:
Затем я редактирую файл JS dans DevTools, en anglais, écrit par:
Bien sûr, j'ai trouvé Execute JS (pour firefox) utile parfois, et je pense que c'est ce que vous cherchez:
https://addons.mozilla.org/en-US/firefox/addon/1729
Il vous permet de visualiser et de modifier le Javascript sur votre page.
Chrome possède une fonctionnalité assez puissante pour apporter des modifications au code JS. En gros, vous définissez des points d'arrêt et une fois que vous frappez, vous modifiez JS à votre guise. Plus d'infos et démo - où Paul Irish corrige une page brisée.
Dans le cas de FF, vous pouvez utiliser Developer Edition :
Débogueur JavaScript Arrêtez, parcourez, examinez et modifiez le fichier JavaScript en cours d'exécution dans une page.
Chromefournit une excellente facilité pour modifier le javascript dans le navigateur
step1: Lancez l’outil de développementOuvrez Chrome, chargez une page à partir de votre système de fichiers/serveur local et ouvrez Outils de développement dans le menu Outils ou appuyez sur Ctrl + Maj + I/Cmd + Maj + I. Accédez à l'onglet Source, puis cliquez sur l'icône Sources ou appuyez sur Ctrl + O pour sélectionner votre fichier JavaScript.
setp2: Edit Vous pouvez maintenant passer directement à l’écran et éditer votre code. Chrome propose également une liste de fonctions utiles pour vous aider à localiser la bonne ligne - appuyez sur Ctrl + Maj + O/Cmd + Maj + O
step3: Save Appuyez sur Ctrl + S/Cmd + S pour enregistrer vos modifications. Ceci met à jour le fichier en mémoire et applique les modifications immédiatement. Remarque Toutefois, ce code ne redémarrera pas et les modifications des variables d’initialisation ne seront pas affectées .
Pour enregistrer les modifications dans le fichier d'origine, cliquez avec le bouton droit de la souris sur l'éditeur et sélectionnez Enregistrer ou Enregistrer sous …. Une fois cela fait, vous pouvez actualiser la page et le script va redémarrer
étape4: Annuler Votre mise à jour a-t-elle posé problème? Cliquez avec le bouton droit sur l'éditeur et sélectionnez Modifications locales…. Le volet inférieur affiche toutes les modifications récentes et vous permet de revenir en arrière.
Firefox fournit un autre outil pour modifier javascript dans le navigateur
setp1: Lancez ScratchpadPour ouvrir la fenêtre du Scratchpad, appuyez sur Maj F4 ou ouvrez le menu Web Developer (sous-menu du menu Outils sous OS X et Linux), puis sélectionnez Scratchpad. Cela ouvrira une fenêtre de l'éditeur Scratchpad. À partir de là, vous pouvez commencer immédiatement à écrire du code JavaScript à essayer.
step2: Edit Le menu File propose des options pour enregistrer et charger des extraits de code JavaScript, afin que vous puissiez le réutiliser ultérieurement si vous le souhaitez. Les informations de complétion de code et de type sont uniquement disponibles à partir de Firefox 32. Pour répertorier les suggestions de saisie semi-automatique, appuyez sur Ctrl Espace. Pour afficher la fenêtre contextuelle, appuyez sur Shift Space dans Firefox 32 ou sur Ctrl Shift Space dans Firefox 33+.
step3: Execution Une fois que vous avez écrit votre code, sélectionnez le code que vous voulez exécuter. Si vous ne sélectionnez rien, tout le code de la fenêtre sera exécuté. Choisissez ensuite le mode d’exécution du code à l’aide des boutons situés en haut, du menu Exécuter ou du menu contextuel. Le code est exécuté dans la portée de l'onglet actuellement sélectionné. Toutes les variables que vous déclarez en dehors d'une fonction seront ajoutées à l'objet global pour cet onglet.
Il y a quatre options d'exécution disponibles.
- Courir
- Inspecter
- Afficher
- Recharger et courir
Pour créer/éditer le javascript dans le navigateur, je voudrais utiliser firebug (plugin pour firefox) ou la barre d’outils de développement firefox intégrée (à utiliser de préférence avec la version developer de firefox ).
Étant donné que votre commentaire sur la prime demande de réparer un site Web défectueux, j'utiliserais les outils ci-dessus pour créer un extrait de code JS qui résoudra votre problème. Après cela, je ne voudrais plus exécuter le code dans la barre d’outils développeur à chaque fois.
Donc ... une fois que vous avez créé cet extrait JS qui corrige le site pour vous, vous pouvez utiliser GreaseMonkey (plugin) pour exécuter le script de correction de site à chaque visite. De cette façon, vous pouvez utiliser le site normalement et n'avez pas besoin de l'exécuter manuellement à chaque chargement de page.
Ce n'est actuellement pas possible dans Firefox OTB. Voir bogues 737743 et 486546 .
En référence à @ artur-grzesiak , "Arrêter, parcourir, examiner et modifier" semble faire référence à variables
Dans la version de chrome 42.0.2311 dans Developer Tool en cliquant sur la console, vous pouvez obtenir une fenêtre dans laquelle vous pouvez modifier javascript et après avoir appuyé sur entrée, vous pouvez voir son effet dans le navigateur.
Dans la version 37.0.1 de Mozilla, après avoir ouvert l’outil de développement, cliquez sur la console pour modifier votre code de script Java à droite de la fenêtre de l’outil, puis cliquez sur Exécuter pour tester le code de script Java dans le navigateur.
