JavaScript im Browser bearbeiten

  1. JavaScript in Google Chrome bearbeiten
  2. JavaScript in Mozilla Firefox bearbeiten
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 Quelle

    Navigieren 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 Firebug und 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.

Verwandter Artikel - JavaScript Browser