JavaScript im Browser bearbeiten
Sie können Änderungen in JavaScript-Quellcodedateien mit Browsern bearbeiten und speichern. Normalerweise müssen Entwickler den Code live zur Laufzeit debuggen. Mit Hilfe der Entwicklertools des Browsers können wir unsere lokal gespeicherten Dateien einfach bearbeiten und unseren Code debuggen.
In diesem Artikel werden die Funktionen von Entwicklertools in gängigen Browsern wie Google Chrome und Mozilla Firefox und die Verwendung dieser Funktion zum Bearbeiten unserer JavaScript-Dateien erläutert.
JavaScript in Google Chrome bearbeiten
Google Chrome bietet die effizienteste und beste Möglichkeit, Änderungen am JavaScript-Code vorzunehmen. Wir können auch einen Ordner mit dem Arbeitsbereich des Google Chrome-Entwicklertools verknüpfen.
Wir führen einige Schritte aus, um diese Funktion zu verwenden. Verschaffen Sie sich ein besseres Verständnis der Entwicklertools, indem Sie die folgenden Schritte ausführen.
-
Entwicklertools starten
Laden Sie die lokale/Server-JavaScript-Datei in Google Chrome. Gehen Sie zu
Menü>>Weitere Tools, wo Sie die Option Entwicklertools sehen, oder drücken Sie die Tastenkombination (F12), um die Entwicklertools zu öffnen. -
Registerkarte
QuelleNavigieren Sie zur Registerkarte Quelle und untersuchen Sie den Datei-Explorer, um festzustellen, nach welcher Datei wir suchen, um Änderungen vorzunehmen. Wir können unsere Datei bearbeiten und ändern, aber wir verlieren alle Änderungen, wenn wir unsere Seite aktualisieren oder neu laden.
Wenn Sie sich Sorgen machen, gibt es kein Problem, da wir unsere Änderungen in den nächsten Schritten speichern können.
-
Ordnerverknüpfung mit Workspace
Fügen Sie dem Arbeitsbereich einen Ordner hinzu, indem Sie auf die Registerkarte Dateisystem klicken. Google Chrome fragt nach einer Bestätigung, und wir müssen die Zugriffsberechtigung zulassen. Mit einem einzigen Klick können wir Dateien unseres Systems aus dem Explorer öffnen.
-
Bearbeiten und speichern
Schließlich können wir jetzt unseren Code bearbeiten und die Änderungen speichern, indem wir die Tasten CTRL + S drücken und dann den Browser aktualisieren.
JavaScript in Mozilla Firefox bearbeiten
Mozilla Firefox stellt uns andere Plugins zur Verfügung, um das JavaScript im Browser zu bearbeiten, um die gleiche Funktionalität zu erreichen.
Wir werden untersuchen, wie Funktionen wie Firebug JavaScript-Code in wenigen Schritten debuggen können. Wir können auch die hervorgehobenen Syntaxfehler anzeigen.
-
Installieren Sie das Firebug-Plugin
Zuerst müssen wir das Firebug-Plugin aus den Add-on-Designs im Menü installieren. Navigieren Sie im Menü zum Plugin und suchen Sie nach dem Namen
Firebugund installieren Sie es. -
Seite zum Bearbeiten erstellen und öffnen
Wir können unseren JavaScript-Code in Wordpad, Notepad usw. schreiben.
Wir müssen unsere erstellte HTML-Seite laden und die Firebug-Konsole öffnen, um eine HTML-Datei zu erstellen. Navigieren Sie dann zum Skript-Tab, um den JavaScript-Code dieser Seitenquelle anzuzeigen.
-
Breakpoint-Debugging
Um die Codeausführung zu beenden, können wir breakpoint verwenden; Wir können auch den Umfang des Codes angeben, um die Fehler zu visualisieren. Dies ist sehr nützlich für die Fehlersuche.
-
Geänderte Variablen aktualisieren
Wir können auf die Schaltfläche Step over klicken; Firebug aktualisiert alle Variablen, bis wir die Ausführung des Haltepunkts beenden. Sehen Sie sich die Werte an, die von der Firebug-Konsole im Überwachungsfenster angezeigt werden.
-
Änderungen anzeigen/laden
Laden Sie abschließend die Seite neu, um die Dateiänderungen anzuzeigen, und drücken Sie die Tastenkombination Ctrl + R.