Modifier JavaScript dans le navigateur
Vous pouvez modifier et enregistrer les modifications dans les fichiers de code source JavaScript à l’aide de navigateurs. Habituellement, les développeurs doivent déboguer le code en direct lors de l’exécution. Avec l’aide des outils de développement du navigateur, nous pouvons facilement modifier nos fichiers stockés locaux et déboguer notre code.
Cet article discutera de la fonctionnalité des outils de développement dans les navigateurs populaires tels que Google Chrome et Mozilla Firefox et comment utiliser cette fonctionnalité pour modifier nos fichiers JavaScript.
Modifier JavaScript dans Google Chrome
Google Chrome fournit le moyen le plus efficace et le plus efficace pour apporter des modifications au code JavaScript. Nous pouvons également associer un dossier à l’espace de travail de l’outil Google Chrome Developer.
Nous effectuons quelques étapes pour utiliser cette fonctionnalité. Obtenez une meilleure compréhension des outils de développement en suivant les étapes ci-dessous.
-
Lancer les outils de développement
Chargez le fichier JavaScript local/serveur sur Google Chrome. Allez dans
menu>>plus d'outilsoù vous verrez l’option Outils de développement ou appuyez sur la touche de raccourci (F12) pour ouvrir les outils de développement. -
Onglet Source
Naviguez dans l’onglet source et examinez l’explorateur de fichiers pour déterminer quel fichier nous recherchons pour apporter des modifications. Nous pouvons éditer et apporter des modifications à notre fichier, mais nous perdons toutes les modifications si nous actualisons ou rechargeons notre page.
Si vous êtes inquiet, il n’y a pas de problème puisque nous pouvons enregistrer nos modifications dans les prochaines étapes.
-
Association de dossiers avec l’espace de travail
Ajoutez un dossier à l’espace de travail en cliquant sur l’onglet Système de fichiers, Google Chrome demandera une confirmation et nous devons autoriser l’autorisation d’accès. En utilisant un simple clic, nous pouvons ouvrir les fichiers de notre système à partir de l’explorateur.
-
Modifier et enregistrer
Enfin, nous pouvons maintenant modifier notre code et enregistrer les modifications en appuyant sur les touches CTRL + S, puis actualiser le navigateur.
Modifier JavaScript dans Mozilla Firefox
Mozilla Firefox nous fournit d’autres plugins pour éditer le JavaScript à l’intérieur du navigateur pour obtenir la même fonctionnalité.
Nous examinerons comment des fonctionnalités telles que Firebug peuvent déboguer le code JavaScript en quelques étapes. Nous pouvons également afficher les erreurs de syntaxe en surbrillance.
-
Installer le plug-in Firebug
Tout d’abord, nous devons installer le plugin Firebug à partir des thèmes complémentaires dans le menu. Dans le menu, accédez au plugin et recherchez par nom “Firebug” et installez.
-
Créer et ouvrir une page à modifier
Nous pouvons écrire notre code JavaScript dans un bloc-notes, un bloc-notes, etc.
Nous devons charger notre page HTML créée et ouvrir la console Firebug pour créer un fichier HTML. Accédez ensuite à l’onglet de script pour afficher le code JavaScript de cette source de page.
-
Débogage des points d’arrêt
Pour terminer l’exécution du code, nous pouvons utiliser breakpoint; nous pouvons également spécifier la portée du code pour visualiser les erreurs. Ceci est très utile pour le débogage.
-
Mettre à jour les variables modifiées
Nous pouvons cliquer sur le bouton Step over ; Firebug met à jour toutes les variables jusqu’à ce que nous mettions fin à l’exécution du point d’arrêt. Regardez les valeurs affichées par la console Firebug dans la fenêtre de surveillance.
-
Afficher/Charger les modifications
Enfin, rechargez la page pour afficher les modifications du fichier et appuyez sur la touche de raccourci CTRL + R.